Html5 структура страницы


Структура документа в HTML 4

Структура документа, т. е. семантическая структура контента, заключенного в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом (<div>) с включенными в него элементами заголовка (<h1>, <h2>, <h3>, <h4>, <h5> или <h6>), содержащими его название. Структура документа определяется отношениями между этими элементами.

Так, следующая разметка:

обеспечивает следующую структуру:

1. Лесные слоны  1.1 Среда обитания 

Для задания нового раздела не обязательно использовать элементы <div>. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

<h1>Лесные слоны</h1>  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.  ...продолжение данного раздела...  <h2>Среда обитания</h2>  <p>Лесные слоны живут не на деревьях, а под ними.   ...продолжение данного подраздела...  <h2>Рацион</h2> <h1>Монгольская песчанка</h1> 

обеспечивает следующую структуру:

1. Лесные слоны  1.1 Среда обитания    1.2 Рацион 2. Монгольская песчанка 

Какие проблемы решает HTML5

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

  1. Использование <div> для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный <div> частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управленя стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы <div> в алгоритме построения структуры благодаря добавлению нового элемента <section>.

  2. Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов (<article>, <section>, <nav> и <aside>), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент <aside>, позволяющий исключить такие разделы из основной структуры.
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: <nav> для наборов ссылок, например, оглавления, <footer> и <header> для информации, касающейся всего сайта. Обратите внимание, что <header> и <footer> не создают разделы как <section>, а, скорее, обеспечивают семантическую разметку частей раздела.

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

Алгоритм создания структуры HTML5

Задание разделов в HTML5

Весь контент, находящийся внутри <body>, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом <body>, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов <body><section><article><aside> и <nav>

Например:

<section>   <h1>Лесные слоны</h1>    <section>     <h1>Введение</h1>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>   </section>   <section>     <h1>Среда обитания</h1>     <p>Лесные слоны живут не на деревьях, а под ними.</p>   </section>   <aside>     <p>рекламный блок</p>   </aside> </section> <footer>   <p>(c) 2010 The Example company</p> </footer>

Данный фрагмент HTML задает раздел верхнего уровня:


<section>   <h1>Лесные слоны</h1>      <section>          <h1>Введение</h1>          <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>   </section>      <section>          <h1>Среда обитания</h1>     <p>Лесные слоны живут не на деревьях, а под ними.</p>   </section>   <aside>    <p>рекламный блок</p>   </aside> </section> <footer>   <p>(c) 2010 The Example company</p> </footer>

Данный раздел имеет три подраздела:

<section>   <h1>Лесные слоны</h1>    <section>         <h1>Введение</h1>         <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>   </section>   <section>         <h1>Среда обитания</h1>    <p>Лесные слоны живут не на деревьях, а под ними.</p>   </section>   <aside>    <p>рекламный блок</p>   </aside> </section>  <footer>  <p>(c) 2010 The Example company</p> </footer>

В результате получаем следующую структуру:

1. Лесные слоны    1.1 Введение    1.2 Среда обитания 

Задание заголовков в HTML5

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть <h1>


, <h2>, <h3>, <h4>, <h5>, <h6>) задает заголовок текущего раздела.

Элемент заголовка имеет определенную степень важности, определяемую цифрой в его названии, таким образом, <h1> имеет максимальную степень важности, а <h6> минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

<section>   <h1>Лесные слоны</h1>       <p>В данном разделе мы поговорим о малоизвестных лесных слонах.      ...продолжение данного раздела...   <section>     <h2>Среда обитания</h2>       <p>Лесные слоны живут не на деревьях, а под ними.         ...продолжение данного подраздела...   </section> </section> <section>   <h3>Монгольская песчанка</h3>   <p>В данном разделе мы расскажем о монгольской песчанке.       ...продолжение данного раздела... </section>

приводит к следующей структуре:

1. Лесные слоны  1.1 Среда обитания 2. Монгольская песчанка

