Разметка html5

Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальные атрибуты.

Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:


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

Описание HTML5-элементов

  • Содержание:
  • 1. Элемент <header>
  • 2. Элемент <nav>
  • 3. Элемент <article>
  • 4. Элемент <section>
  • 5. Элемент <aside>
  • 6. Элемент <footer>
  • 7. Элемент <address>
  • 8. Элемент <main>
  • 9. Элемент <figure>
  • 10. Элемент <figcaption>
  • 11. Элемент <time>
  • 12. Элемент <mark>
  • 13. Элемент <bdi>
  • 14. Элемент <wbr>
  • 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

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

   
<header> <h1>Site description</h1> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>    

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>    

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

   
<section> <h1>Заметки о природе</h1> <article> <h2>...</h2> <p>...</p> </article> <article> <h2>...</h2> <p>...</p> </article> </section> <section> <h1>Исторические заметки</h1> <article> <h2>...</h2> <p>...</p> </article> <article> <h2>...</h2> <p>...</p> </article> </section>

5. Элемент <aside>

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

<aside>   <h2>...</h2>   <p>...</p>  </aside>    
<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

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

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.


8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <.    
oter> <a href="#basic">Разновидности</a> <a href="#app">Внешний вид</a> <a href="#temp">Характер</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small> </footer> </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>    

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>    

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

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

14. Элемент <wbr>

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

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru

HTML5 Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

Не используйте тег <section> в качестве обёртки для оформления

Одна из наиболее общих проблем, замеченных мною, — банальная замена <div>’ов на структурные элементы HTML5, особенно на <section>’ы. Т.е. когда то, что в XHTML или HTML4 выглядит так:

<!-- Код в стиле HTML 4 -->  <div id="wrapper">   <div id="header">    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </div>   <div id="main">   <!-- Контент страницы -->   </div>   <div id="secondary">   <!-- Дополнительный контент -->   </div>   <div id="footer">   <!-- Содержиме футера -->   </div>  </div>  

Переписывают так:

<!-- Не используйте этот код! Он неверен! -->  <section id="wrapper">   <header>    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </header>   <section id="main">   <!-- Контент страницы -->   </section>   <section id="secondary">   <!-- Дополнительный контент -->   </section>   <footer>   <!-- Содержимое футера -->   </footer>  </section>

Это просто неправильно: <section> не обёртка. Этот элемент означает семантический блок Вашего контента, использующийся для построения «структуры документа» (document outline), и должен содержать заголовок. Если Вам нужен элемент для обёртки, попробуйте обойтись <body> (Kroc Camen может предложить кое-что). Если это не решает проблему необходимости дополнительных обёрток, используйте старые добрые <div>’ы. С приходом HTML5 <div>’ы не умерли, и именно они отлично подходят в этом случае.

Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:

<body>   <header>    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </header>   <div role="main">   <!-- Контент страницы -->   </div>   <aside role="complementary">   <!-- Дополнительный контент -->   </aside>   <footer>   <!-- Содержимое футера -->   </footer>  </body>

Если Вы не уверены, какой элемент использовать, то я советую Вам воспользоваться нашей блок-схемой выбора элемента (прим. переводчика: см. в самом низу записи).

Используйте <header> и <hgroup> только при необходимости

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

  • Элемент <header> представляет группу вводных или навигационных средств и обычно содержит заголовок секции
  • Элемент <hgroup> группирует набор элементов <h1>-<h6>, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)
Избыток элементов <header>

Я уверен, Вы прекрасно знаете, что элемент <header> можно использовать несколько раз в документе. Поэтому часто встречается такое:

<!-- Не используйте этот код! Здесь header не нужен! -->  <article>   <header>    <h1>My best blog post</h1>   </header>   <!-- Содержимое статьи -->  </article>

Если Ваш <header> содержит только один заголовочный элемент, то он не нужен. В данном случае элемент <article> уже гарантирует, что заголовок будет включен в «структуру документа» (document outline), и раз <header> не содержит нескольких элементов (согласно определению), его можно безопасно удалить. Достаточно просто этого:

