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

  1. Семантические и несемантические теги HTML
  2. Семантические элементы перед HTML5
  3. Несемантические элементы
  4. Семантика текста в HTML5
  5. Схема документа в HTML5
  6. Советы по семантически структурированному контенту
  7. Пример: семантическая схема
  8. Другие аспекты веб-семантики

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

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

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

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

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

Семантические и несемантические теги HTML

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

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

Семантические элементы перед HTML5

Семантические элементы существовали и до HTML5, просто в большинстве случаев разработчики не знали, что некоторые из используемых ими тегов на самом деле являются семантическими . Просто подумайте о тегах <form> </ form> или <img>.

Их роли понятны как для нас, так и для пользовательского агента: <form> просто содержит форму, как <img> содержит изображение. Никто никогда не будет размещать таблицу или заголовок внутри и тег <img> (или, по крайней мере, будем надеяться).

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

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

Несемантические элементы

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

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

Если вы тщательно спланируете структуру ваших HTML-документов, вы можете помочь компьютерам понять смысл вашего контента ИЗОБРАЖЕНИЕ: Блог Маклана Уилкинсона

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

Между ними нет никакой взаимосвязи, как в случае с тегом <span>, который работает одинаково, только на встроенном уровне.

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

Семантика текста в HTML5

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

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

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

Схема документа в HTML5

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

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

  • <section> </ section> для разделов, сгруппированных вокруг определенной темы
  • <article> </ article> для полных или автономных композиций, таких как запись в блоге или виджет
  • <nav> </ nav> для блоков навигации
  • <aside> </ aside> для дополнительного контента, такого как боковые панели .

В HTML5 есть пятый элемент секционирования, но он не новый, это тег <body> </ body>. Теги <header> </ header> и <footer> </ footer> также являются новыми, но они не генерируют новые разделы в документе, они разделяют содержимое внутри разделов. Это означает, что у каждого элемента секционирования (тело, статья, раздел, навигация и в стороне) может быть свой собственный верхний и нижний колонтитулы .

Советы по семантически структурированному контенту

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

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

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

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

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

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

6. Разделы, определенные тегами <nav> </ nav> и тегами <aside> </ aside>, не относятся к основному контуру документа HTML, обычно они изначально не отображаются вспомогательными технологиями.

7. Каждый раздел (body, section, article, aside, nav) может иметь свои собственные теги <header> </ header> и <footer> </ footer>, которые определяют заголовок (например, логотип, имя автора, даты, мета-информация и т. д.) и нижний колонтитул (авторские права, примечания, ссылки и т. д.) этого раздела.

Пример: семантическая схема

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

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

А вот код с правильным семантическим разделением:

<body> <header> <h1> Добро пожаловать на наш сайт! </ h1> <p> Вот наш логотип и слоган. </ 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> <h3> Первая логическая часть (например, «Теория») </ h3> <p> Параграф 1 в первой раздел </ p> <h4> некоторые другие подзаголовки в первом разделе </ h4> <p> пункт 2 в первом разделе </ p> </ section> <section> <h3> вторая логическая часть (например, «Практика») < / h3> <p> Параграф 1 во втором разделе </ p> <p> Параграф 2 во втором разделе </ p> </ section> <footer> <h4> Author Bio </ h4> <p> Абзац в нижнем колонтитуле статьи </ p> </ footer> </ article> <aside> <h2> Узнай нас лучше </ h2> <section> <h3> Популярные сообщения </ h3> <ul> ... </ ul> < / section> <section> <h3> Партнеры </ h3> <ul> ... </ ul> </ section> <section> <h3> Отзывы </ h3> <ul> ... </ ul> < / section> </ aside> <footer> <ul> <li> Авторские права </ li> <li> Ссылки в социальных сетях </ li> </ ul> </ footer> </ Body>

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

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

Если мы вставим наш фрагмент кода в форму, предоставленную планировщиком, и нажмем кнопку «Outline this!», Мы увидим следующий результат:

», Мы увидим следующий результат:

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

Если вы хотите посмотреть, как выглядит раздел «Без названия» в Outliner, просто удалите некоторые теги заголовков в примере кода.

Другие аспекты веб-семантики

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