Обратите внимание, что степень важности элемента заголовка (в данном примере <h1>


для первого раздела верхнего уровня, <h2> для подраздела <h3> для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

Неявное задание разделов

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

Элементы заголовков (<h1><h6>) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел распологается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

<section>   <h1>Лесные слоны</h1>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах.     ...продолжение данного раздела...   <h3 class="implicit subsection">Среда обитания</h3>   <p>Лесные слоны живут не на деревьях, а под ними.     ...продолжение данного подраздела... </section>

приводит к следующей структуре:


1. Лесные слоны  1.1 Среда обитания (неявно задано элементом h3) 

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

<section>   <h1>Лесные слоны</h1>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах.     ...продолжение данного раздела...   <h1 class="implicit section">Монгольская песчанка</h1>   <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.     ...продолжение данного раздела... </section>

приводит к следующей структуре:

1. Лесные слоны 2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел) 

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

<body>   <h1>Млекопитающие</h1>   <h2>Киты</h2>   <p>В данном разделе мы поговорим о китах.     ...продолжение данного раздела...   <section>     <h3>Лесные слоны</h3>       <p>В данном разделе мы поговорим о малоизвестных лесных слонах.     ...продолжение данного раздела...     <h3>Монгольская песчанка</h3>       <p>Песчанки распространились далеко за пределы Монголии.          ...продолжение данного подраздела...     <h2>Рептилии</h2>       <p>Рептилии – это холоднокровные животные.           ...продолжение данного раздела...   </section> </body>

приводит к следующей структуре:


1. Млекопитающие  1.1 Киты (неявно задается элементом h2)  1.2 Лесные слоны (явным образом задается элементом раздела)  1.3 Монгольская песчанка (неявно задается элементом h3, который одновременно закрывает предыдущий раздел) 2. Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел) 

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

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с <h1>


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

Корни задания разделов

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо <body>, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: <blockquote>, <details>, <fieldset>, <figure> и <td>.

Например:

<section>   <h1>Лесные слоны</h1>    <section>     <h2>Введение</h2>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>   </section>   <section>     <h2>Среда обитания</h2>     <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «<cite>Лесной слон на Борнео</cite>»:</p>     <blockquote>        <h1>Борнео</h1>        <p>Лесной слон живет на Борнео...</p>     </blockquote>   </section> </section> 

Данный пример приводит к следующей структуре:

1. Лесные слоны  1.1 Введение    1.2 Среда обитания

Данная структура не включает внутреннюю структуру элемента <blockquote>


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

Разделы, не входящие в структуру

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

  1. Элемент вспомогательного раздела <aside> задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
  2. Элемент навигационного раздела <nav> задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.

Шапки и подвалы

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

  1. Элемент шапки <header> задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).<article>, <section>, <aside>, и <nav> могут иметь собственный <header>. Несмотря на название, этот элемент не обязательно распологается в начале страницы или раздела.
  2. Элемент подвала (<footer>) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. <article>, <section>, <aside> и <nav> могут иметь собственный <footer>. Несмотря на название, этот элемент не обязательно распологается в конце страницы или раздела.

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

Адреса в элементах задания разделов

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента <address>, расширенного в HTML5.

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент <article>. В результате элемент <address> теперь связан с ближайшим родительским <body> или <article>.

Использование элементов HTML5 в браузерах, не поддерживающих Non-HTML5

Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline:

section, article, aside, footer, header, nav, hgroup {   display:block; } 

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

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

<!--[if lt IE 9]>   <script>     document.createElement("header" );     document.createElement("footer" );     document.createElement("section");      document.createElement("aside"  );     document.createElement("nav"    );     document.createElement("article");      document.createElement("hgroup" );      document.createElement("time"   );   </script> <![endif]-->

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержа скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент <noscript>:

<noscript>    <strong>Внимание!</strong>    Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.    Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу. </noscript>

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

<!--[if lt IE 9]>   <script>     document.createElement("header" );     document.createElement("footer" );     document.createElement("section");      document.createElement("aside"  );     document.createElement("nav"    );     document.createElement("article");      document.createElement("hgroup" );      document.createElement("time"   );   </script>   <noscript>      <strong>Внимание!</strong>      Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.      Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.   </noscript> <![endif]-->

