Семантика HTML
Тэги, кроме служебных, можно условно разделить на два вида: строчные и блочные.
Строчные тэги не создают перенос строки. Ты уже знаешь их: A, B, I. Обычно это тэги оформления текста.
Блочные тэги, наоборот, создают перенос строки — ты уже знаешь про P. Они используются для того, чтобы логически разметить документ.
Тут нужно отметить, что на самом деле html-вёрстка позволяет менять поведение тэгов. Можно спокойно сделать абзацы так, чтобы они не создавали перенос, а все B будут его делать. Вот чтобы такого «безобразия» не творить, считается, что html-тэги обладают определённой семантикой. Это позволяет понять назначение текста, не зависимо от его оформления.
Например есть тэги заголовков: H1, H2..H6. Первый уровень (1) считается самым значимым, поэтому браузер будет его отображать более крупно. Другие уровни будут считаться подзаголовками и будут выглядеть менее крупными.
Когда страницу будет индексировать поисковик, то он поймёт, что у текста есть заголовок, подзаголовок и абзацы текста. Соответственно ранжирование страницы будет более адекватным. Если не использовать семантику, то поисковику будет достаточно сложно понять, где название, а где основной текст.
Поэтому современная вёрстка — семантична. То есть не просто так расставляем тэги, а делаем это с умом, учитывая их семантику.
Заголовки
В простом случае заголовки могут быть шести уровней от H1 до H6. Общий смысл в том, что чем важнее заголовок, тем крупнее он отображается. Поэтому H1 — это название текста, H2 подзаголовки, а остальные по ситуации внутри текста.
<h1>Заголовок</h1> <p>анонс</p> <h2>Подзаголовок</h2> <p>текст</p> <h2>Подзаголовок</h2> <p>текст</p>
Заголовков на странице может быть сколько угодно и они могут быть любого уровня. Если заголовок предполагается составной, то такие заголовки можно объединить в тэг HEADER.
<header> <h1>Заголовок</h1> <p>Описание</p> <div>Дата публикации: <time>2021/01/21</time></div> </header>
Такой блок HEADER можно рассматривать как единый заголовок, даже если будет содержать другие заголовки, абзацы, блоки и т.д.
Распространённая ошибка — считать HEADER «шапкой» сайта. Так делать не нужно. HEADER по смыслу похож на обычные H1 .. H6 и должен иметь непосредственное отношение к тексту.
Секции
Есть два тэга для организации секций. Первый это универсальный DIV, который пожалуй самый часто используемый при вёрстке. Этот тэг используется для создания отдельного прямоугольного блока. Поскольку он универсальный, то не несёт никакой семантики и его можно рассматривать как технический тэг. Когда нужно что-то оформить и нужен блок, то мы используем именно DIV.
Но если речь идёт о какой-то смысловой секции, то используется тэг SECTION. Этот тэг как бы говорит о том, что есть некий блок текста, который может рассматриваться отдельно. Семантика здесь достаточно запутанная, поэтому SECTION обычно используют в более явном виде, например когда задают HTML-структуру страницы.
<section>Это секция шапки</section> <section>Это секция для основного текста</section> <section>Это секция для подвала</section>
Подвал/колонтитул
Тэг FOOTER обычно размещается внизу текста и содержит дополнительную информацию к основному тексту. Часто этот тэг используют именно как «подвал» сайта, но на самом деле он должен иметь отношение к тексту или секции, а не визуальному дизайну. Например там указывается ссылка на источник/автора, какие-то сноски с текста, дата публикации и т.д..
Основной текст
Чтобы выделить основной текст, используется тэг ARTICLE. Он чётко указывает на то, что вот здесь будет основной текст. При этом текст может содержать заголовки, подзаголовки и прочие вставки.
<article> <h1>Заголовок</h1> <h2>Подзаголовок</h2> <p>текст</p> <h3>Подзаголовок</h3> <p>текст</p> <footer>Ссылки из текста</footer> </article>
Если на странице несколько разных текстов, то каждый из них можно обрамить отдельным ARTICLE.
Навигация
Блок со ссылками навигации размещается в тэге NAV. Не важно какое будет оформление ссылок и какими тэгами они будут выведены, для поисковика NAV признак того, что здесь размещаются ссылки навигации по текущему сайту.
<nav> <a href="адрес">Главная</a> <a href="адрес">Контакты</a> <a href="адрес">О сайте</a> </nav>
Боковая колонка
Тэг ASIDE служит для выделения семантического блока, который имеет опосредствованное отношение к основному тексту. Обычно это боковая колонка — сайдбар (sidebar), где размещаются разные ссылки, реклама, счётчики и т.д.
Соберём всё вместе
Посмотри как это может выглядеть в итоге.
<div>Шапка сайта</div> <nav> <a href="адрес">Главная</a> <a href="адрес">Контакты</a> <a href="адрес">О сайте</a> </nav> <article> <header> <h1>Заголовок</h1> <p>Описание</p> </header> <h2>Подзаголовок</h2> <p>текст</p> <h3>Подзаголовок</h3> <p>текст</p> <section>Это секция-вставка</section> <h3>Подзаголовок</h3> <p>текст</p> <footer>Автор, ссылки из текста</footer> </article> <aside> <section>Блок рекламы</section> <section>Блок счетчиков</section> </aside> <div>Подвал сайта</div>
Как не запутаться в семантике HTML? На самом деле есть довольно простой способ понять где нужны семантические тэги, а где можно обойтись обычным DIV.
Основное правило — семантика применяется только там, где есть реальное смысловое наполнение. То есть семантические тэги не применяются для разметки шапки или подвала, потому что это декоративные элементы. Если их удалить, то содержимое сайта не пострадает.
Представь себе, что сайт — это книга. Главное — это её наполнение — текст, а не обложка или формат бумаги. Поэтому семантика и применяется только к тому, что несёт какую-то пользу для посетителя. В данном случае семантические тэги используются для группировки контента.
Визуально нет никакой разницы, будет ли использоваться DIV или ARTICLE, но качество поисковой индексации семантической страницы будет лучше, а значит и больше шансов занять более высокие позиции в поисковой выдаче. Это тоже важный момент, который должен учитывать грамотный верстальщик.
Задание
Найди в википедии страницы о Венере, Марсе и Меркурии. С каждой страницы возьми по 3..5 абзацев текста и сверстай их в одном файле так, чтобы получился единый заголовок (например «Планеты земной группы») и краткое описание, а остальные тексты оказались в отдельных секциях ARTICLE. В каждой из них размести ссылку на источник, а также по одному небольшому изображению. Не забудь заголовки секций.