Структура HTML документа
HTML-документ
Следующий пример является базовым документом HTML:
<!doctype html>
<html lang="ru">
<head>
<!-- Метаданные -->
</head>
<body>
<!-- Контент -->
</body>
</html>
Настало время разложить код по элементам
<!DOCTYPE html>
Элемент <!DOCTYPE html> (Доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).
Существуют различные типы документов, например старые сайты написанные на HTML 4.01 имеют вот такой доктайп:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Это старинный вариант, а мы будем использовать современный доктайп.
- Что будет если не указать доктайп?
-- По сути ничего страшного не произойдёт, современные браузеры сумеют построить документ без доктайпа.
Но наличие доктайпа гарантирует, что страница будет построена правильно.
Более подробно о доктайпах https://www.w3.org/QA/2002/04/valid-dtd-list.html (EN)
Элемент <html></html>
Элемент <html> это корень документа HTML.
- Элемент <html> всегда должен иметь атрибут lang. Атрибут lang Определяет основной язык для содержимого элемента.
Например, «en» означает «английский», «fr» означает «французский», «ru» означает «русский».
- <html> ... </html> содержит элемент <head>, за которым следует элемент <body>.
Элемент <head>
Элемент head представляет коллекцию метаданных для документа.
- <head> ... </head> содержит заголовок <title></title>, информацию о таблицах стилей (CSS), сценариях (JavaScript), а так же кодировку страницы и другую служебную информацию для браузера.
- Содержимое тега head не отображается в веб-браузере.
<head>
<!-- Содержимое тега title отображается на вкладке браузера -->
<title>Заголовок страницы</title>
</head>
Элемент <body>
Элемент <body> представляет основное содержимое документа. Всё, то что внутри тега <body></body> отображается на странице
<body>
<p>Содержимое страницы</p>
</body>