Заключение

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

developer.mozilla.org

Структура страницы наглядно

В такой статье просто не обойтись без картинки, а именно изображения этой самой структуры, поэтому я быстро нарисовал в paint простой вариант верстки на html5. Схема кривая, прошу простить, талантом рисовальщика обделен:структура страницы html5

Как видите, здесь новые теги, которых небыло в html4. И это:

  1. header — первый новый семантический тег, который используется для обозначения шапки как у сайта в целом, так и у каких-то конкретных секций. Своя шапка может быть в статье, в новости, в карточке товара и т.д. Поэтому не удивляйтесь, если видите несколько header-ов на странице.
  2. nav — контейнер для важных навигационных ссылок на сайте. Иными словами, в него помещают главное меню, а также дополнительные меню, если они есть на сайте.
  3. article — тег для основного текста на странице. Это может быть статья, новость, описание товара, заметка в блог, анонс статьи и т.д.
  4. aside — спорный тег. Многие говорят, что его нужно использовать для вывода сайдбара или боковой колонки, другие говорят, что в него помещается информация в статье, которая не имеет прямого отношения к основному содержимому. Мне более логичным видится вывод боковой колонки через этот тег.
  5. footer — подвал сайта, хотя, как и header, может быть подвалом статьи, новости и т.д.

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

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

Так ли важна идеальная разметка?

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

Но не нужно думать, что если заключить article в section или в nav занести не самые приоритетные ссылки, то вы потеряете много поискового трафика. Я уверен, что минимально все это влияет на оптимизацию и качество сайта, но не более того. Да и к тому же, кто сказал, что статья не может располагаться в секции?

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

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

dolinacoda.ru

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

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

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

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

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

Все это порождает непростой вопрос: если HTML5 — живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode). В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode), который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

Кодировка — это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент <meta> в самом начале блока <head> (или, если элемент <head> не используется, сразу же после кода описания типа документа):

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

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

Чтобы указать язык для какого-либо содержимого, используется атрибут lang в любом элементе разметки с заданием кода требуемого языка. Код для русского языка — ru, а для английского — en. Коды для других языков можно узнать на странице people.w3.org/rishida/utils/subtags.

Вставить в веб-страницу информацию о языке легче всего через элемент <html>:

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

Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент <link> в блоке <head> документа HTML5:

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей — CSS, то в добавлении атрибута type=»text/css», который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:

Атрибут language=»JavaScript» не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript — единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге </script>. Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web — метка особенности сети) в блок <head> сразу же после строки кодировки. Делается это таким образом:

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку «Разрешить заблокированное содержимое».

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

professorweb.ru

Структура сайта на html 5

Сначала была верстка табличная, на смену ей пришла верстка блочная, с помощью тегов <div></div>. Подавляющее большинство сайтов содержали в себе похожие блоки <div> с id=»wrapper», id=»header»; id=»content», id=»sidebar», id=»nav», id=»footer» и другие, что послужило катализатором того, что в html 5 появились новые блочные теги, такие как: <header>, <nav>, <aside>, <footer>, <section> и другие.

 

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

Html5 структура страницы

Для верхней части сайта теперь можно использовать тег <header></header>, который может содержать логотип, контакты, баннер, второстепенное меню и т. д.

Основная навигация сайта обрамляется в тег <nav></nav>.

Главная часть сайта – это основной контент, помещается в тег <main>, данный тег еще не совсем корректно работает во всех браузерах, поэтому ему желательно указывать атрибут role=»main». Этот тег можно применить всего один раз на странице, и он не может быть дочерним элементом остальных тегов.

Главную часть сайта можно поделить на отдельные секции, с помощью тега <section></section>. Этот тег может содержать в себе любую информацию, текст, картинки, аудио и видео.

Отдельные статьи необходимо оборачивать в тег <article</article>.

Не обошли стороной и сайдбар. Для него был придуман тег <aside></aside>. Сайдбар не является частью главного контента, поэтому помещать его в тег <main></main> не стоит. Но внутри сайдбара, можно успешно использовать теги <section></section> вместо стандартных <div></div>.

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