<article>    <h1>My best blog post</h1>   <!-- Содержимое статьи -->  </article>
Неправильное использование <hgroup>

И снова о заголовках: я часто вижу некорректное использование элемента <hgroup>. Не следует использовать <hgroup> вместе с <header>, если:

  • Присутствует только один заголовок
  • <hgroup> хорош сам по себе (т.е., без <header>).

Первый случай:

<!-- Не используйте этот код! Здесь hgroup не нужен -->  <header>   <hgroup>    <h1>My best blog post</h1>   </hgroup>   <p>by Rich Clark</p>  </header>

В этом случае просто уберите hgroup.

<header>   <h1>My best blog post</h1>   <p>by Rich Clark</p>  </header>

Второй случай — это еще один пример использования элемента без необходимости.

<!-- Не используйте этот код! Здесь header не нужен -->  <header>   <hgroup>    <h1>My company</h1>   <h2>Established 1893</h2>   </hgroup>  </header>

Если единственный ребёнок <header>’а это <hgroup>, зачем нужен <header>? Если у Вас нет дополнительных элементов в <header>’е (т.е. сестринских по отношению к <hgroup>), просто уберите <header>.

<hgroup>   <h1>My company</h1>   <h2>Established 1893</h2>  </hgroup>

Подробнее об элементе <hgroup> можно почитать тут.

Не обрамляйте все ссылки в <nav>

В HTML5 было введено 30 новых элементов, чтобы дать нам возможность создавать структурированную и осмысленную разметку. Но не следует злоупотреблять новыми семантическими элементами. К сожалению, это как раз то, что происходит с <nav>. Спецификация описывает <nav> так:

Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).

Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации. Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc). В этом случае одного footer’а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.

WHATWG HTML spec

Ключевая фраза — «основная навигация». Можно долго спорить о том, что понимать под основной, но для меня это:

  • Первичная навигация
  • Поиск по сайту
  • Вторичная навигация (спорно)
  • Внутристраничная навигация (внутри длинной статьи, например)

Хотя в этом случае сложно судить, что есть правильно, а что — нет, я считаю, что не стоит заключать в <nav>:

  • Переключатели страниц
  • Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
  • Теги поста
  • Категории поста
  • Третичная навигация
  • Объемные футеры

Если Вы не уверены, обрамлять ли список ссылок в <nav>, задайте себе вопрос: «Это основная навигация?». Примите во внимание следующее:

  • “Не используйте <nav>, если Вы считаете, что <section> с заголовком <hx> тоже подойдёт” — Hixie в IRC
  • Возможно стоит добавить «Перейти к» для удобства?

Если ответ на эти вопросы — «Нет», это, видимо, не место для <nav>.

Общие ошибки в использовании элемента <figure>

Ах, <figure>. Разобраться с правильным использованием этого элемента, как и его собрата <figcaption>, непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.

Не каждое изображение <figure>

Ранее, я советовал не писать больше кода, чем необходимо. Здесь похожая ситуация. Я встречал сайты, где каждая картинка была обрамлена в <figure>. Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.

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

Вышеупомянутая блок-схема выбора элемента поможет Вам справиться с <figure>.

Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно не <figure>. Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не <figure> (возможно, <aside>). Если да, спросите себя, «Могу ли я переместить это в приложение?». Если ответ на оба вопроса Да, то, возможно, <figure> подойдёт.

Ваш логотип — не <figure>

Тоже самое касается и логотипа. Часто я вижу такое применение:

<!-- Не используйте этот код! Он неверен! -->  <header>   <h1>   <figure>   <img src="/img/mylogo.png" alt="My company" class="hide" />   </figure>   My company name   </h1>  </header>
<!-- Не используйте этот код! Он неверен! -->  <header>    <figure>   <img src="/img/mylogo.png" alt="My company" />   </figure>  </header>

Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в <h1>, но мы сейчас не об этом. Настоящая ошибка — злоупотребление элементом <figure>. <figure> следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:

