Разное

Структура html5: Использование разделов и создание структуры HTML документа — Веб-технологии для разработчиков

25.03.2018
Структура html5 для начинающих — Уроки верстки FreeHtmlThemes

Каждый, даже самый непродвинутый пользователь, хоть раз сталкивался с таким понятием, как HTML. Что же это такое и для каких целей его использовать? Аббревиатуру HTML можно расшифровывать как Hypertext Markup Language. Проще говоря, это язык, используемый для разметки гипертекста. HTML сложно отнести к языкам программирования, это понятие скорее относится к области размещения элементов в браузере. При помощи HTML можно показать обозревателю, как должны располагаться элементы на странице сайта, когда пользователь откроет сайт. 

HTML-элемент – рисунки, текст, анимация и все, что мы помещаем на странице. HTML помогает расположить эти элементы на странице, выбрать текст заголовков, создать переход на другую страницу и другое. 

Содержание

Что такое теги и для чего они нужны?

Если открыть код любой страницы HTML, то можно заметить, что состоит она из множества непонятных, на первый взгляд, символов. Эти символы являются основой HTML – это теги. Некоторые теги требуют обязательного закрытия, хотя современные браузеры иногда и игнорируют ошибку подобного рода, но пренебрегать правилами нельзя, это может нарушить структуру документа, некоторые же теги не требуют закрытия вовсе. Нужно быть внимательными.

HTML -документ состоит из следующих обязательных, основополагающих тегов, без которых невозможна страница в сети:

<!DOCTYPE html>
<head> Заголовок
</head>
<body>
Тело
</body>
</html>

Теги !DOCTYPE html> </html> всегда открывают и закрывают документ, DOCTYPE объясняет непонятливому браузеру, как стоит разбирать этот документ, в старых версиях HTML доктайп имел разные значение, в современной пятой версии допустимо вышепредставленное написание, поэтому не будем углубляться в подробности и используем его. Между ними помещаются все остальные теги.

Сам документ делится на «голову» и «тело» документа. Для этого используются теги <body> </body> и <head> </head>. Не сложно догадаться, что тег <body> это тело документа со всеми элементами, которые отображаются на странице, а <head> это голова, в которой содержатся скрипты, метаданные и проч. Содержимое тега head физически мы не видим, но он имеет колоссальное значение для продвижения и функционирования страниц сайта.

Внутри тегов html помещают другие теги, не забывают про голову и тело документа, например,

<b>Содержимое 1</b><p>Содержимое 2</p><div>Содержимое 3</div>

В первом случае выделяем текст жирным, во втором добавляем абзац, а в третьем добавляем блочный элемент div с текстом внутри.

Тег <title> </title>. Это обязательный тег, с его помощью размещается необходимый заголовок страницы сайта. Его оптимальная длина 60-70 символов, будьте внимательны. Это название будет отображаться в выдаче поисковика и на вкладке браузера и необходимо для SEO-продвижения. Его необходимо поместить между тегами

<head> </head>

Еще одним важным одиночным мета-тегом, который необходимо писать в head проекта становится кодировка документа. Она необходима, чтобы не произошло путаницы с предполагаемой и фактической кодировкой, иначе отображение всего вашего важного контента может превратиться в набор невнятных символов. Самая распространенная кодировка для кириллицы — utf-8, использование других кодировок, на основе windows считается дурным тоном сейчас.

Для поисковой системы большое значение имеют еще два мета-тега, которые прописываются в голове документа, это Keywords (ключевые слова) и Description (краткое описание). В них пишется информация не для пользователей, а для поисковиков, чтобы рассказать о ключевых моментах статьи и ее кратком описании (Длина до 120 символов). Значение для поисковых сиситем этих тегов сейчас остается загадкой, раньше ключевики большое влияние оказывали на выдачу, сейчас ситуация спорная.

<head>
<title>Заголовок</title>
<meta charset="utf-8">
<meta name="description" content="описание">
<meta name="keywords" content="ключевые, слова, через, запятую">
</head>

Почти все теги имеют парную структуру: <> и </>. Это контейнер. Все, что помещается между ними, например, «Заголовок» — содержимое контейнеров.

Одиночные теги не нуждаются в закрытии, то есть их структура <>. Одиночные теги призваны совершать некое действие, к примеру, вставку картинки, поля ввода, ссылки, метаописания, переход на следующую строку и т.д. Т.е. параметры и свойства тегов, их содержимое задается не внутри контейнера, а через атрибуты. 

Атрибуты тегов.

Теги могут обладать атрибутикой. Наподобие параметра bgcolor:

<body bgcolor="grey">Текст</body>

Таким образом тег <body> имеет атрибут bgcolor со значением «grey». Так можно сделать фон документа серым. Набор атрибутов у каждого тега различается, все зависит от функционала данного элемента. 

Все теги и атрибуты находятся в свободном доступе. Зайдя в поисковую систему, можно с легкостью найти все теги и параметры, а также их значения. По сути, документ HTML состоит и этих элементов, меняя которые можно построить структуру сайта. Например, на сайта http://htmlbook.ru вы найдете подробное описание всех элементов HTML страницы, тегов, атрибутов, примеров использования. Научиться применять 

HTML5 | Простой документ

134

Веб-программирование — HTML5 — Простой документ HTML5

Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Крошечный документ HTML5</title>
<p>Дадим встряску браузеру в стиле HTML5!</p>

Этот простой документ можно упростить еще больше. Например, конечный тег </р> вообще-то не является обязательным в стандарте HTML5, т. к. браузеры знают, как закрывать все открытые элементы в конце документа (а стандарт HTML5 узаконивает это поведение). Но подобное срезание углов вместо упрощения делает разметку более сложной для понимания и может вызвать неожиданные ошибки.

Большинство веб-разработчиков придерживается мнения, что использование традиционных разделов <head> и <body> полезно для облегчения восприятия документа, т.к. они четко разделяют информацию о странице (заголовок страницы) и само содержимое (основная часть страницы). Такая структура особенно полезна, когда к странице добавляются сценарии, таблицы стилей и метаэлементы:

<!DOCTYPE HTML>
<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
</head>
<body>
   <p>Дадим встряску браузеру в стиле HTML5!</p>
</body>

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент <html>, как показано в следующем листинге:

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
</head>
<body>
   <p>Дадим встряску браузеру в стиле HTML5!</p>
</body>
</html>

Вплоть до HTML5 в каждой версии официальной спецификации HTML требовалось использование элемента <html>, несмотря на то, что наличие этого элемента никаким образом не влияет на обработку браузером остального кода страницы. В HTML5 использование этого элемента оставлено полностью на личное усмотрение разработчика.

Использование элементов <html>, <head> и <body> является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов <html>, <head> и <body>, даже если разработчик и не использовал их.

На данном этапе этот пример страницы является чем-то средним между самым простым HTML5-документом и расширенной отправной точкой практической веб-страницы HTML5. В последующих разделах мы добавим к нему остальные необходимые элементы и копнем глубже в разметку.

Описание типа документа HTML5

В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:

Первое, что бросается в глаза в описании типа документа HTML5 — это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
      Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответст

Правильная структура страницы на HTML5, новые семантические теги 06.07.18 HTML 126

С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?

html5-new-tags-semantic

Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить внешний вид современного веб-приложения или сайта более совершенно.

Согласно спецификации HTML5, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:

  • Мета,
  • Заголовочное,
  • Текстовое,
  • Потоковое,
  • Секционное,
  • Встроенное,
  • Интерактивное.

Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.

Тег header (потоковое)

Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег footer и address, а также в сам тег header.

Тег nav (потоковое, секционное)

Как видно из названия тега, служит для создания блока навигации, различных меню и блоков ссылок. Можно использовать несколько раз на странице.

Тег article (потоковое, секционное)

Тег предназначен для группирования статей на странице, его стоит применять если на одной странице размещено несколько статей, если же всего лишь одна статья, тогда можно не использовать данный тег.

Тег section (потоковое, секционное)

Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д.