Очень полезный тег, который может оказать влияние на SEO продвижения сайта, это тег <mark></mark>. Его действие аналогично тегу <strong></strong> и предназначен он больше для поисковых роботов, чем для человека.

Также с выходом html 5 появилась возможность группировать элементы страницы тегами <figure></figure >, а к сгруппированным элементам можно указать подпись тегом <figcaption></figcaption>.

В html 5 появилась возможность обернуть текст (цитату) в тег <blockquote cite=»Откуда взят текст или цитата»></blockquote> и указать источник этого текста, что поисковые роботы оценят.

Для оформления интерактивных элементов (кнопки с какими-либо функциями) появился тег <menu></menu>. Не стоит применять данный тег для создания меню, его назначение немного другое. Он скорее предназначен для создания веб — приложений.

Как же будет выглядеть минимальная структура документа, с использованием новых тегов html 5:

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

Html5 структура страницы

variatech.ru

Уровень поддержки HTML5-структуры пользовательскими агентами

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

Поддержка HTML5 структуры пользовательскими агентами

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

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

Фрагмент спецификации, содержащий сведения о поддержки HTML 5 структуры пользовательскими агентами

Основное содержимое вышеприведённого абзаца заключается в том, что они призывают авторов не полагаться полностью на структуру документа, описанной в этой спецификации, по крайне мере до тех пор, пока новая структура не получит широкую поддержку. Стандарт рекомендует авторам, как и прежде, создавать структуру веб-страниц с помощью элементов h1, h2, h3, h4, h5 и h6 или такую, которая была бы обратно совместимой с заголовочной.

Несмотря на расплывчатую поддержку HTML5 структуры документа пользовательскими агентами, авторам всё равно стоит задуматься о её внедрении. Это позволит сделать документ структурированным, семантическим и логичным с точки зрения HTML5.

Создание HTML5-структуры обратно совместимой с заголовочной (HTML4)

До тех пор пока HTML 5 структура документа, не будет однозначно пониматься пользовательскими агентами, её создание будет обусловлено необходимостью использования обратной совместимости с HTML4. Таким образом, при создании структуры документа авторам следует учитывать то, что она должна быть правильной как в отношении HTML4, так и в отношении HTML5.

Создавать такую структуру не так уж сложно как это может показаться на первый взгляд. Для этого авторам всего лишь необходимо использовать внутри секционных элементов заголовки соответствующего ранга. Определяется ранг по уровню вложенности секционного элемента. Корневой секционный элемент имеет 1 ранг. Секции, которые расположены непосредственно в нём, имеют 2 ранг. Секции, которые расположены внутри секций второго ранга, соответственно имеют 3 ранг и т.д.

Создание HTML5-структуры обратно совместимой с заголовочной

  <body>   <!-- Заголовок секции документа (1 уровень) -->   <h1>Заголовок документа</h1>   <!-- Секция nav, вложенная в секцию документа (2 уровень) -->   <nav>   <h2>Навигация</h2>   ...   </nav>   <!-- Секция article, вложенная в секцию документа (2 уровень) -->   <article>   <h2>Заголовок секции article</h2>   ...   <!-- Секция section, вложенная в секцию article 2 уровня -->   <section>   <h3>Заголовок секции section</h3>   ...   </section>   <!-- Секция aside, вложенная в секцию article 2 уровня -->   <aside>   <h3>Заголовок секции aside</h3>   ...   <!-- Секция section, вложенная в секцию aside 3 уровня -->   <section>   <h4>Заголовок секции section</h4>   ...   </section>   </aside>   ...   </article>   ...  </body>  

Вышеприведенный пример будет иметь следующую структуру (outline):

  В HTML5:  [document] Заголовок документа   [nav] Навигация   [article] Заголовок секции article   [section] Заголовок секции section   [aside] Заголовок сеции aside   [section] Заголовок секции section  В HTML4:  [h1] Заголовок документа   [h2] Навигация   [h2] Заголовок секции article   [h3] Заголовок секции section   [h3] Заголовок сеции aside   [h4] Заголовок секции section  

