Структура 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">
Это старинный вариант, а мы будем использовать современный доктайп.
<!DOCTYPE html>

- Что будет если не указать доктайп?
-- По сути ничего страшного не произойдёт, современные браузеры сумеют построить документ без доктайпа. Но наличие доктайпа гарантирует, что страница будет построена правильно.
Более подробно о доктайпах 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>.
<html lang="ru"> </html>

Элемент <head>
Элемент head представляет коллекцию метаданных для документа.
  • <head> ... </head> содержит заголовок <title></title>, информацию о таблицах стилей (CSS), сценариях (JavaScript), а так же кодировку страницы и другую служебную информацию для браузера.
  • Содержимое тега head не отображается в веб-браузере.
<head> <!-- Содержимое тега title отображается на вкладке браузера --> <title>Заголовок страницы</title> </head>

Элемент <body>

Элемент <body> представляет основное содержимое документа. Всё, то что внутри тега <body></body> отображается на странице

<body> <p>Содержимое страницы</p> </body>

Комментарии

Добавить комментарий

Чтобы оставить комменатрий необходимо Авторизоваться