Взгляд в правильную семантику HTML5

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

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

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

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

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

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

или теги.

Их роли понятны как для нас, так и для пользовательского агента:

<

form> просто содержит форму, так же, как содержит изображение Никто никогда не поместит стол или заголовок внутри и тег (или, по крайней мере, будем надеяться).

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

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

и теги.

Если ваш сайт когда-либо заразился ужасной болезнью divitis, ты знаешь о чем я говорю. Ага. Дивы не обязательно ошибочны, но divitis нужно бороться, если мы хотим написать поддерживаемый, модульный и содержательный HTML-код.
Smashing Magazine прекрасно объясняет в чем реальная проблема с чрезмерным и необоснованным использованием

<

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

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

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

<

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

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

Видеть этот список для всех семантических элементов текстового уровня, которые используются в настоящее время.
Структура документа в HTML5
Структура документа – это структура документа HTML. Он показывает, как элементы связаны друг с другом. Схема документа была создана исключительно путем сопоставления элементов, таких как заголовки, заголовки таблиц, заголовки форм и другие, в более ранних версиях HTML, таких как HTML4.01 и XHTML.

В HTML5 алгоритм выделения был усилен новым элементы секционированияа именно:

• для разделов, сгруппированных вокруг определенной темы

• для полных или автономных композиций, таких как запись в блоге или виджет

• для навигационных блоков

• для дополнительного контента, такого как боковые панели.

В HTML5 есть пятый элемент секционирования, но он не новый, а тег.

а также

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

1. Самым внешним элементом секционирования всегда является тег.

2. Разделы в HTML5 могут быть вложенными.

3. Каждый раздел имеет свою собственную иерархию заголовков. Каждый из них (даже самый внутренний вложенный раздел) может иметь тег h1.

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

5. Всегда первый элемент заголовка (пусть это будет h1 или тег заголовка более низкого ранга) определяет заголовок данного раздела. Следующие теги заголовков внутри одного и того же раздела должны быть относительно этого. (Если первый заголовок – это h4 внутри элемента секционирования, не ставьте h4 после этого.)

6. Разделы, определенные

и

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

1. Каждый раздел (body, section, article, aside, nav) может иметь свой собственный

а также

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

<header>
    <h1>Добро пожаловать на наш сайт!</h1>
    Вот наш логотип и слоган.</p>
</header>

<nav>
    <header>
        <h2>Выберите интерес</h2>
    </header>
    <ul>
        <li>Меню 1</li>
        <li>Меню 2</li>
        <li>Меню 3</li>
    </ul>
</nav>

<article>
    <header>
        <h1>Название статьи</h1>
        <h2>Подзаголовок статьи</h2>
    </header>

    <section>
        <h4>Первая логическая часть (например, «Теория»)</h4>
        <p>Пункт 1 в первом разделе</p>

        <h5>Некоторые другие подзаголовки в первом разделе</h5>
        <p>Пункт 2 в первом разделе</p>
    </section>

    <section>
        <h4>Вторая логическая часть (например, «Практика»)</h4>
        <p>Пункт 1 во втором разделе</p>
        <p>Пункт 2 во втором разделе</p>
    </section>

    <footer>
        <h5>Автор Био</h5>
        <p>Абзац в нижнем колонтитуле статьи</p>
    </footer>

</article>

<aside>

    <h2>Узнай нас лучше</h2>

    <section>
        <h4>популярные посты</h4>
        <ul>...</ul>
    </section>

    <section>
        <h4>партнеры</h4>
        <ul>...</ul>
    </section>

    <section>
        <h4>Отзывы</h4>
        <ul>...</ul>
    </section>

</aside>

<footer>
    <ul>
        <li>Авторские права</li>
        <li>Ссылки на социальные сети</li>
    </ul>
</footer>

Если вы посмотрите на фрагмент кода выше, вы увидите, что верхние и нижние колонтитулы являются необязательными, мы можем свободно выбирать, хотим ли мы их использовать или нет, но настоятельно рекомендуется всегда включать заголовок для каждого раздела, в противном случае раздел будет «Без названия» в структуре документа.

К счастью, в интернете есть много отличных инструментов, которые позволяют нам проверить схему документа, на этот раз мы будем использовать Структуризатор инструмент html5.org.

Если мы вставим наш фрагмент кода в форму, предоставленную планировщиком, и нажмем «Изложить это!» На кнопке мы увидим следующий результат:
Это набросок документа нашего примера кода, именно так его видят поисковые системы, и программы чтения с экрана читают его своим слабовидящим пользователям. Он семантический, хорошо структурированный, и в нем нет неприятных разделов «Без названия».

Если вы хотите посмотреть, как выглядит раздел «Без названия» в Outliner, просто удалите некоторые теги заголовков в примере кода.
Другие аспекты веб-семантики
Семантические HTML-теги и контуры документов – это лишь небольшая часть веб-семантики. Содержание веб-страницы можно сделать еще более значимым с помощью протокола доступности WAI-ARIA, и структурированные данные которые могут быть использованы вместе с RDFa протокол, микроданные или JSON-LD разметки.