Intereting Posts
Отправить форму (jquery) и показать результаты в colorbox Динамическое скрыть и показать JQuery для выпадающего меню Прокрутка переполненных DIV с помощью JavaScript Предложения для тегов для Meteor ngOptions отображение двухуровневого объекта Почему текст с выравниванием по правому краю на моей навигационной панели сдвинут слишком далеко вправо? Поместите этот div в центр его контейнера? Отключение функции удаления хром с помощью андроида html css макет с заголовком два столбца и нижний колонтитул Python HTML sanitizer / скруббер / фильтр Outlook – электронная почта – HTML – CSS – выравнивание по правому краю содержимого HTML для создания финальной четверки турнира? Добавить функцию Whatsapp на веб-сайт, например sms, тел. icons значков вопроса, показывающие кавычки, когда есть кодировка символов UTF-8 HTML Tidy терпит неудачу в теге скрипта в строковой литературе JavaScript

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

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

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

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

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

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

 // machine: okay, this structure looks like it might be a navigation element?  // machine: ah, a navigation element!  

В HTML5Doctor есть небольшая статья о семантике HTML5.

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

Раньше, когда

использовался для почти всего, мы все же использовали семантику, предоставляя ей «семантическое» имя classа или имя идентификатора.

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

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

  

в отличие от,

  

ИЛИ

  

в отличие от,

  

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

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

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

,

,

,

и т. Д.