Тег aside (потоковое, секционное)

Этот тег позволяет выделить какое-либо содержимое страницы в отдельную логическую часть, например, с его помощью можно сделать боковую колонку, как в книге.

Тег footer (потоковое)

Тег служит для создания футера на сайте, места в котором обычно размещается информация о сайте, копирайте и т.д. Можно использовать несколько раз на странице.

Тег address (потоковое)

Тег полезен для создания блока с адресной информацией, особенно важно для продвижения в поисковых системах. Содержимое в данном теге обычно выделяется браузерами курсивом.

Тег main (потоковое)

Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav.

Тег figure (потоковое, корневое)

Данный тег используется для выделения автономного контента, например, с его помощью можно сделать блок, содержащий фотографию и описание к ней.

Тег figcaption (-)

Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице.

Тег time (потоковое, текстовое)

Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах.

Тег mark (потоковое, текстовое)

Тег позволяет выделить контент на странице цветом, как маркером на бумаге. Обычно это желтый цвет, но можно изменить цвет стилями.

Тег bdi (потоковое, текстовое)

Тег отделяет текст, который можно будет читать как слева направо, так и наоборот.

Тег wbr (потоковое, текстовое)

Тег-одиночка, позволяет задать место, где браузеру можно разорвать длинную строку.

Таким образом, новые теги позволяют эффективно производить разметку страницы, это крайне важно для поискового продвижения и для использования веб-страниц в различных сервисах.

HTML5 и CSS3 — начнём верстать. Часть 1

Из серии статей «HTML5 и CSS3 – наступает время пользоваться»

Продолжение статьи Чем нас радует CSS3

Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …

Как хорошо, что придумали компьютеры. Вы можете создать себе нужную атмосферу, чтобы в спокойной обстановке начать творить. Собственно этим мы сейчас и займёмся.

Для выполнения заданий вам потребуются (будет повод обновиться):

Программное обеспечение или ресурс Требуемая версия
Notepad++, или любой текстовый редактор,
который не добавляет лишнего
в начало файла с кодировкой utf-8
Mozilla Firefox
Opera
Chrome
4+
11.10+
11+

Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5. Пройдите по ссылке http://html5test.com, там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?

В этом тьюториале, мы:

  • создадим с вами страницу по стандарту HTML5
  • воспользуемся новыми семантическими элементами,
  • немного порисуем,
  • проверим как выводится видео на нашей странице,
  • проверим работу новых элементов формы.

Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css. В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.

Готовим каркас страницы

Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.

Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег <!DOCTYPE HTML>. Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … publictransitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.

Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.

Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.

Всё что мы здесь описали есть в листинге №1:

Листинг 1. Базовая структура документа  HTML5


<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8" />
		<title>Инвесторы видят перспективу</title>
		<link rel="stylesheet" href="styles.css" />
	</head>
	<body>

	</body>
</html>

Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу <html> больше ничего не нужно кроме lang. Для метатега достаточно написать charset. Кроме того, для тега link не нужно указывать type.

Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.

Делаем разметку контента

Разместим на каркасе семантические блоки

Теперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.

Наша страница будет служить для показа полного текста новости о компании, которой посвящён сайт. На неё будет происходить переход либо с главной страницы, где размещаются последние новости, либо из архива новостей.

Разместим блоки в контейнере <body></body>. Будем придерживаться следующей последовательности этих элементов:

– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer

В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer, в котором мы разместим дополнительную информацию о контенте наших страниц.

Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами <body> … </body>.

Листинг 2. Размещение семантических блоков HTML5


<header>
	<hgroup>
		<h2>ООО Рога и копыта</h2>
		<h3>Полный текст новости</h3>
	</hgroup>
</header>

<nav>
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">О нас</a></li>
		<li><a href="#">Контакты</a></li>
		<li><a href="#">Архивы новостей</a></li>
	</ul>
</nav>

<article>
	<header>
		<time datetime="2011-04-26" pubdate>
			<span>Апр</span> 26
		</time>
		<h2>
			<a href="#" title="Ссылка на новость" rel="bookmark">
				Инвесторы видят перспективу
			</a>
		</h2>
	</header>
	<p>Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.</p>
	<section>
		<header>
			<h2>Что думает общественность</h2>
		</header>
		<p>В реальности существует только Ubuntu с таким странным именем "Зайцелоп".</p>
	</section>
</article>

<footer>
	<p>&copy; 2011 ООО Рога и копыта. Свои права мы держим в надёжном месте.</p>
</footer>

Теперь страницу можно рассмотреть в браузере. Однако, она пока выглядит невзрачно. Но мы ведь не зря уже позаботились и подключили файл со стилями.

Покрасим фасад

У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif — без засечек. К ним относятся, например: Arial, Helvetica, Verdana. Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.

Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.

box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px, либо других линейных единицах (em, pt), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset.  Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.

text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.

border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius ещё и в эту парочку параметров.

Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css.

Листинг 3. CSS для новых семантических элементов HTML5


* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
	width: 480px; margin: 0px auto;
}

header.mainH {
	-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
	-webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400;
	padding: 5px;
	text-align: center;
}

header h2 {
	font-size: 36px; margin: 0px;
}

header h3 {
	font-size: 18px; margin: 0px; color: #888;
	font-style: italic;
}

nav ul {
	list-style: none; padding: 0px; display: block;
	clear: right; background-color: #666;
	padding-left: 4px; height: 24px;
	-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
}

nav ul li {
	display: inline; padding: 0px 20px 5px 10px;
	height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
	color: #EFD3D3; text-decoration: none;
	font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
	color: #fff;
}

article > header time {
	font-size: 14px; display: block; width: 26px;
	padding: 2px; text-align: center; background-color: #993333;
	color: #fff; font-weight: bold; -moz-border-radius: 6px;
	-webkit-border-radius: 6px; border-radius: 6px; float: left;
	margin-bottom: 10px;
}

article > header time span {
	font-size: 10px; font-weight: normal;
	text-transform: uppercase;
}

article > header h2 {
	font-size: 20px; float: left;
	margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888;
}

article > header h2 a {
	color: #993333;
	text-decoration: none;
}

article > section header h2 {
	font-size: 16px;
}

article p {
	clear: both;
}

footer p {
	text-align: center; font-size: 12px;
	color: #888; margin-top: 24px;
}

article > section {
	-moz-border-radius: 6px 0 0 0;
	-webkit-border-radius:6px 0 0 0;
	border-radius: 6px 0 0 0;
	box-shadow: 3px 3px 3px 0 #FFAA88 inset;
	padding: 5px;
	color: #665588;
	margin-top: 40px;
}

Если вы откроете свою индексную страничку сейчас, то она уже будет выглядеть, не так уныло, посмотрите на Рисунок 1. По сравнению с предыдущим видом, она будет просто СУПЕР

Рисунок 1. Вид стилизованой страницы

Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.

Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.

Далее, в части №2 порисуем, выведем видео и проверим новые элементы формы.

HTML5 и CSS3 – начнём верстать. Часть 2

Понравилась статья? Посоветуйте другу


Контентная модель HTML5

Язык разметки HTML формирует структуру веб-страницы, а теги используются для идентификации типа содержимого на странице. Семантика HTML5 добавляет каждому тегу ещё больше смысла, помогая эффективно организовывать контент и использовать теги по назначению.

До появления HTML5 существовало две основные категории элементов — блочные и строчные. Такое разделение не совсем точно описывало различные типы содержимого, поэтому в спецификации HTML5 модель содержимого была расширена, благодаря чему каждый элемент может принадлежать ноль, одной или более категориям.

Модель содержимого HTML5

Контентная модель (content model), или модель содержимого, описывает, какой тип содержимого следует ожидать внутри элемента и какие элементы могут быть вложены в другие элементы. Большинство элементов принадлежат одной категории или нескольким категориям одновременно.

К содержимому элемента относится текст и его дочерние элементы. Если элемент не содержит текст (отличный от пробелов между элементами) и любой другой элемент, он принадлежит «никакой» модели содержимого.

