Также обращаю ваше внимание, что данный список не является конечным, так как для повышения семантики и для удобства верстки их дополняют, а многие выходят из обихода. Подробный список можно найти на сайте w3schools.com/tags/.
Парные теги
Самые первые парные теги, которые вам нужно запомнить – те, которые формируют каркас будущей страницы:
html – Данный тег определяет страницу целиком. В него оборачивается все содержимое страницы.
head – Данный тег предназначен для «невидимой» части страницы. В него помещается заголовок страницы (который отображается на вкладке браузера), определение правил и почти всегда ссылки на зависимости.
body – Само тело [body] содержит видимую часть страницы, грубо говоря отформатированный текст.
Тут же следует сразу показать, как их использовать:
Содержимое
Пример использования парных тегов
Первым делом мы указываем доктайп, затем открываем html тег, в котором размещаем head внутри которого можно разместить title. Закрываем и тут же открываем body, в котором уже пишем весь код. В конце теги закрываются в порядке вложенности.
Маленький хак от Emmet
Возвращаясь к теме редакторов IDE можно упростить себе жизнь с плагином Emmet. Он позволяет вызвать шаблон-заготовку страницы html посредством следующих действий:
Пишем знак восклицания – !
Нажимаем таб
Получаем кусок кода, готовый к эксплуатации
Я такое часто применяю в редакторе Brackets.
Далее давайте разберем остальные теги.
Заголовки жизненно необходимы для разделения текста на части, чтобы упростить чтение материала. Они также используются поисковыми роботами для определения содержимого страницы. Впрочем, и человек в первую очередь пробегается глазами по заголовкам и только потом читает сам текст (если читает). Заголовок является блочным элементом. На странице может быть не больше одного тега h1! – Данный тег используется для оформления текста в формате абзаца [англ. paragraph]. Чтобы абзац выглядел, как должен, а именно: быть единым целым, единицей текста, и иметь перенос текста в конце. Текст без обертки в параграф превращается в однородное полотно, которое трудно читать. Параграф не может быть обернут в тег ссылки.–
– Тег заголовка [англ. heading – отсюда сокращение h], варьируется от уровня заголовка. H1 – самый важный и, соответственно, самый большой. А h6 уже меньше размера основного текста.