Рассмотрение процесса проектирования структуры документа на реальном примере

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

Начнём процесс проектирования с рассмотрения основных групп контента, из которых состоит данная страница.

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

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

Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) и оптимизированной под поисковые системы выполним поэтапно.

На 1 этапе разработаем HTML5-структуру страницы, не обращая внимание на то, как она будет выглядеть с точки зрения HTML4 (заголовочной структуры).

Для этого воспользуется элементами article, section, nav и aside из категории sectioning, и элементом h1 из группы heading.

Создание HTML5 структуры документа. Этап первый

  <!-- Секция document (документа) -->  <body>   <h1>Название сайта</h1>   <!-- Секция nav (навигация) -->   <nav>   <h1>Навигация по сайту</h1>   </nav>   <!-- Секция article (статьи) -->;   <article>   <h1>Название статьи</h1>   <section>   <h1>1 раздел статьи</h1>   ...   <section>   <h1>1 подраздел 1 раздела</h1>   ...   </section>   </section>   <section>   <h1>2 раздел статьи</h1>   ...   <section>   <h1>1 подраздел 2 раздела</h1>   ...   </section>   <section>   <h1>1 подраздел 2 раздела</h1>   ...   </section>   </section>   <section>   <h1>3 раздел статьи</h1>   ...   </section>   <section>   <h1>Комментарии к статье</h1>   ...   </section>   </article>   <!-- Секция aside (содержимое, косвенно связанное с остальным содержимым страницы) -->   <aside>   <h1>Дополнительные разделы</h1>   <section>   <h1>Поиск</h1>   ...   </section>   <section>   <h1>Облако тегов</h1>   ...   </section>   <section>   <h1>Комментарии</h1>   ...   </section>   <section>   <h1>Статьи</h1>   ...   </section>   <section>   <h1>Голосование</h1>   ...   </section>   <section>   <h1>О блоге</h1>   ...   </section>   </aside>  </body>  
  HTML5 структура страницы:  [document] Название сайта   [nav] Навигация по сайту   [article] Название статьи   [section] 1 раздел статьи   [section] 1 подраздел 1 раздела   [section] 2 раздел статьи   [section] 1 подраздел 2 раздела   [section] 2 подраздел 2 раздела   [section] 3 раздел статьи   [section] Комментарии к статье   [aside] Дополнительные разделы   [section] Поиск   [section] Облако тегов   [section] Комментарии   [section] Статьи   [section] Голосование   [section] О блоге    HTML4 структура страницы:  [h1] Название сайта  [h1] Навигация по сайту  [h1] Название статьи  [h1] 1 раздел статьи  [h1] 1 подраздел 1 раздела  [h1] 2 раздел статьи  [h1] 1 подраздел 2 раздела  [h1] 2 подраздел 2 раздела  [h1] 3 раздел статьи  [h1] Комментарии к статье  [h1] Дополнительные разделы  [h1] Поиск  [h1] Облако тегов  [h1] Комментарии  [h1] Статьи  [h1] Голосование  [h1] О блоге  

На 2 этапе доработаем структуру, полученную на 1 этапе, таким образом, чтобы она была обратно совместимой с заголовочной.