1. Типы содержимого

Рис. 1. Категории контента

Каждый элемент в HTML принадлежит ноль или более категориям, которые группируют элементы со схожими характеристиками. Выделяют следующие общие категории:

  • Мета содержимое
  • Потоковое содержимое
  • Секционное содержимое
  • Заголовочное содержимое
  • Текстовое содержимое
  • Встроенное содержимое
  • Интерактивное содержимое

Секционное, заголовочное, текстовое, встроенное и интерактивное содержимое относятся к потоковому содержимому. Мета содержимое иногда может относиться к потоковому содержимому. Мета содержимое и интерактивное содержимое иногда относятся к текстовому содержимому. Встроенное содержимое также относится к текстовому содержимому, но часть элементов также является интерактивным содержимым.

Другие категории используются для специфических целей, например, для определения элементов форм. Некоторые элементы имеют уникальные требования и не вписываются в какую-либо конкретную категорию.

2. Основные категории содержимого

2.1. Мета содержимое

<base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>

К мета содержимому относятся элементы, которые содержат информацию о HTML-документе, устанавливают взаимосвязь HTML-документа с другими документами (например, таблицами стилей css), отвечают за внешний вид или поведение контента на странице. Элементы из другого пространства имён, чей смысл связан с метаданными, также относятся к мета содержимому.

2.2. Потоковое содержимое

<a>, <abbr>, <address>, <area> (если он является потомком элемента <map>), <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link> (если его присутствие внутри тела документа допускается), <main>, <map>, <mark>, MathML, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>, текст

К этому типу содержимого относится большинство элементов, используемых в теле документа или веб-приложения.

2.3. Секционное содержимое

<article>, <aside>, <nav>, <section>

Секционное содержимое — содержимое, определяемое областью заголовков и колонтитулов. Каждый элемент секционного содержимого потенциально имеет заголовок и схему (outline).

2.4. Заголовочное содержимое

<h2>, <h3>, <h4>, <h5>, <h5>, <h6>

Заголовки разделов, размеченных явно с помощью элементов секционного содержимого, либо просто подразумеваемых наличием заголовка.

2.5. Текстовое содержимое

<a>, <abbr>, <area> (если он является потомком элемента <map>), <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link> (если его присутствие внутри тела документа допускается), <map>, <mark>, MathML, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <template>, <textarea>, <time>, <u>, <var>, <video>, <wbr>, текст

Текстовое содержимое представлено элементами для разметки текста внутри абзацев. Большинство элементов, принадлежащих категории текстовое содержимое, могут содержать только элементы из своей категории, а не любые элементы из категории потокового содержимого.

2.6. Встроенное содержимое

<audio>, <canvas>, <embed>, <iframe>, <img>, MathML, <math>, <object>, <picture>, SVG, <svg>, <video>

Встроенное содержимое — содержимое, которое импортируется в документ из других источников, другого языка разметки или пространства имён. Некоторые элементы могут иметь резервный контент, который будет задействован, если внешний ресурс не может быть использован (например, в случае неподдерживаемого формата видео).

2.7. Интерактивное содержимое

<a> (если присутствует атрибут href), <audio> (если присутствует атрибут controls), <button>, <details>, <embed>, <iframe>, <img> (если присутствует атрибут usemap), <input> (если значение атрибута type не равно hidden), <label>, <select>, <textarea>, <video> (если присутствует атрибут controls)

Интерактивное содержимое предполагает взаимодействие с пользователем. Атрибут tabindex также может сделать любой элемент интерактивным содержимым.

3. Дополнительные категории содержимого

3.1. Явное содержимое

<a>, <abbr>, <address>, <article>, <aside>, <audio> (если присутствует атрибут controls), <b>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, <data>, <details>, <dfn>, <div>, <dl> (если он содержит по крайней мере одну пару термин-описание), <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, <input> (если значение атрибута type не равно hidden), <ins>, <kbd>, <label>, <main>, <map>, <mark>, MathML, <math>, <menu> (если значение атрибута type равно toolbar), <meter>, <nav>, <object>, <ol> (если он содержит по крайней мере один элемент <li>), <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <textarea>, <time>, <u>, <ul> (если он содержит по крайней мере один элемент <li>), <var>, <video>, текст, не являющийся пробелом между элементами

Как правило, элементы, принадлежащие модели потокового или текстового содержимого, должны иметь минимум один узел, который имеет явное содержимое и для него не задан атрибут hidden. Явное содержимое делает элемент непустым. Это обеспечивается тем, что элемент содержит потомка с текстом или каким-либо содержимым, которое пользователь может слышать (элемент <audio>), видеть (элемент <canvas>, <img> или <video>) или каким-либо образом взаимодействовать с ним (интерактивные элементы форм).

Это требование не является жёстким, так как в некоторых случаях элемент может быть пустым по очевидным причинам (например, он в последствии будет наполняться с помощью скрипта).

3.2. Элементы, поддерживающие скрипт

<script>, <template>

Элементы, поддерживающие скрипт, не отображаются на экране. Они используются для поддержки сценариев, например, для обеспечения функциональных возможностей для пользователя.

3.3. Корневое секционное содержимое

<blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure>, <td>

Кроме секционного содержимого есть несколько элементов, являющихся корневыми секционными. Они выделены из секционного содержимого, но также могут иметь собственную структуру заголовков, а разделы и заголовки внутри этих элементов не взаимодействуют со структурой заголовков их родителей.

4. Прозрачная модель содержимого

<a>, <audio>, <canvas>, <del>, <ins>, <map>, <object>, <video>

Некоторые элементы имеют прозрачную модель содержимого. Это означает, что тип ожидаемого содержимого наследуется от их родительского элемента. Дополнительно к собственному разрешенному контенту они могут содержать любой контент, который допустим для их родительского элемента. Если такой элемент не имеет родительского элемента, то его прозрачная модель контента должна рассматриваться как ожидающая любое содержимое из категории потокового содержимого.

HTML5 | htmlbook.ru



HTML5 | htmlbook.ru 
  • HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.

  • Семантика

    Семантика дает представление о структуре документа и позволяет людям и программам более полно управлять данными. В HTML5 добавлено множество семантических тегов, а также поддержка RDFa, микроформатов и микроданных.

  • Автономная работа

    Благодаря кэшу HTML5, веб-приложения могут быстрее работать и запускаться даже без подключения к Интернету.

  • 3D, графика и эффекты

    Можно рисовать прямо на веб-странице используя Canvas API. Технологии WebGL и CSS3 3D позволяют отображать трехмерную графику непосредственно в браузере.

  • Мультимедиа

    Приложения и сайты могут проигрывать аудио и видео без установки дополнительных плагинов вроде Flash-а.

  • Производительность и интеграция

    Сделайте свои веб-приложения быстрыми и динамичными с разными технологиями вроде Web Workers и XMLHttpRequest 2.

  • CSS3

    CSS3 в интеграции с HTML5 позволяет управлять видом любых элементов на странице, создавать потрясающие эффекты без ущерба семантической структуры, производительности и без дополнительных скриптов.

Ничего не знаете об HTML5?

Начните изучение HTML5 с книги Марка Пилгрима Погружение в HTML5.

В HTML5 появилось множество семантических элементов, а также тегов, позволяющих вставлять аудио и видео на сайт.

<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

Вёрстка сайта на HTML5

Описание процесса вёрстки сайта lionindesert.ru на HTML5.

Форум

Также разные аспекты HTML5 можно обсудить на форуме.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Стандартная структура шаблона сайта. Пример построения документа на HTML5. Стартовая страница структура шаблона сайта
Любой сайт начинается с создания или редактирования главной страницы. Она задаёт общую архитектуру будущему проекту.
Структура сайта определяется главной страницей, все дополнительно созданные варианты имеют аналогичное построение за исключением содержимого (контента) «Тела страницы».

Рассмотрим простую схему построения любого среднестатистического сайта