<header>   <h1>My company name</h1>   <!-- Еще что-нибудь -->  </header>
<figure> может быть не только изображением

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

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

Не используйте ненужный атрибут type

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

В HTML5 нет необходимости указывать атрибут type для элементов <script> и <style>. Хотя от них может быть непросто избавиться, если они автоматически добавляются Вашей CMS, нет смысла включать их в код, если Вы пишете его самостоятельно или можете управлять шаблонами. Т.к. все браузеры по-умолчанию считают, что все скрипты написаны на JavaScript, а стили — это CSS, такая разметка становится избыточной:

<!-- Не используйте этот код! Его разметка перегружена! -->  <link type="text/css" rel="stylesheet" href="css/styles.css" />  <script type="text/javascript" src="js/scripts"></script>

Вместо этого Вы можете просто написать:

<link rel="stylesheet" href="css/styles.css" />  <script src="js/scripts"></script>

Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.

Некорректное использование атрибутов форм

Вы, должно быть, уже в курсе, что в HTML5 введено множество новых атрибутов форм. Мы рассмотрим их в ближайшее время, сейчас же я коротко расскажу, как делать не стоит.

Логические атрибуты

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

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

  • autofocus
  • autocomplete
  • required

Я редко встречаю их, но в случае с required я видел такое:

<!-- Не используйте этот код! Он неверен! -->  <input type="email" name="email" required="true" />
<!-- Еще один плохой пример -->  <input type="email" name="email" required="1" />

В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?

<!-- Не используйте этот код! Он неверен! -->  <input type="email" name="email" required="false" />

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

Логическое значение возможно применить тремя способами: (Второе и третье характерны для XHTML)

  • required
  • required=""
  • required=«required=»

Применительно к нашему примеру выше, мы могли бы написать так (в HTML):

<input type="email" name="email" required />

habr.com

HTML5 | Семантическая разметка сайта

Что такое семантика в HTML

Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML – едином для всех веб-разработчиков документе. На данный момент, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи – важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы – тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика – это изучение назначения непонятных слов и понятий, то в HTML наоборот, семантика – это правильное применение и использование уже готовых и объяснённых тегов.

Семантическая вёрстка веб-документа

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

Чем отличается семантическая вёрстка от обычной
Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:
<div class=»header»>Шапка сайта</div>
<div class=»navigasia»>Главное верхнее меню сайта</div>
<div class=»sidebar»>Дополнительное боковое сайта</div>
<div class=»content»>Содержимое веб-страницы</div>
<div class=»footer»>Подвал сайта</div>
Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:
<header>Шапка сайта</header>
<nav> Главное верхнее меню сайта </nav>
<aside>Дополнительное боковое сайта</aside>
<article>Содержимое веб-страницы</article >
<footer>Подвал сайта</footer>
Как видно из примера, для обозначения и задания соответствующих стандартных элементов веб-страницы использованы соответствующие теги. Кроме этого, код гораздо проще. При этом, внешний вид такой страницы для человеческого глаза – останется абсолютно неизменным. Возникает резонный вопрос – а зачем тогда нужна семантическая вёрстка и разметка веб-страницы, если людям она не видна?

Зачем нужна семантическая вёрстка

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

Семантическая вёрстка в HTML5

Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.

В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов <i> и <b> на <em> и <strong>. HTML5 – не в пример «семантичней» и это видно из приведённого примера.

Новые популярные семантические теги HTML5

Прежде всего, <!DOCTYPE html> – простой и понятный всем доктайп.

Дальше идут теги, определяющие семантическую специализацию блоков:
(семантические теги)

<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 и XHTML