Создание HTML5 структуры документа. Этап второй

  <!-- Секция document (документа) -->  <body>   <h1>Название сайта</h1>   <!-- Секция nav (навигация) -->   <nav>   <h2>Навигация по сайту</h2>   </nav>   <!-- Секция article (статьи) -->;   <article>   <h2>Название статьи</h2>   <section>   <h3>1 раздел статьи</h3>   ...   <section>   <h4>1 подраздел 1 раздела</h4>   ...   </section>   </section>   <section>   <h3>2 раздел статьи</h3>   ...   <section>   <h4>1 подраздел 2 раздела</h4>   ...   </section>   <section>   <h4>1 подраздел 2 раздела</h4>   ...   </section>   </section>   <section>   <h3>3 раздел статьи</h3>   ...   </section>   <section>   <h3>Комментарии к статье</h3>   ...   </section>   </article>   <!-- Секция aside (содержимое, косвенно связанное с остальным содержимым страницы) -->   <aside>   <h2>Дополнительные разделы</h2>   <section>   <h3>Поиск</h3>   ...   </section>   <section>   <h3>Облако тегов</h3>   ...   </section>   <section>   <h3>Комментарии</h3>   ...   </section>   <section>   <h3>Статьи</h3>   ...   </section>   <section>   <h3>Голосование</h3>   ...   </section>   <section>   <h3>О блоге</h3>   ...   </section>   </aside>  </body>  
  HTML5 структура страницы:  [document] Название сайта   [nav] Навигация по сайту   [article] Название статьи   [section] 1 раздел статьи   [section] 1 подраздел 1 раздела   [section] 2 раздел статьи   [section] 1 подраздел 2 раздела   [section] 2 подраздел 2 раздела   [section] 3 раздел статьи   [section] Комментарии к статье   [aside] Дополнительные разделы   [section] Поиск   [section] Облако тегов   [section] Комментарии   [section] Статьи   [section] Голосование   [section] О блоге    HTML4 структура страницы:  [h1] Название сайта   [h2] Навигация по сайту   [h2] Название статьи   [h3] 1 раздел статьи   [h4] 1 подраздел 1 раздела   [h3] 2 раздел статьи   [h4] 1 подраздел 2 раздела   [h4] 2 подраздел 2 раздела   [h3] 3 раздел статьи   [h3] Комментарии к статье   [h2] Дополнительные разделы   [h3] Поиск   [h3] Облако тегов   [h3] Комментарии   [h3] Статьи   [h3] Голосование   [h3] О блоге  

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

Создание HTML5 структуры документа. Этап третий

  <body>   ...   <h1>Название статьи</h1>   <section>   <h2>1 раздел статьи</h2>   ...   <section>   <h3>1 подраздел 1 раздела</h3>   ...   </section>   </section>   <section>   <h2>2 раздел статьи</h2>   ...   <section>   <h3>1 подраздел 2 раздела</h3>   ...   </section>   <section>   <h3>1 подраздел 2 раздела</h3>   ...   </section>   </section>   <section>   <h2>3 раздел статьи</h2>   ...   </section>   <section>   <h3>Комментарии к статье</h3>   ...   </section>   <aside>   <h4>Дополнительные разделы</h4>   <section>   <h5>Поиск</h5>   ...   </section>   <section>   <h5>Облако тегов</h5>   ...   </section>   <section>   <h5>Комментарии</h5>   ...   </section>   <section>   <h5>Статьи</h5>   ...   </section>   <section>   <h5>Голосование</h5>   ...   </section>   <section>   <h5>О блоге</h5>   ...   </section>   </aside>  </body>  
  HTML5 структура страницы:  [document] Название статьи   [section] 1 раздел статьи   [section] 1 подраздел 1 раздела   [section] 2 раздел статьи   [section] 1 подраздел 2 раздела   [section] 2 подраздел 2 раздела   [section] 3 раздел статьи   [section] Комментарии к статье  [aside] Дополнительные разделы   [section] Поиск   [section] Облако тегов   [section] Комментарии   [section] Статьи   [section] Голосование   [section] О блоге    HTML4 структура страницы:  [h1] Название статьи   [h2] 1 раздел статьи   [h3] 1 подраздел 1 раздела   [h2] 2 раздел статьи   [h3] 1 подраздел 2 раздела   [h3] 2 подраздел 2 раздела   [h2] 3 раздел статьи   [h3] Комментарии к статье   [h4] Дополнительные разделы   [h5] Поиск   [h5] Облако тегов   [h5] Комментарии   [h5] Статьи   [h5] Голосование   [h5] О блоге  

Инструменты для проверки HTML-структуры документа

Проверить разработанную структуру документа можно с помощью следующих инструментов:

  • расширения «HTML5 Outliner» для браузера Google Chrome;
  • онлайн инструмента HTML5 Outliner;
  • сервиса проверки разметки W3C, доступного по адресу https://validator.w3.org/;
  • расширения headingsMap 2.1 для браузера Mozilla Firefox.