Все шаблоны состоят из файлов.html (страниц) и папок (директорий).
Главная страница index.html открывается по умолчанию при вызове сайта по адресу домена: http://вашДомен.ru/

Файлы стилей дизайна лежат в папке (директории) css/ (ниже приведены примеры часто используемых файлов).
Файлы сценариев находятся в папке js/ (ниже включены примеры часто применяемых скриптов).
Файлы изображений обычно помещают в директорию img/ (ниже указаны разные форматы картинок).

Пример структуры шаблона

Иерархия стандартного шаблона сайта


Жирным шрифтом обозначены — папки;
Синим цветом выделены файлы;
Красным цветом отмечены основные стандартные файлы.Шаблон(домен)/
index.html — главная страница
page1.html — дополнительная страница
page2.html — дополнительная страница
page3.html — дополнительная страница
contact.html — страница контактов

└── папка css/
    ––– style.css
    ––– bootstrap.css
    ––– font-awesome.css
    ––– jquery.3.4.1.min.js
    ––– и т.д.

└── папка js/
    ––– js.js
    ––– jquery.min.js
    ––– responsive.js
    ––– и т.д.

└── папка img/
    ––– image1.jpg
    ––– image2.png
    ––– image3.gif
    ––– image4.jpg
    ––– и т.д.

Пример стандартной стартовой страницы построенной на HTML5 с комментариями


Скачать пример страницы вы можете ниже. В коде страницы присутствуют комментарии, поэтому остановлюсь лишь на некоторых пунктах:
— Атрибут lang=»en» можно заменить для русскоязычных сайтов на lang=»ru», хотя его присутствие является не обязательным.
— Как вы заметили, отсутствует атрибут Метатег Keywords — теперь поисковые системы обходятся без него и не нуждаются в нашем представлении для них ключевых слов.
Мегатег Description остался в HTML5. Мы имеем возможность предложить поисковикам свою версию описания документа, но он в праве выбирать сам, какой фрагмент текста использовать для показа пользователям.

В структуре страницы желательно использовать семантические элементы HTML5 определяющие тематику блоков, например:
<header> — элементы навигации и заголовков;
<nav> — подразумевает навигацию;
<section> — группирует тематическое содержимое;
<article> — дочерний элемент <section>;

Это не обязательное требование, можно просто воспользоваться обычными элементами DIV, если вы в будущем не собираетесь структурировать страницу под семантическую разметку Schema.

Пример кода стартовой страницы HTML5

<!doctype html> <!-- Допускается любой регистр -->
<html lang="en"> <!-- Для русскоязычных сайтов lang="ru" -->
<head>
  <meta charset="utf-8"> <!-- Объявляет кодировку страницы -->
  <title>Стартовый шаблон HTML5</title>  <!-- Название страницы -->
  <meta name="description" content="Документ построен на HTML5"> <!-- Описание страницы -->
  <meta name="author" content="SiteY">
  <link rel="stylesheet" href="css/styles.css"> <!-- Путь к пользовательской папке с файлом -->
  <link rel="stylesheet" href="https://...../bootstrap.min.css"><!-- Абсолютный путь к внешнему файлу -->
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><!-- Для капризов IE 9 -->
  <![endif]-->
</head>
<body>
<!-- Шапка - заголовок страницы -->
<header>
<!-- Навигация -->
<nav>
<div>
Меню сайта
</div>
</nav>
<!-- Слайдер-->
<div>
Слайдер
</div>
</header>
<!-- Конец Шапка -->

<!-- Тело страницы -->
<main>
   <section>

      <section>
         <article>
            Часть секции 1 
         </article>
      </section>
	  
      <section>
         <article>
            Часть секции 2 
         </article>
      </section>

   </section>
</main>
<!-- Конец тела страницы -->

<div>
Дополнительная колонка SideBar
</div>
<!-- Footer -->
<footer>
<div>
<p> Copyright &copy;  2019</p>
</div>
</footer>
<script src="js/js.js"></script> <!-- Путь к папке со скриптом -->
<script>
Вставка для скрипта
</script>
</body>
</html>

Скачать пример стартовой страницы на HTML5: Standard-HTML5.rar [1,08 Kb] (cкачиваний: 31)

HTML5 Основы структуры страницы — SitePoint

Ниже приводится выдержка из нашей книги «HTML5 и CSS3 для реального мира», 2-е издание, написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить его в виде электронной книги здесь.

Теперь, когда мы разбили основы нашего шаблона, давайте начнем добавлять немного мяса в кости и придать нашей странице некоторую структуру.

Позже в этой книге мы собираемся специально заняться добавлением функций CSS3 и других достоинств HTML5; сейчас мы рассмотрим, какие элементы мы хотим использовать при создании общего макета нашего сайта.Мы многое расскажем в этом разделе и в последующих главах о семантике. Когда мы используем термин «семантика», мы ссылаемся на то, как данный элемент HTML описывает значение его содержимого.

Если вы посмотрите на скриншот HTML5 Herald (или просмотрите сайт в Интернете), вы увидите, что он разделен следующим образом:

  • Раздел заголовка

    с логотипом и заголовком

  • панель навигации

  • Содержимое тела

    разделено на три столбца

  • статей и рекламных блоков в столбцах

  • Нижний колонтитул

    , содержащий информацию об авторе и авторских правах

Прежде чем мы решим, какие элементы подходят для этих различных частей нашей страницы, давайте рассмотрим некоторые из наших вариантов.Прежде всего, мы познакомим вас с некоторыми новыми семантическими элементами HTML5, которые можно использовать, чтобы помочь разделить нашу страницу и добавить больше смысла в структуру нашего документа.

Заголовок Элемент

Естественно, первый элемент, который мы рассмотрим, это заголовок , элемент . Спецификация описывает его лаконично как «группу вводных или навигационных средств».

Вопреки тому, что вы обычно предполагаете, вы можете включить новый элемент заголовка, чтобы представить каждый раздел вашего контента.Он не только зарезервирован для заголовка страницы (который обычно можно пометить с помощью

). Когда мы используем здесь слово «раздел», мы не ограничиваемся фактическим элементом раздела , описанным в следующей части; технически мы имеем в виду то, что HTML5 называет «секционированием контента». Это означает, что любой фрагмент контента может нуждаться в собственном заголовке, даже если это означает, что на одной странице имеется несколько таких блоков.

Элемент заголовка может использоваться для включения вводного содержимого или навигационных средств, которые относятся к любому отдельному разделу страницы или применяются ко всей странице, или к обоим.

Несмотря на то, что заголовок элемента часто размещается в верхней части страницы или раздела, его определение не зависит от его положения. Макет вашего сайта может потребовать, чтобы заголовок статьи или сообщения в блоге был слева, справа или даже ниже содержимого; независимо от того, что вы можете использовать заголовок для описания этого содержимого.

секция Элемент

Следующий элемент, с которым вы должны познакомиться, - это HTML5-элемент section .Спецификация определяет раздел следующим образом:

Элемент раздела представляет общий раздел документа или приложения. В этом контексте раздел представляет собой тематическую группу контента, обычно с заголовком.

Далее поясняется, что секция не должна использоваться в качестве универсального контейнера, который существует только для стилей или сценариев. Если вы не можете использовать секцию в качестве универсального контейнера — например, для достижения желаемого макета CSS — что вам следует использовать? Наш старый друг, элемент div , который семантически не имеет смысла.

Возвращаясь к определению из спецификации, содержимое элемента раздела должно быть «тематическим», поэтому было бы неправильно использовать его общим способом для обертывания несвязанных частей содержимого.

Некоторые примеры допустимого использования для элементов секции включают:

  • отдельных раздела интерфейса с вкладками

  • сегмента страницы «О нас»; например, страница «О компании» может содержать разделы об истории компании, ее миссии и ее команде

  • различных частей длинного «условия обслуживания» страница

  • различных разделов новостного интернет-сайта; например, статьи могут быть сгруппированы в разделы, посвященные спорту, мировым событиям и экономическим новостям

Примечание: правильно использовать раздел , раздел

