Блочные и структурные теги

HTML теги #

Мы уже говорили про структурные элементы. Это те теги, которые размечают структуру текста.

Структурные теги #

Название Короткое пояснение
body Содержит весь контент страницы.
main Главное уникальное содержимое страницы. Используется в документе только один раз.
header “Шапка секции/документа”. Важная вводная информация. В html5 разрешено многократное использование на одной странице.
footer Заключительная часть секции. Может включать в себя, к примеру, автора статьи, дату статьи.
nav Важная навигация сайта.
article Статья. Самостоятельная часть документа.
section Несамостоятельная часть документа. Например анонсы статей с заголовками на главной.
aside Обычно боковая колонка, в которой содержится часть документа.
address Контактные данные. Дочерний тег article или body.

Блочные теги #

Блочные элементы — занимают всю ширину страницы, а по высоте определены его содержимым. К блочным HTML-тегам относятся: address, blockquote, div, fieldset, form, h1 - h6, hr, , p, pre, table, ul.

Из всего этого списка два тега являются наиболее часто употребляемы. Это p - параграф или абзац, и div - блок с содержимым, который описывается отдельно.

Строчные теги #

Строчные элементы — это те теги, которые используются внутри блока, внутри строки. Это к примеру: img, span, a, q, code, b, strong, em, i.

Я привёл наиболее часто употребляемые теги. Без ссылок, фотографий и выделений текста интернет тяжело себе представить.

Все остальные теги #

Существует более сотни HTML-элементов: article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, time и прочие.

Не уверен, что их все надо знать наизусть. Но один раз ознакомиться с каждым из них стоит.

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

Дополнительные ссылки #

  1. Категории контента
  2. HTML Element Reference
  3. Все элементы HTML - developer.mozilla.org
  4. Все HTML элементы - w3.org
  5. HTML5 best practices; section/header/aside/article elements - вопросы по размещению одних тегов в других.
comments powered by Disqus