Почему использовать семантический тег HTML5 вместо div

Зачем использовать семантические теги Html5, такие как headers section nav article вместо простого div с предпочтительным css к нему. Я создал веб-страницу и использовал те теги, но они не отличаются от div. В чем их главная цель. Является ли это только для соответствующих имен тегов при его использовании или более того? Пожалуйста, объясните, что я прошел через многие сайты, но не смог найти эти основы.

Ответы

Ответ 1

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

Если вы посещаете веб-страницу, вы, как человек, можете сразу (визуально) различать все элементы страницы и, что более важно, понимать контент.

Однако машины тупые и не могут этого сделать: Представьте себе веб-гусеничный или экранный анализатор, который пытается анализировать вашу веб-страницу с помощью div повсюду. Как они узнают, какую часть документа вы намеревались стать навигацией или главной статьей или каким-то не столь важным сайдэтом? Они могут угадать, анализируя структуру вашего документа, используя некоторые общие критерии, которые являются подсказкой для определенного элемента. Например. a ul список внутренних ссылок, скорее всего, представляет собой какую-то навигацию по страницам. Однако, если вместо этого будет использоваться элемент nav, машина сразу же узнает, какова цель этого элемента.

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

// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>

Ответ 2

Там хорошая статья о семантике HTML5 на HTML5Doctor.

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

Раньше, когда <div> использовался для почти всего, мы все же использовали семантику, предоставляя ей "семантическое" имя класса или имя идентификатора.

Эти теги помогают в правильном структурировании и понимании макета.

Если вы это сделаете,

<div class="nav"></div>

в отличие от

<nav></nav>

ИЛИ

<div class="sidebar"></div>

в отличие от

<aside></aside>

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

Ответ 3

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

Семантические элементы: <header>, <footer>, <section>, <aside> и т.д.