Каждый раз, когда новая веб-разметка становится доступной для веб-дизайнеров, будут споры о том, что представляет собой правильное использование этих элементов, каковы были намерения спецификации и так далее.Возможно, вы помните дискуссии о правильном использовании элемента дл в предыдущих спецификациях HTML. Неудивительно, что HTML5 не был застрахован от этого явления, особенно когда речь идет об элементе раздела . Даже Брюс Лоусон, авторитетный специалист по HTML5, признал, что в прошлом неправильно использовал раздел , раздел . Для большей ясности стоит прочитать сообщение Брюса, объясняющее его ошибку.

Короче говоря:

  • , раздел — это универсальный , поэтому, если подходит более конкретный семантический элемент (например, , статья , , кроме или и ), используйте его вместо этого.

  • раздел имеет семантическое значение ; это подразумевает, что содержание, которое это содержит, связано некоторым образом. Если вы не можете кратко описать весь контент, который вы пытаетесь вставить в раздел , используя всего несколько слов, скорее всего вам нужен семантически нейтральный контейнер: скромный div .

Тем не менее, как всегда в случае с семантикой, в некоторых случаях она открыта для интерпретации. Если вы чувствуете, что можете объяснить, почему вы используете данный элемент, а не другой, сделайте это.В маловероятном случае, когда кто-либо когда-либо вас к вам призовет, итоговая дискуссия может быть интересной и полезной для всех участников и может даже способствовать пониманию спецификации более широким сообществом.

Помните также, что вам разрешено вложить элементы раздела в существующие элементы раздела , если это необходимо. Например, для новостного веб-сайта в Интернете раздел «Мировые новости» может быть дополнительно подразделен на раздел для каждого крупного глобального региона.

Артикул Элемент Элемент

Элемент изделия аналогичен элементу секции , но есть некоторые заметные различия. Вот определение согласно спецификации:

Элемент article представляет собой полную или самодостаточную композицию в документе, странице, приложении или сайте и, в принципе, может независимо распространяться или использоваться повторно, например, в синдикации.

Ключевыми терминами в этом определении являются автономных составов и , которые можно распространять независимо .В то время как раздел может содержать любой контент, который может быть тематически сгруппирован, статья должна представлять собой единый фрагмент контента, который может стоять сам по себе. Это различие может быть трудно обернуть, поэтому, если вы сомневаетесь, попробуйте проверить синдикацию: если часть контента может быть переиздана на другом сайте без изменения, или если он может быть выдан как обновление через RSS, или на сайтах социальных сетей, таких как Twitter или Facebook, в нем есть статья , статья .

В конечном счете, вам решать, из чего состоит статья, но вот некоторые предложения в соответствии с рекомендациями в спецификации:

Наконец, точно так же, как элементы секции , элементы статьи могут быть вложены в другие элементы статьи . Вы также можете вложить секцию внутри артикула , и наоборот. Все зависит от контента, который вы размечаете.

Нав Нав Элемент

Можно с уверенностью предположить, что элемент nav появится практически в каждом проекте. nav представляет собой именно то, что он подразумевает: группа навигационных ссылок. Хотя наиболее распространенным вариантом использования nav является упаковка неупорядоченного списка ссылок, существуют и другие варианты. Например, вы можете обернуть элемент nav вокруг абзаца текста, который содержит основные навигационные ссылки для страницы или раздела страницы.

В любом случае элемент nav должен быть зарезервирован для навигации, которая имеет первостепенное значение. Поэтому рекомендуется избегать использования, например, nav для краткого списка ссылок в нижнем колонтитуле.

Примечание: пропустить навигационные ссылки

Шаблон проектирования, который вы, возможно, видели на многих сайтах, - это ссылка «Пропустить навигацию». Идея состоит в том, чтобы позволить пользователям программ чтения с экрана быстро пропустить основную навигацию вашего сайта, если они уже слышали ее - в конце концов, нет смысла слушать все меню навигации большого сайта каждый раз, когда вы переходите на новую страницу! Элемент nav способен устранить эту необходимость; если программа чтения с экрана видит элемент nav , она может позволить пользователям пропускать навигацию без дополнительной ссылки.В спецификации говорится: «Пользовательские агенты (такие как программы чтения с экрана), предназначенные для пользователей, которые могут извлечь выгоду из-за того, что навигационная информация не указана при первоначальном рендеринге, или для кого может быть полезна немедленная доступность навигационной информации, могут использовать этот элемент как определить, какой контент на странице нужно изначально пропустить или предоставить по запросу (или обоим) ».

Хотя не все вспомогательные устройства распознают nav на момент написания этой статьи, в соответствии со стандартами теперь вы гарантируете, что с улучшением программ чтения с экрана ваша страница со временем станет более доступной.

Примечание: Агенты пользователей

Вы часто встречаете термин «пользовательский агент» при просмотре спецификаций. Действительно, это просто модный термин для браузера - программный «агент», который пользователь использует для доступа к содержимому страницы. Причина, по которой спецификации не просто говорят «браузер», заключается в том, что пользовательские агенты могут включать программы чтения с экрана или любые другие технические средства для чтения веб-страницы.

Вы можете использовать nav более одного раза на данной странице. Если у вас есть основная панель навигации для сайта, для этого потребуется элемент nav .Кроме того, если у вас есть вторичный набор ссылок, указывающих на разные части текущей страницы (с использованием привязок внутри страницы или «локальных» ссылок), это также может быть заключено в элемент nav .

Как и в разделе раздела , были некоторые споры о том, что представляет собой приемлемое использование nav и почему оно не рекомендуется в некоторых обстоятельствах (например, в нижнем колонтитуле). Некоторые разработчики считают, что этот элемент подходит для нумерации страниц или ссылок, а также для формы поиска, которая представляет собой основное средство навигации по сайту (как в случае с Google).

Это решение в конечном итоге будет зависеть от вас, разработчика. Ян Хиксон, основной редактор спецификации HTML5 WHATWG, ответил на вопрос напрямую: «используйте [это] всякий раз, когда вы использовали бы class = nav».

в стороне Элемент

Этот элемент представляет собой часть страницы, которая «косвенно связана с контентом вокруг элемента , кроме элемента , и которую можно рассматривать отдельно от этого контента».

Элемент , кроме , можно использовать для переноса части контента, касательной к:

  • - конкретная отдельная часть контента (например, , статья или , раздел ).

  • вся страница или документ, как это обычно делается при добавлении боковой панели на страницу или веб-сайт.

Элемент , кроме , никогда не должен использоваться для переноса разделов страницы, которые являются частью основного содержимого; другими словами, , за исключением , не подразумевается в скобках. , за исключением контента, может существовать сам по себе, но он все равно должен быть частью большего целого.

Некоторые возможные варианты использования , кроме , включают в себя боковую панель, вторичный список ссылок или рекламный блок.Также следует отметить, что элемент в стороне от (как в случае заголовка ) не определяется его положением на странице. Это может быть на стороне, или это может быть в другом месте. Именно сам контент и его связь с другими элементами определяют его.

Нижний колонтитул Элемент

Последний элемент, который мы обсудим в этой главе, это нижний колонтитул . Как и в случае с заголовком , на одной странице может быть несколько элементов нижнего колонтитула , и вы должны использовать нижний колонтитул вместо чего-то общего, например

.

Элемент нижнего колонтитула, согласно спецификации, представляет нижний колонтитул раздела содержимого, который является его ближайшим предком. Раздел содержимого может представлять собой весь документ или может быть разделом , разделом , , статьей или , кроме элемента .

Часто нижний колонтитул будет содержать информацию об авторских правах, списки связанных ссылок, информацию об авторах и аналогичную информацию, о которой вы обычно думаете, что она находится в конце блока контента; однако, как и , за исключением и заголовка , элемент нижнего колонтитула не определяется с точки зрения его положения на странице, поэтому он не должен появляться в конце раздела или в нижней части страницы.Скорее всего, так и будет, но это не обязательно. Например, информация об авторе сообщения в блоге может отображаться над сообщением, а не под ним, и все равно будет считаться информацией нижнего колонтитула.

