После тега html идет тег head. И тег head содержит элементы, относящиеся к описанию содержимого страницы.
Например, какую кодировку символов должен использовать браузер для отображения контента страницы.
Тег head также может содержать заголовок страницы, это тег title, и ссылки на любые ресурсы, необходимые для правильного отображения страницы.
Таким образом, тег head содержит метаданные об основном контенте страницы.
Здесь тег meta с атрибутом charset указывает какую кодировку необходимо использовать для отображения символов нашей веб-страницы.
UTF-8 – это наиболее часто используемый стандарт кодирования символов, позволяющий компактно хранить и передавать символы Юникода.
И обратите внимание, что у тега meta нет закрывающего тега.
Далее мы указываем заголовок страницы с помощью тега title. И заголовок – это один из обязательных тегов, без которого HTML страница будет недействительная.
И заголовок отображается во вкладке браузера.
После тега 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 lang="en">.
Теперь проверка в валидаторе покажет, что наша страница действительна.
Еще одно замечание, когда браузер открывает HTML-страницу, он всегда отображает или интерпретирует HTML-код последовательно сверху вниз.
Таким образом, сначала интерпретируется объявление типа документа, затем тег HTML, затем тег заголовка и так далее, пока не будет достигнут последний закрывающий тег HTML.
Элементы HTML документа
Все элементы HTML документа делятся на две категории в рамках традиционной HTML структуры. Это либо элементы уровня блока (block-level), либо встроенные элементы (inline).
Элементы уровня блока по умолчанию отображаются с новой строки. Вы можете изменить это с помощью CSS, но мы пока не говорим о CSS.
Это означает,