Документ HTML

Ранее я говорил, что язык HTML пишется тегами. Тег состоит из имени элемента, заключенного в угловые скобки (<>). Браузер понимает, то что находится внутри скобок и не отображает это на веб странице. Имя элемента начинается с открывающего тега. Например:
<p> так обозначается параграф.
И заканчивается закрывающим тегом:
</p> он сообщает браузеру, что здесь параграф заканчивается. 

Но не все элементы содержат контент, некоторые сами по себе означают определенное действие.

Начиная с 5 версии любой веб документ начинается с объявления <!DOCTYPE html>. Как только браузер видит данный текст он понимает, что перед ним HTML 5. В прежних версиях разметка начиналась с громоздкого объявления типа "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. Это было очень неудобно, ну а теперь все гораздо проще.

Эта строка должна идти самой первой, перед ней не ставится ни пробелов, ни пустых строк.

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

Вот самая простая структура HTML документа:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>

<h1>Это заголовок</h1>
<p>Это параграф</p>

</body>
</html>

Весь документ заключается в тег <html>. Это корневой тег, он содержит в себе все элементы.  Тегом </html> заканчивается документ. Также через этот тег можно указать естественный язык страница. Выглядеть это будет так <html lang="ru">, если страница на русском языке, или другой код языка.

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

 

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Далее следует элемент <head>, его название соответствует его значению на английском. Это голова документа. Он содержит описательную информацию о документе, сценариях и прочие метаданные.

Внутри этого элемента располагается элемент meta. В данном случае им определяется кодировка символов и записывается он так :<meta charset="utf-8">. Кодировка это это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла).

Такая структура особенно полезна, когда к странице добавляются сценарии, таблицы стилей и метаэлементы. Также в <head> входит такой элемент как <title>. Он используется для написания заголовка веб страницы.


Использование элементов <html>, <head> и <body>,   является просто вопросом стиля, на личное усмотрение автора. Страница без этих элементов будет работать отлично на всех браузерах, и даже на старых ,  которые и слыхом не слыхивали ни о каком HTML5. Практически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов html>,<head> и <body>, и , даже если разработчик и не использовал их.


Печать