Примечание: как мы сюда попали?

Если вам интересно узнать о пути к HTML5 и о том, как мы закончили с тегами, которые мы сделали, вы можете обратиться к книге Люка Стивенса под названием Правда о HTML5 . В настоящее время во втором издании книга Люка несколько противоречива.Помимо того, что он охватывает многие из технологий HTML5, таких как видео и холст, он также углубленно освещает историю HTML5, объясняет некоторые проблемы семантики и доступности, присущие новым элементам, и дает некоторые рекомендации о том, как справиться с этими проблемами.

,
Руководство по стилю HTML и соглашения по кодированию

Последовательный, чистый и аккуратный HTML-код облегчает другим чтение и понимание вашего кода.

Вот несколько рекомендаций и советов по созданию хорошего HTML-кода.


Всегда объявляйте тип документа

Всегда объявляйте тип документа в качестве первой строки в вашем документе.

Правильный тип документа для HTML:


Использовать строчные имена элементов

HTML позволяет смешивать прописные и строчные буквы в именах элементов.

Однако мы рекомендуем использовать имена элементов в нижнем регистре, потому что:

  • Смешивание прописных и строчных имен выглядит плохо
  • Разработчики обычно используют строчные имена
  • Строчные буквы выглядят чище
  • Строчные легче писать

Хорошо:


Это абзац.

Плохо:

<ТЕЛО>

Это абзац.



Закрыть все элементы HTML

В HTML нет необходимости закрывать все элементы (например, элемент

).

Однако мы настоятельно рекомендуем закрыть все элементы HTML, например:

Хорошо:


Это абзац.

Это абзац.

Плохо:


Это абзац.

Это абзац.


Использовать строчные имена атрибутов

HTML позволяет смешивать прописные и строчные буквы в именах атрибутов.

Однако мы рекомендуем использовать имена атрибутов в нижнем регистре, потому что:

  • Смешивание прописных и строчных имен выглядит плохо
  • Разработчики обычно используют строчные имена
  • Очиститель строчных букв
  • Строчные легче писать

Хорошо:

Посетите наш учебник по HTML

Плохо:

Посетите наш учебник по HTML


Всегда указывать значения атрибутов

HTML допускает значения атрибутов без кавычек.

Однако мы рекомендуем заключать в кавычки значения атрибутов, потому что:

  • Разработчики обычно указывают значения атрибута
  • цитируемые значения легче читать
  • Вы ДОЛЖНЫ использовать кавычки, если значение содержит пробелы

Хорошо:

<таблица >

Плохо:

Очень плохо:

Это не будет работать, потому что значение содержит пробелы:

<таблица классов = таблица в полоску>


Всегда указывайте альт, ширину и высоту для изображений

Всегда указывайте атрибут alt для изображений.Этот атрибут важен, если изображение по какой-то причине не может быть отображено.

Кроме того, всегда определяйте ширину , и . высота изображений. Это уменьшает мерцание, потому что браузер может зарезервировать место для изображение перед загрузкой.

Хорошо:

HTML5

Плохо:


пробелов и знаков равенства

HTML позволяет пробелы вокруг знаков равенства.Но без места легче читать и лучше объединяет группы

Хорошо:

Плохо:

<ссылка rel = "stylesheet" href = "styles.css">


Избегайте длинных строк кода

При использовании редактора HTML НЕ удобно прокручивать вправо и влево, чтобы прочитать код HTML.

Старайтесь избегать слишком длинных строк кода.


Пустые строки и отступы

Не добавляйте пустые строки, пробелы или отступы без причины.

Для удобства чтения добавьте пустые строки для разделения больших или логических блоков кода.

Для удобства чтения добавьте два пробела. Не используйте клавишу табуляции.

Хорошо:

Знаменитые города

Токио

Токио является столицей Японии, центр Большого Токио,
и наиболее густонаселенная столичная зона в мире.
Это резиденция правительства Японии и Императорского дворца,
и дом японской императорской семьи.

Плохо:

Знаменитые города

Токио


Токио является столицей Японии, центр Большого Токио,
и наиболее густонаселенная столичная зона в мире.
Это резиденция правительства Японии и Императорского дворца,
и дом японской императорской семьи.

Хороший пример таблицы:

<таблица>


<имя>


Описание

A
Описание A

B
Описание B

Пример хорошего списка