Проверка структуры документа с помощью сервиса W3C

Сервис W3C предназначен в первую очередь для проверки соответствия кода HTML-документа выбранной спецификации (HTML 4.01, HTML5 и др.). Кроме этого он также позволяет также проверить структуру документа, если будет включена соответствующая опция.

>Проверка структуры документа с помощью сервиса W3C» title=»>Проверка структуры документа с помощью сервиса W3C»></p>
<h3 class=Проверка структуры документа с помощью HeadingsMap

Расширение HeadingsMap для браузера Mozilla Firefox — это очень удобный инструмент, который позволяет проверить структуру документа в соответствии со спецификацией HTML5 и HTML4.

Проверка структуры документа с помощью HeadingsMap

Заключение

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

itchief.ru

Семантическая структура для HTML5 страницы

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

 

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Заголовок страницы</title>     <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">     <meta name="description" content="Описание контента страницы, 1-2 предложения."> </head> <body>

Я добавил тег <meta name="keywords" content=""> который отвечает за ключевые слова. И тег <meta name="description" content=""> который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега <title>. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.

 

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

<!-- Header страницы -->     <header>             <h1>Site title</h1>     </header>

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

<!-- Header страницы -->     <header>             <h1>Site title</h1>             <p>site slogan</p>     </header>

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

 

Навигация на странице

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

<!-- Главная Навигация по сайту -->     <nav>         <ul>             <li><a href="#">Home</a></li>             <li><a href="#">Portfolio</a></li>             <li><a href="#">Gallery</a></li>             <li><a href="#">Contacts</a></li>         </ul>     </nav>

 

Контент на странице

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

<!-- Основное содержимое страниц --> <main>          ...основной контент страницы...  </main>

 

Оформление статьи

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

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55". Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

<main> ... <!-- Статья -->     <article>          <!-- Шапка статьи если в шапке у нас больше чем заголовок -->         <header>                      <!-- Заголовок статьи -->             <h1>Article title</h1>                          <!-- Дата публикации статьи  -->             <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>                      </header>          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>          <!-- Подзаголовок страницы -->         <h2>Article sub-title</h2>          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>                  <footer>             <a href="#">Читать далее</a>             <a href="#">Комментарии</a>         </footer>      </article> ... </main>

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

 

Сайдбар или колонка с виджетами

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

<!-- Сайдбар --> <div class="sidebar">          <!-- Виджет в сайдбаре -->         <aside>             <h1>Widget title</h1>             ...         </aside>          <!-- Виджет в сайдбаре -->         <aside>             <h1>Последние записи</h1>             ...         </aside>           <!-- Виджет в сайдбаре -->         <aside>             <h1>Популярные комментарии</h1>             ...         </aside>          </div>

 

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section>. Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section, наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section, но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

<h1>An Event Apart</h1>  <section>      <header>         <h2>Cities</h2>     </header>     <p>Join us in these cities in 2010.</p>       <section>         <header>             <h3>Seattle</h3>         </header>         <p>Follow the yellow brick road.</p>     </section>      <section>         <header>             <h3>Boston</h3>         </header>         <p>That's Beantown to its friends.</p>     </section>      <section>         <header>             <h3>Minneapolis</h3>         </header>         <p>It's so <em>nice</em>.</p>     </section>  </section>  <small>Accommodation not provided.</small>

 

Подвал сайта — Footer

Подвал сайта оформляется тегом <footer>

<!-- Подвал сайта --> <footer>         <p class="copyright">© 2015 Rightblog.ru Copyright</p> </footer>

 

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

 

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

 

Статьи и материалы по теме:
http://html5forwebdesigners.com/semantics/
http://habrahabr.ru/post/214407/
http://www.adobe.com/devnet/archive/dreamweaver/articles/understanding-html5-semantics.html
http://www.smashingmagazine.com/2011/11/html5-semantics/
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
http://www.w3schools.com/html/html5_semantic_elements.asp

rightblog.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.