Принципиально, в совместимости HTML5 и XHTML – проблем нет никаких. Все новые браузеры прекрасно поддерживают теги HTML5 и выполняют их. Единственное огорчение ждёт любителей валидного кода. Потому что, большинство сайтов свёрстано не HTML, а в XHTML. И теперь, получается странная ситуация – доктайп от XHTML, а теги из HTML5. Валидатор «вешается и пишет красным». В настоящий момент, на такую «нестыковку» все закрыли глаза. А что делать? Ведь XHTML всегда был только производным языком от HTML.

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

Плавный переход шаблона с XHTML на HTML5

Как утверждают специалисты, HTML5 – это не одна большая вещь, это набор разных возможностей. Поэтому, начинать переходить с XHTML на HTML5 можно постепенно, по частям добавляя нужный код в свой шаблон. Валидатор XHTML ругнётся и всё вскорости образуется. Ведь всем остальным – «по барабану», теги HTML5 работают везде и вся. Для начала, можно изменить общую структуру своего шаблона, простой заменой классов CSS на семантические теги из примера «Чем отличается семантическая вёрстка от обычной».

HTML5 | Семантическая разметка сайта

(Главное – начать)
Опять-же таки, как утверждают известные специалисты – «обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> в HTML5 имеет предельно простой вид: <!DOCTYPE html>. После такого «обновления», ровным счётом ничего не произойдёт, потому что все теги, определённые в HTML4, также поддерживаются и в HTML5. Что касаемо перехода с XHTML на HTML5, то тут я не рискнул на своём сайте так резко менять <!DOCTYPE>, решился только на постепенную замену части тегов да изменение структуры страницы.

 

tehnopost.info

Теги разметки страницы в HTML 5

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

Рис. 43 Человек, который использует только тег <div>.
Рис. 43 Человек, который использует только тег <div>.

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

Тег <header>html5

