HTML5 Учебник - Семантические тэги

Опубликовано: 08.10.2017

видео HTML5 Учебник - Семантические тэги

HTML для начинающих - #7 - Атрибуты.Часть 1

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



В HTML4 благодаря использованию CSS Вы могли создавать страницы с хорошо понятной для пользователей визуальной структурой, но были ли эти страницы также понятны для поисковых систем или браузеров?

Например, как поисковый робот может отличить содержимое документа от навигационного меню если они размечены с помощью одинаковых div элементов?


Рассказ о HTML5

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

Тэг Описание
<footer> Определяет футер.
<header> Определяет заголовочный блок сайта.
<nav> Определяет навигационное меню.

Так выглядела общая структура документа в HTML4.


HTML. Урок 17. Виды html-верстки

Так будет выглядеть общая структура документа в HTML5 с использованием новых тэгов разметки.

С помощью тэга <section> Вы можете группировать логически связанное содержимого в документе.

Если логически связанное содержимое является автономным ( может использоваться в других документах независимо от остального содержимого на странице ) необходимо использовать вместо <section> тэг <article> .

<article> <h1>Титаник</h1> <p>«Титаник» — британский пароход компании «Уайт Стар Лайн». Во время первого рейса 14 апреля 1912 года столкнулся с айсбергом и через 2 часа 40 минут затонул. На борту находилось 1316 пассажиров и 908 членов экипажа, всего 2224 человека. </p> <section> <h2>Постройка</h2> <p>Заложен 31 марта 1909 года на верфях судостроительной компании «Харланд энд Вольф» в Куинс-Айленд (Белфаст, Северная Ирландия), спущен на воду 31 мая 1911 года, прошёл ходовые испытания 2 апреля 1912 года.</p> </section> <section> <h2>Местонахождение</h2> <p>1 сентября 1985 года экспедиция под руководством директора Института океанологии города Вудс-Холл, штат Массачусетс, доктора Роберта Балларда (Robert D. Ballard) обнаружила место залегания «Титаника» на дне Атлантического океана на глубине 3750 метров.</p> </section> </article>

Обратите внимание: предположим сайт, на котором была опубликована данная статья содержит также несколько других статей. Так как текст этой статьи является автономным т.е. мы можем понять его смысл не читая остальные статьи опубликованные на этом сайте и даже без проблем опубликовать его в любом другом месте, мы выделяем статью о Титанике целиком тэгом <article>. Подразделы данной статьи, однако, не могут является автономными т.к. они логически связанны между собой и в данном случае мы уже должны использовать тэг <section>.

rss