Тимур Машнин "Введение в веб-разработку с HTML, CSS, JavaScript"

После тега head идет тег body. Тег body содержит весь основной контент, видимый пользователю.

Сохраним нашу страницу как index.html, так, как правило, называется главная страница сайта. И теперь давайте посмотрим, как это выглядит в браузере.

Но сначала установим плагин Browsersync для Sublime Text.

Для этого скачаем Github репозиторий проекта Browsersync по адресу https://github.com/iamdjones/sublime-text-browser-sync.

Распакуем папку и сохраним ее в каталоге пакетов Sublime Text, который мы найдем с помощью меню Preferences – Browse Packages.

В результате у нас появится пункт меню Browser Sync.

Теперь мы можем воспользоваться командой Launch, чтобы открыть HTML страницу в браузере.

При этом все изменения кода страницы будут автоматически отображаться в браузере.

Далее давайте попробуем взять код нашей страницы, скопировать и вставить его для проверки внутри валидатора W3C.

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

Поэтому добавим этот атрибут – .

Теперь проверка в валидаторе покажет, что наша страница действительна.

Еще одно замечание, когда браузер открывает HTML-страницу, он всегда отображает или интерпретирует HTML-код последовательно сверху вниз.

Таким образом, сначала интерпретируется объявление типа документа, затем тег HTML, затем тег заголовка и так далее, пока не будет достигнут последний закрывающий тег HTML.

Элементы HTML документа

Все элементы HTML документа делятся на две категории в рамках традиционной HTML структуры. Это либо элементы уровня блока (block-level), либо встроенные элементы (inline).

Элементы уровня блока по умолчанию отображаются с новой строки. Вы можете изменить это с помощью CSS, но мы пока не говорим о CSS.

Это означает, что каждый раз, когда вы указываете блочный элемент в HTML, браузер автоматически помещает этот элемент на новую строку в потоке отображения документа.

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

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

В этом примере используются элементы div и span. Элемент div обозначает деление, а элемент span – интервал.

Элемент div – это самый общий элемент блочного уровня, а span – это суперуниверсальный встроенный элемент.

Здесь у нас есть пара элементов div, следующих один за другим, DIV 1 и DIV 2. Затем есть элемент span, который следует за DIV 2. И DIV 3 немного сложнее, так как он включает в себя элемент span внутри него.

Если открыть этот документ в браузере, вы можете увидеть, что элемент DIV 1 находится сам по себе на отдельной строке. Так же и элемент DIV 2, сам по себе на отдельной строке.

Элемент Span 1 следует сразу после DIV 2. И, хотя span является встроенным элементом, но поскольку DIV 2 располагается на отдельной строке, следующий элемент также размещается на отдельной строке.

DIV 3 является элементом уровня блока, поэтому он перемещается на следующую строку, но элемент Span 2 находится внутри DIV 3, и, поскольку это встроенный элемент, он не требует новой строки.

И обратите внимание, то, как мы пишем код и размещаем его на разных строках абсолютно не влияет на html-страницу и на то, как она отображается. Вы могли бы написать весь код в одну строку и результат будет тот же.

Теперь возьмите этот код, скопируйте его и проверьте в валидаторе W3C. Вы увидите, что страница действительна.

Но что произойдет, если вы прямо внутри валидатора добавите еще один тег div прямо внутри тега span с некоторым содержимым. Вы увидите, как валидатор пожалуется, что недопустимый элемент div является дочерним элементом span.

На самом деле спецификация HTML5 группирует традиционные блочные и встроенные элементы в семь типов HTML контента. И вы можете посмотреть это разделение более подробно в разделе видов контента W3C, где перечислены семь типов контента, которые определяет HTML5.

Теперь, давайте рассмотрим следующие HTML элементы, представляющие заголовки документа.

В этом очень простом HTML-документе есть элементы h1, h1, h2, h3 и вплоть до элемента h6, в общем, все доступные элементы заголовков.

И эти элементы указывают то, что содержимое заголовка между открывающим элементом h1 и закрывающим элементом h1 является самым важным заголовком в документе, и так далее.

Таким образом, h6 также будет заголовком документа, но наименее важным из всех.

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

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

В этом примере вы можете увидеть новый тег header, который содержит такую информацию о документе, как логотип компании, слоган, навигацию.

HTML тег