Тег <header>html5 (верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов <header>html5 в одном документе.

  <header>  		<img src = "logo.png" alt = "logo"> <!-- изображение с логотипом -->  		<h1>Заголовок первого уровня</h1> <!-- заголовок первого уровня -->  </header>  
Рис. 43а Пример размещения тега <header> на странице.
Рис. 43а Пример размещения тега <header> на странице.

Обращаю Ваше внимание, что запрещается помещать элемент <header>html5 внутрь таких элементов, как <footer>html5 (нижний колонтитул), <address>html5 (определяет контактную информацию) или внутрь другого элемента <header>html5.


Тег <nav>html5

Тег <nav>html5 (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов <nav>html5, например, один для навигации по сайту, а второй для навигации по странице.

  <nav> <!-- начало навигации -->  	<ul> <!-- маркированный список -->  		<li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка -->  		<li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка -->  		<li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка -->  	</ul> <!--конец списка-->  </nav> <!-- конец навигации -->  
Рис. 43б Пример размещения тега <nav> на странице.
Рис. 43б Пример размещения тега <nav> на странице.

Обратите внимание, что не все ссылки в документе следует помещать внутрь тега <nav>html5, элемент предназначен только для крупных навигационных блоков. Не используйте элемент <nav>html5 внутри тега <footer>html5 (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.


Тег <aside>html5

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

  <article> <!-- начало статьи -->  	<p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p>  		<aside> <!-- отступление (выносим информацию, например, на поля) -->  			<p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p>  		</aside>   </article> <!-- конец статьи -->  
Рис. 43в Пример размещения тега <aside> на странице.
Рис. 43в Пример размещения тега <aside> на странице.

Тег <article>html5

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

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение). Внутри тега <article>html5 могут содержаться другие одноименные элементы с близким по смыслу содержимым.

  <article> <!-- начало основной статьи -->  	<h1>Статьи о птицах</h1><!-- заголовок первого уровня (если был использован в документе, то h2, а во вложенных h3) -->  	<p>Вводная информация о птицах...</p>  	<article> <!-- начало первой вложенной статьи -->  		<h2>Статья о воробье</h2>   		<p>Информация про воробьев...</p>  	</article> <!-- конец первой вложенной статьи -->  	<article> <!-- начало второй вложенной статьи -->  		<h2>Статья о синице</h2>  		<p>Информация про синиц...</p>  	</article><!-- конец второй вложенной статьи -->  </article> <!-- конец основной статьи -->  
Рис. 43г Пример размещения тега <article> на странице.
Рис. 43г Пример размещения тега <article> на странице.

Тег <section>html5

Тег <section>html5 (раздел) служит для группировки взаимосвязанного содержимого.

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


Данный тег часто используется при верстке целевых страниц (англ. landing page, «посадочная страница») для логического разделения страницы на разделы.


Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение).

  <section> <!-- начало первой вложенной статьи -->  	<h2>Первый раздел</h2>   	<p>Информация внутри раздела</p>  </section> <!-- конец первой вложенной статьи -->  <section> <!-- начало второй вложенной статьи -->  	<h2>Второй раздел</h2>  	<p>Информация внутри раздела</p>  </section><!-- конец второй вложенной статьи -->  
Рис. 43д Пример размещения тега <section> на странице.
Рис. 43д Пример размещения тега <section> на странице.

Совместное использование тегов <section>html5 и <article>html5

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article>html5 использовать тег <section>html5 (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article>html5 и вложенные элементы <section>html5 имели в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение внутри <article>html5).

Рис. 43е Пример размещения тега <section> внутри <article>.
Рис. 43е Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article>html5 внутрь элементов <section>html5, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

Рис. 43ж Пример размещения тега <article> внутри <section>.
Рис. 43ж Пример размещения тега <article> внутри <section>.

Допускается помещать элементы <section>html5 (раздел) в другие элементы <section>html5, но при этом рекомендуется учитывать следующую структуру документа:

  <body>  	<h1>Заголовок первого уровня</h1>  	<section>  		<h2>Заголовок второго уровня</h2>  		<section>  			<h3>Заголовок третьего уровня</h3>   		</section>  	</section>  

Тег <footer>html5

Тег <footer>html5 (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.

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

  <body>  	<h1>Важный заголовок</h1>   	<article> <!-- начало первой статьи -->  		<h2>Статья о бытие</h2>   		<p>Информация про бытие...</p>  		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->  			<address>Информация об авторе статьи</address>  		</footer>  	</article><!-- конец первой статьи -->  	<article> <!-- начало второй статьи -->  		<h2>Статья о бытие 2</h2>   		<p>Информация про бытие 2...</p>  		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->  			<address>Информация об авторе статьи</address>  		</footer>  	</article> <!-- конец второй статьи -->  	<footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта -->  		<address>Контактные данные автора сайта</address>  	</footer>  </body>  
Рис. 43з Пример размещения тега <footer> на странице.
Рис. 43з Пример размещения тега <footer> на странице.

Тег <main>html5

Тег <main>html5 предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только один раз в одном документе.

Рис. 43и Пример размещения тега <main> на странице.
Рис. 43и Пример размещения тега <main> на странице.

Обращаю Ваше внимание, что тег <main>html5 не должен быть потомком таких блоков как (не должен быть вложен в них):

  • Тег <nav>html5 (навигация).
  • Тег <header>html5 (верхний колонтитул).
  • Тег <footer>html5 (нижний колонтитул).
  • Тег <aside>html5 (отступление).
  • Тег <article>html5 (статья).

Разметка для сайта на HTML 5

Давайте закрепим полученные знания на примере, и сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML 5.

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

  <!DOCTYPE html>  <html>  	<head>  		<title>Разметка страницы</title>  	</head>  	<body>  		<header style = "background-color:khaki; height:100px">  			<p>Верхний колонтитул (тег <header>)</p>  		</header>  		<nav style = "background-color:coral; height:75px">  			<a href = "#">Ссылка 1</a> |  			<a href = "#">Ссылка 2</a> |  			<a href = "#">Ссылка 3</a> |  		<p>Панель навигации (тег <nav>)</p>  		</nav>  		<aside style = "float:right; width:200px; height:250px; background-color:tan">  			<p>Справа мы разместили тег <aside></p>  		</aside>  		<main style = "height:250px">  			<h1>Главный заголовок сайта</h1>  			<p>Основное содержимое (тег <main>)</p>  			<section style = "background-color:grey; height:75px">  				<h2>Заголовок второго уровня</h2>  				<p>Раздел 1 (тег <section>)</p>  			</section>  			<section style = "background-color:grey; height:75px">  				<h2>Заголовок второго уровня</h2>  				<p>Раздел 2 (тег <section>)</p>  			</section>  		</main>  		<footer style = "background-color:khaki; height:80px">  			<p>Нижний колонтитул (подвал) тег <footer></p>   			<address>Пример с сайта basicweb.ru</address>  		</footer>  	</body>  </html>  

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header>html5 (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav>html5 (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>html5, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
  • Добавили на страницу элемент <main>html5 в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main>html5 мы добавили два тематических раздела (тег <section>html5), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer>html5 (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Рис. 44 Разметка страницы на HTML 5

Рис. 44 Разметка страницы на HTML 5.

Разметка иллюстраций в HTML 5

Тег <figure>html5 применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure>html5 может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Благодаря тегу <figcaption>html5 вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>html5. Тег <figcaption>html5 должен размещаться как первый, или последний элемент внутри тега <figure>html5.

Давайте рассмотрим пример использования:

  <!DOCTYPE html>  <html>  	<head>  		<title>Пример использования тега <figure></title>  	</head>  	<body>  		<main>  			<figure>  				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">  				<figcaption>Ничоси 1</figcaption>  			</figure>  			<figure>  				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">  				<figcaption>Ничоси 2</figcaption>  			</figure>  		</main>  	</body>  </html>  

В этом примере основное содержимое документа поместили внутри тега <main>html5, в который мы поместили два элемента <figure>html5, каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption>html5 мы вывели текстовое пояснение к содержимому каждого элемента <figure>html5. Элемент <figcaption>html5 мы разместитили перед закрывающим тегом </figure>.

Результат нашего примера:

Рис. 45 Разметка изображений в HTML 5.
Рис. 45 Разметка изображений в HTML 5.

Обратите внимание, что если вы разместите элемент <figcaption>html5 первым вложенным элементом тега <figure>html5, то пояснение будет отображаться сверху изображения:

  <!DOCTYPE html>  <html>  	<head>  		<title>Пример использования тега <figcaption></title>  	</head>  	<body>  		<main>  			<figure>  				<figcaption>Ничоси 1</figcaption>			  				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">  			</figure>  			<figure>  				<figcaption>Ничоси 2</figcaption>  				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">  			</figure>  		</main>  	</body>  </html>  

Результат нашего примера:

Рис. 46 Пример использования тега <figcaption>.
Рис. 46 Пример использования тега <figcaption>

Скрытие содержимого в HTML 5

В заключение статьи, для расширения вашего кругозора хочу познакомить Вас с двумя последними элементами, добавленными в HTML 5. В настоящее время эти элементы поддерживаются всеми браузерами за исключением Internet Explorer и Edge.

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

Тег <summary>html5 определяет видимый заголовок для тега <details>html5. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок «Подробнее»).

Пример использования:

  <!DOCTYPE html>  <html>  	<head>  		<title>Пример использования тега <details> и <summary></title>  	</head>  	<body>  		<details>  			<summary>Показать ? </summary>  			Пожалуйста <img src = "10.jpg" alt = "ничоси" width = "80" height = "80">  			<details>  				<summary>Ещё? </summary>  				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">  			</details>  		</details>  	</body>  </html>  

В этом примере мы использовали два элемента <details>html5, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>html5.

Результат нашего примера:

Рис. 46 Использование тега <details>.
Рис. 47 Пример использование тегов <details> и <summary>.


basicweb.ru


You May Also Like

About the Author: admind

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

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

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

Adblock
detector