Семантика в HTML. Что такое семантическая вёрстка?

Семантическая вёрстка HTML
Ещё не так давно при вёрстке сайтов никто не задавался вопросом, что там внутри и уж тем более, что такое семантическая вёрстка. Верстали так, как душе угодно.

Всем привет! В данной статье познакомимся с семантикой в HTML, а именно с семантической вёрсткой веб-страниц.

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

Семантика — раздел в лингвистике, изучающий смысловое значение единиц языка.

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

Цель всех тегов в HTML это передача смысла документу. Каждый тег несёт свою смысловую нагрузку. К таким тегам относятся:

  • <article> — независимая, отделяемая смысловая единица (комментарий, статья и тд)
  • <aside> — побочный контент на странице
  • <section> — неотделяемый, смысловой раздел документа
  • <nav> — раздел навигации с ссылками на внутренние элементы страницы или на другие страницы
  • <header> — вводная часть смыслового раздела или всего сайта
  • <footer> — заключительная часть смыслового раздела или всего сайта
  • <main> — основное содержание страницы, не повторяющееся
  • <figure> и <figcaption> — добавление пояснения к изображению
  • <details> — используется для раскрытия дополнительной информации
  • <mark> — текст, выделенный в справочных целях из-за своей актуальности в определённом контексте
  • <summary> — указывает заголовок для <details>
  • <time> — используется для представления либо времени в 24-часовом формате, либо точной даты по Григорианскому календарю

Подробнее про теги

<article>

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

<aside>

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

<section>

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

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

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

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

<main>

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

<figure> и <figcaption>

В тег <figcaption> оборачивается пояснение к изображению в теге <img> и вся эта конструкция оборачивается в тег <figure>:

<figure>
    <img src="img.jpg">
    <figcaption>Рисунок 1 - Картинка</figcaption>
</figure>

<details> и <summary>

Используется для раскрытия дополнительной информации. Работает в паре с тегом <summary>, который означает заголовок для <details>:

<details>
    <summary>Доп. информация</summary>
    Очень важная информация.
</details>

<mark>

Означает текст, выделенный в справочных целях из-за своей актуальности в данном контексте.

<time>

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

Что такое семантическая вёрстка

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

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

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

  • использование на каждой странице сайта основных крупных смысловых блоков: <header>, <main> и <footer>
  • использование внутри крупных блоков смысловых разделов: <nav>, <section>, <article>, <aside>
  • использование заголовков разного уровня от <h1> до <h6> в порядке убывания и с учётом одного простого правила: <h1> — заголовок документа, может быть только один на странице, заголовки остальных уровней можно использовать сколько угодно раз
  • использование мелких элементов внутри смысловых разделов. Например: параграфы, переносы, формы, таблицы и тд.
  • использование фразовых элементов, таких как ссылки, кнопки, изображения, видео и тд.

Почему семантическая вёрстка так важна?

Использование семантической вёрстки при создании сайта бывает очень полезно как для пользователя, так и для разработчика.

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

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

Заключение

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

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

nikiteJke
Оцените автора
( Пока оценок нет )
Hack Life
Добавить комментарий