:


  • Лондон
  • Париж
  • Токио


    Никогда не пропускайте элемент </span></h3> <p> Элемент <code> <title> </code> требуется в HTML.</p> <p> Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка при перечислении страниц в результатах поиска. </p> <p> Элемент <code> <title> </code>: </p> <ul> <li> определяет заголовок на панели инструментов браузера </li> <li> предоставляет заголовок для страницы, когда она добавляется в избранное. </li> <li> отображает заголовок страницы в результатах поиска </li> </ul> <p> Итак, постарайтесь сделать название максимально точным и значимым: </p> <p> <Название> HTML Руководство по стилю и условные обозначения </ title> </p> <hr/> <h3><span class="ez-toc-section" id="i-49"> Пропускать <html> и <body>? </span></h3> <p> HTML-страница будет проверена без <code> <html> </code> и <code> <body> </code> тегов: </p> <h4><span class="ez-toc-section" id="i-50"> Пример </span></h4> <br/> <br/> Заголовок страницы <br/> <p> <div> Это заголовок </ h2> <br/> <p> Это абзац.</ p> </p> Попробуй сам " <p> Однако мы настоятельно рекомендуем всегда добавлять <code> <html> </code> и <code> <body> </code> тегов! </p> <p> Пропуск <code> <body> </code> может вызвать ошибки в старых браузерах. </p> <p> Пропускать <code> <html> </code> и <code> <body> </code> также может привести к сбою программного обеспечения DOM и XML. </p> <hr/> <h3><span class="ez-toc-section" id="i-51"> Пропустить <head>? </span></h3> <p> HTML-тег <head> также может быть опущенным. </p> <p> Браузеры добавят все элементы до <code> <body> </code>, по умолчанию <code> <head> </code> элемент.</p> <h4><span class="ez-toc-section" id="i-52"> Пример </span></h4> <br/> <br/> Заголовок страницы <br/> <p> <div> Это заголовок </ h2> <br/> <p> Это абзац. </ P> </p> <p> </ body> <br/> </ html> </p> Попробуй сам " <p> Однако мы рекомендуем использовать тэг <code> <head> </code>. </p> <hr/> <h3><span class="ez-toc-section" id="_HTML-2"> Закрыть пустые элементы HTML? </span></h3> <p> В HTML необязательно закрывать пустые элементы. </p> <h4><span class="ez-toc-section" id="i-53"> Разрешено: </span></h4> <p> <мета charset = "utf-8"> </p> <h4><span class="ez-toc-section" id="i-54"> также разрешено: </span></h4> <p> <meta charset = "utf-8" /> </p> <p> Если вы ожидаете, что программное обеспечение XML / XHTML получит доступ к вашей странице, сохраните закрывающая косая черта (/), потому что это требуется в XML и XHTML.</p> <hr/> <h3><span class="ez-toc-section" id="_lang"> Добавьте атрибут lang </span></h3> <p> Вы всегда должны включать атрибут <code> lang </code> внутри тэга <code> <html> </code>, чтобы объявить язык веб-страницы. Это должно помочь поисковым системам и браузерам. </p> <h4><span class="ez-toc-section" id="i-55"> Пример </span></h4> <br/> <br/> <br/> Заголовок страницы <br/> <p> <div> Это заголовок </ h2> <br/> <p> Это абзац. </ p> </p> <p> </ body> <br/> </ html> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-56"> метаданных </span></h3> <p> Для обеспечения правильной интерпретации и правильной индексации поисковой системы, как на языке, так и на кодировка символов <code> <meta charset = "<em> charset </em>"> </code> должна быть определена как можно раньше в документе HTML: </p> <p> <! DOCTYPE html> <br/> <html lang = "en-us"> <br/> <head> <br/> <meta charset = "UTF-8"> <br/> <title> Заголовок страницы </ title> <br/> </ head> </p> <hr/> <h3><span class="ez-toc-section" id="i-57"> Настройка области просмотра </span></h3> <p> Окно просмотра - это видимая область пользователя веб-страницы.Это зависит от устройства - на мобильном телефоне он будет меньше, чем на экране компьютера. </p> <p> Вы должны включить следующий элемент <meta> </code> <code> во все свои веб-страницы: </p> <p> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> </p> <p> Это дает браузеру инструкции о том, как контролировать размеры страницы и масштабирование. </p> <p> Ширина <code> = устройство-ширина </code> устанавливает ширину страницы, которая будет соответствовать ширине экрана устройства (которая зависит от устройства).</p> <p> Часть <code> initial-scale = 1.0 </code> устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. </p> <p> Вот пример веб-страницы <em> без </em> метатега области просмотра и той же веб-страницы <em> с </em> мета-тега области просмотра: </p> <p> <strong> Подсказка: </strong> Если вы просматриваете эту страницу с помощью телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу. </p> <br/> <hr/> <h3><span class="ez-toc-section" id="HTML-2"> HTML-комментариев </span></h3> <p> Короткие комментарии должны быть написаны в одну строку, например: </p> <p> <! - Это комментарий -> </p> <p> Комментарии, которые занимают более одной строки, должны быть записаны так: </p> <p> <! - <br/> Это длинный пример комментария.Это длинный пример комментария. <br/> Это пример длинного комментария. Это длинный пример комментария. <br/> -> </p> <p> Длинные комментарии легче наблюдать, если они имеют два пробела. </p> <hr/> <h3><span class="ez-toc-section" id="i-58"> Использование таблиц стилей </span></h3> <p> Используйте простой синтаксис для связи с таблицами стилей (<code> атрибут типа </code> не обязателен): </p> <p> <link rel = "stylesheet" href = "styles.css"> </p> <p> Короткие правила CSS могут быть написаны сжатыми, например: </p> <p> п.intro {font-family: Verdana; размер шрифта: 16em;} </p> <p> Длинные правила CSS должны быть написаны в несколько строк: </p> <p> цвет кузова {<br/>: цвет фона: светло-серый; <br/> семейство шрифтов: "Arial Black ", Helvetica, без засечек; размер шрифта <br/>: 16em; цвет <br/>: черный; <br/>} </p> <ul> <li> Поместите открывающую скобку на ту же линию, что и селектор </li> <li> Используйте один пробел перед открывающей скобкой </li> <li> Используйте два пробела отступа </li> <li> Используйте точку с запятой после каждой пары свойство-значение, включая последние </li> <li> Используйте кавычки только вокруг значений, если значение содержит пробелы </li> <li> Поместите закрывающую скобку на новую строку без пробелов </li> </ul> <hr/> <h3><span class="ez-toc-section" id="_JavaScript_HTML"> Загрузка JavaScript в HTML </span></h3> <p> Используйте простой синтаксис для загрузки внешних скриптов (<code> атрибут типа </code> не обязателен): </p> <p> <script src = "myscript.JS "> </p> <hr/> <h3><span class="ez-toc-section" id="_HTML_JavaScript"> Доступ к элементам HTML с помощью JavaScript </span></h3> <p> Использование "неопрятного" HTML-кода может привести к ошибкам JavaScript. </p> <p> Эти два оператора JavaScript будут давать разные результаты: </p> <h4><span class="ez-toc-section" id="i-59"> Пример </span></h4> getElementById ("Demo"). innerHTML = "Hello"; <p> getElementById ("demo"). InnerHTML = "Привет"; </p> Попробуй сам " <p> Посетите руководство по стилю JavaScript. </p> <hr/> <h3><span class="ez-toc-section" id="i-60"> Использовать имена файлов в нижнем регистре </span></h3> <p> Некоторые веб-серверы (Apache, Unix) чувствительны к регистру имен файлов: «london.jpg "недоступен как "London.jpg". </p> <p> Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру: доступ к «london.jpg» можно получить как "London.jpg". </p> <p> Если вы используете сочетание прописных и строчных букв, вы должны знать об этом. </p> <p> Если вы переходите с нечувствительного к регистру сервера с учетом регистра, даже небольшого ошибки сломают ваш веб! </p> <p> Чтобы избежать этих проблем, всегда используйте строчные имена файлов! </p> <hr/> <h3><span class="ez-toc-section" id="i-61"> Расширения файлов </span></h3> <p> HTML-файлы должны иметь <strong>.html </strong> или <strong> .htm </strong> расширение. </p> CSS-файлы <p> должны иметь расширение <strong> .css </strong>. </p> <p> файлы JavaScript должны иметь расширение <strong> .js </strong>. </p> <hr/> <h3><span class="ez-toc-section" id="_htm_html"> Различия между .htm и .html? </span></h3> <p> Нет разницы между расширениями .htm и .html! </p> <p> оба будут обрабатывается как HTML любым веб-браузером и веб-сервером. </p> <hr/> <h3><span class="ez-toc-section" id="i-62"> Имена файлов по умолчанию </span></h3> <p> Когда URL не указывает имя файла в конце (например, «https: // www.w3schools.com/ "), сервер просто добавляет имя файла по умолчанию, такое как «index.html», «index.htm», «default.html» или «default.htm». </p> <p> Если ваш сервер настроен только с «index.html» в качестве имени файла по умолчанию, ваш Файл должен иметь имя «index.html», а не «default.html». </p> <p> Однако серверы могут быть настроены с несколькими именами файлов по умолчанию; обычно вы можете установить столько имен файлов по умолчанию, сколько захотите. </p> <br/> ,<div> Введение в HTML5 - веб-технологии для разработчиков </h2> <p> HTML5 - это пятая версия и новейшая версия стандарта HTML. Он предлагает новые функции, которые обеспечивают не только поддержку мультимедиа, но и улучшают поддержку создания веб-приложений, которые могут взаимодействовать с пользователями, их локальными данными и серверами более легко и эффективно, чем это было возможно ранее. </p> <p> Некоторые функции HTML5 остаются неподдерживаемыми некоторыми браузерами. Однако Gecko и, как следствие, Firefox очень хорошо поддерживают HTML5, и работа по поддержке дополнительных его функций продолжается.Gecko начал поддерживать некоторые функции HTML5 в версии 1.8.1. Вы можете найти список всех функций HTML5, которые в настоящее время поддерживает Gecko, на главной странице HTML5. Подробную информацию о поддержке функций HTML5 в нескольких браузерах см. На веб-сайте CanIUse. </p> <h3><span class="ez-toc-section" id="_HTML5_HTML5"> Заявление о том, что документ содержит разметку HTML5 с типом документа HTML5 </span></h3> <p> Doctype для HTML5 очень прост. Чтобы указать, что ваш HTML-контент использует HTML5, просто используйте: </p> <pre> <! DOCTYPE html> </pre> <p> Это приведет к тому, что даже браузеры, которые в настоящее время не поддерживают HTML5, перейдут в режим стандартов, а это означает, что они будут интерпретировать давно созданные части HTML в соответствии с HTML5, игнорируя при этом новые функции HTML5, которые у них нет. т поддержки.</p> <p> Это намного проще, чем прежние типы документов, и короче, что облегчает запоминание и уменьшает количество байтов, которые должны быть загружены. </p> <p> Первое, что делается на странице, обычно указывает на используемый набор символов. В предыдущих версиях HTML это было сделано с использованием очень сложного элемента <code> <meta> </code>. Теперь это очень просто: </p> <pre> <meta charset = "UTF-8"> </pre> <p> Поместите это сразу после <code> <head> </code>, так как некоторые браузеры перезапускают разбор HTML-документа, если объявленный набор символов отличается от ожидаемого.Кроме того, если вы в настоящее время не используете UTF-8, рекомендуется переключиться на него на своих веб-страницах, поскольку это упрощает обработку символов в документах с использованием различных сценариев. </p> <p> Обратите внимание, что HTML5 ограничивает наборы символов теми, которые совместимы с ASCII и используют не менее 8 бит. Это было сделано для усиления безопасности и предотвращения некоторых типов атак. </p> <h3><span class="ez-toc-section" id="_HTML5-8"> Использование нового анализатора HTML5 </span></h3> <p> Правила синтаксического анализа HTML5, которые анализируют значение разметки, были более точно определены в HTML5.До введения HTML5 определялось только значение <em> действительной разметки </em>, а это означает, что как только в разметке была сделана одна небольшая ошибка (большинство веб-сайтов имеют по крайней мере одну), поведение было неопределенным. По сути, это означало, что все браузеры вели себя по-разному, что уже не так. Теперь, столкнувшись с ошибками в разметке, все совместимые браузеры должны вести себя одинаково. </p> <p> Это требование очень помогает веб-разработчикам. Хотя верно, что все современные браузеры теперь используют эти правила синтаксического анализа HTML5, некоторые из них не поддерживают HTML5-совместимые браузеры.Имейте в виду, что все еще настоятельно рекомендуется написать правильную разметку, так как такой код легче читать и поддерживать, и это значительно уменьшает вероятность несовместимости, которая существует в различных старых браузерах. </p> <p> Не волнуйтесь - вам не нужно ничего менять на своем сайте. Разработчики веб-браузеров сделали все для вас! </p><div> Структурирование страницы контента - Изучите веб-разработку </h2> <p> Структурирование страницы контента, готовой для ее разметки с использованием CSS, является очень важным навыком для овладения, поэтому в этой оценке вы будете проверены на свою способность думать о том, как может выглядеть страница в конечном итоге, и выбирать соответствующую структурную семантику для построить макет поверх. </p> <table class="table table-hover"> <tbody> <tr> <th scope="row"> Пререквизиты: </th> <td> Прежде чем пытаться пройти эту оценку, вы должны были пройти весь оставшийся курс, уделяя особое внимание структуре документов и веб-сайтов.</td> </tr> <tr> <th scope="row"> Цель: </th> <td> Для проверки знаний о структурах веб-страниц и о том, как представить предполагаемый дизайн макета в разметке. </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-63"> Начальная точка </span></h3> <p> Чтобы начать эту оценку, вам нужно пойти и взять zip-файл, содержащий все начальные активы. </p> <p> <br/> ZIP-файл содержит: </p> <ul> <li> HTML-код, к которому нужно добавить структурную разметку. </li> <li> CSS для стилизации вашей разметки. </li> <li> изображений, которые используются на странице.</li> </ul> <p> Создайте пример на своем локальном компьютере или используйте онлайн-инструмент, такой как CodePen, jsFiddle или Glitch, для работы над задачами. </p> <h3><span class="ez-toc-section" id="i-64"> Краткое описание проекта </span></h3> <p> В этом проекте ваша задача состоит в том, чтобы взять контент для домашней страницы веб-сайта по наблюдению за птицами и добавить к нему структурные элементы, чтобы к нему можно было применить макет страницы. Это должно иметь: </p> <ul> <li> Заголовок, охватывающий всю ширину сайта, содержащий основное название страницы, логотип сайта и меню навигации.После применения стиля заголовок и логотип появляются рядом, а под этими двумя элементами отображается навигация. </li> <li> Основная область содержимого, содержащая два столбца - основной блок с текстом приветствия и боковую панель с миниатюрами изображений. </li> <li> Нижний колонтитул, содержащий информацию об авторских правах и кредиты. </li> </ul> <p> Вам необходимо добавить подходящую обертку для: </p> <ul> <li> Заголовок </li> <li> Меню навигации </li> <li> Основное содержание </li> <li> Приветственный текст </li> <li> боковая панель изображения </li> <li> Нижний колонтитул </li> </ul> <p> Вы также должны: </p> <ul> <li> Примените предоставленный CSS к странице, добавив еще один элемент <code> <link> </code> чуть ниже существующего, предоставленного в начале.</li> </ul> <h3><span class="ez-toc-section" id="i-65"> Советы и подсказки </span></h3> <ul> <li> Используйте W3C Nu HTML Checker для обнаружения непреднамеренных ошибок в HTML, CSS и SVG - ошибок, которые вы могли бы пропустить, чтобы их можно было исправить. </li> <li> Вам не нужно знать какой-либо CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри элемента HTML. </li> <li> Предоставленный CSS разработан таким образом, чтобы при добавлении правильных структурных элементов в разметку они отображались зеленым цветом на отображаемой странице.</li> <li> Если вы застряли и не можете определить, какие элементы куда поместить, нарисуйте простую блок-схему макета страницы и напишите элементы, которые, по вашему мнению, должны обернуть каждый блок. Это очень полезно. </li> </ul> <h3><span class="ez-toc-section" id="i-66"> Пример </span></h3> <p> На следующем снимке экрана показан пример того, как может выглядеть домашняя страница после разметки. </p> <p> </p> <h3><span class="ez-toc-section" id="i-67"> Оценка или дальнейшая помощь </span></h3> <p> Если вы хотите, чтобы ваша работа была оценена, или застряли и хотите обратиться за помощью: </p> <ol> <li> Поместите свою работу в онлайн-редактор с общим доступом, такой как CodePen, jsFiddle или Glitch.</li> <li> Написать сообщение с просьбой об оценке и / или помощи на форуме по обучению MDN Discourse. Ваш пост должен включать: <ul> <li> Описательный заголовок, такой как «Требуется оценка для структурирования страницы контента». </li> <li> Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы делали, например, Если вы застряли и нуждаетесь в помощи, или хотите оценить. </li> <li> Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше).Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код. </li> <li> Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужна помощь. </li> </ul> </li> </ol> <h3><span class="ez-toc-section" id="i-68"> В этом модуле </span></h3> , </div> <div class="post-meta"> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/lamp-windows-vybiraem-wamp-platformu-dlya-razrabotki-sajtov-pod-windows-habr.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Lamp windows: Выбираем WAMP платформу для разработки сайтов под Windows / Хабр</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/dizajn/dizajn-sajta-kak-sdelat-kak-delat-dizajn-sajta-etapy-sozdaniya-dizajna-sajta-sovety-dlya-veb-dizajnera-i-veb-mastera-pri-sozdanii-dizajna.html" rel="next"><span class="meta-nav">Следующая запись</span> Дизайн сайта как сделать – Как делать дизайн сайта. Этапы создания дизайна сайта. Советы для веб-дизайнера и веб-мастера при создании дизайна.</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/struktura-html5-ispolzovanie-razdelov-i-sozdanie-struktury-html-dokumenta-veb-texnologii-dlya-razrabotchikov.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='4319' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> </div> <div class="col-md-4"> <div id="sidebar" class="sidebar"> <div id="search-9" class="widget widget_search"> <form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"> <div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span> </div> </form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div> <ul> <li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a> </li> <li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a> </li> <li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a> </li> <li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a> </li> <li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a> </li> <li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a> </li> <li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a> </li> <li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a> </li> <li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a> </li> <li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a> </li> <li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a> </li> <li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a> </li> <li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a> </li> <li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a> </li> </ul> </div><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script></div></div> </div> </div> </div><!-- END #content --> </div><!-- END .row --> </div><!-- END .container --> <footer class="mz-footer" id="footer"> <!-- footer widgets --> <div class="container footer-inner"> <div class="row row-gutter"> </div> </div> <div class="footer-wide"> </div> <div class="footer-bottom"> <div class="site-info"> © Орфографика.рф, 2010 - 2019 </div><!-- .site-info --> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф. </div> </footer> </div> <!-- back to top button --> <p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a> </p> <style type="text/css"> .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/pagination/css/nav-style.css?ver=5.9.3' type='text/css' media='all' /> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-includes/js/comment-reply.min.js?ver=5.9.3' id='comment-reply-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>