Четвертый урок. Семантика HTML5

По стандарту HTML браузер игнорирует двойные пробелы, переносы строк и табуляторы. То есть не важно сколько вы сделаете пробелов, браузер отобразит их слитно, как один пробел. Аналогично и с переносами строк (клавишей Enter).

Для нас, верстальщиков, это хорошая новость, поскольку позволяет форматировать html-код так, чтобы обеспечить его лучшую читабельность.

Форматированию html-кода (и php, и css) следует сразу уделить должное внимание. Старайтесь придерживаться какому-то понятному общепринятому стилю. Обращайте внимание, как оформляют исходные коды опытные верстальщики. Делается это в первую очередь для того, чтобы код можно было легко поддерживать в дальнейшем.

Подходов к оформлению довольно много, но есть некие базовые стандарты.

Такое форматирование «раздувает» в размерах файл, что само по себе не очень хорошо. Но, если мы говорим о HTML (и CSS), то на рабочий сайт выкладывается сжатая (минифицированая) версия кода. Делается это через специальные программы, хотя многие CMS и фреймворки позволяют делать это автоматически.

В любом случае на начальном этапе заботиться о минификации кода не имеет смысла, а вот отработать стилистику написания — важно. Поэтому пишите код красиво!


Как вы уже знаете, тэги бывают блочные и строчные. Браузер, встретив блочный тэг, продолжит его вывод с новой строки. Таким образом блочные тэги используют для позиционирования различных блоков на странице.

К блочным тэгам относятся P, DIV, H1..H6, SECTION, ARTICLE, NAV, ASIDE, HEADER, FOOTER и т.д. С точки зрения поведения они все одинаковы, но при этом имеют разную семантику.

Элемент P указывает на текстовый абзац. Элемент H1 — указывает на заголовок первого уровня (самый важный). Элемент NAV указыват на блок навигации. Таким образом в HTML принято размечать семантически важную информацию, которая потом используется поисковиками для разбора страницы, чтобы отделить технические данные от важного контента страницы.

При верстке у вас будет большой выбор тэгов. Например вместо P можно использовать DIV. Визуально браузер отобразит их одинаково (если они не настроены по разному), но семантически данный подход ошибочен.

Именно поэтому мы будем сразу писать код семантичным.

Если с абзацами и заголовками всё и так ясно, то как определить чем отличаются DIV от SECTION?

Элемент DIV — общего назначения — технический блок, который может использоваться только для позиционирования или например задавать отступ. Он не несет никакой другой нагрузки. Но если нам нужно разбить текст на значимые секции, то тут следует уже применять SECTION, который укажет на то, что текст имеет какое-то особое значение.

Таким образом «семантичные» тэги применятся только к разметке текста и никогда не применяются к структуре блоков, колонок и т.п.

Представьте себе, что любая страница — это обычная бумажная книга. У неё есть секция (SECTION) для шапки/титульного листа (HEADER), где располагаются заголовки (H1..H6), есть секция с содержанием/навигацией (NAV), а также основной контент (ARTICLE), где также встречаются заголовки, сноски сбоку (ASIDE) и сноски внизу (FOOTER).

Вам нужно запомнить: семантика страницы определяется только её текстом или другими значимымы элементами. Чем ближе семантичные тэги по своему размещению в коде к тексту, тем лучше. Всё, что имеет техническое назначение или не играет особой роли для поисковиков — оформляется DIV-тэгом. Со временем вы научитесь определять значимую часть страницы от всего остального, просто представив себе минимум того, что нужно оставить на странице, без чего она перестаёт иметь свой смысл.

Описание семантики секций есть на официальном сайте HTML5. Пока вы можете лишь бегло посмотреть эту информацию, но в будущем со временем вы сможете подробней изучить описание тэгов и примеры.

Задания

1. Найдите на википедии текст на астрономическую тематику.

2. Скопируйте его в html-файл и разметьте семантично как вы считаете нужным. По возможности используйте все «семантичные» тэги, которые были приведены в этой статье.

3. В html-комментариях к каждому блоку опишите почему именно вы решили использовать данный тэг.

4. Красиво отформатируйте html-код.

5. Ответьте почему для разбивки текста на абзацы следует использовать именно P, а не DIV или BR?