Структура HTML-документа

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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Титул в браузере</title>
</head>
<body>

код страницы

</body>
</html>

Первая строчка <!DOCTYPE HTML>, хоть и выглядит как html-тэг, на самом деле таковым не является. Это т.н. тип документа, который указывает, что это именно HTML. Это исторический артефакт, который на самом деле нужен для того, чтобы указать ещё и версию HTML-стандарта.

Сейчас мы верстаем просто на HTML, но на самом деле это HTML 5. Раньше были и другие стандарты: HTML 4, 3, XHTML и т.д. Путаница была жуткая, но только так можно было сказать браузеру в каком режиме ему следует отображать страницу (строгий, нестрогий, фреймы...). К счастью, сейчас всё упростилось, но doctype указывать нужно.

После этого идёт непосредственный код, который заключается в единственный тэг <html> </html>.

Внутри есть две секции: HEAD и BODY.

Секция HEAD — служебная, где располагается различная мета-информация, например титул страницы, её описание, кодировка, подключаемые файлы стилей, скриптов и прочее. Эта секция никак не отображается браузером, но если ты случайно разместишь в ней какой-то значащий для вывода тэг (например изображение), то браузер автоматически завершит секцию HEAD до этого тэга.

Это позволяет сократить код страницы и не указывать BODY, который является необязательным. Но, с точки зрения качества кода, мы всегда указываем полную структуру html-страницы.

Секция BODY содержит код, который нужен для отображения страницы. Именно здесь и происходит вся вёрстка страницы.

Котик
Автор котика: nan dai

Оформление кода

Сразу поговорим о том, как правильно оформлять код. Запомни простое правило — код должен быть читаемым и понятным другим верстальщикам.

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

Регистр

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

Отступы

Блоки, которые вложены друг в друга должны отбиваться слева. Вот пример:

<section>
	<div>
		<h1>Заголовок</h1>
		<h2>Подзаголовок</h2>
		<blockquote>Цитата</blockquote>
	</div>
</section>

Смысл всего этого в том, чтобы визуально сразу видеть вложенность тэгов.

Пробелы или табулятор

Отступ можно делать как табулятором, так и пробелами. В основном кодеры используют пробелы из расчёта 4 пробела — это один табулятор. Табулятор удобен там, где нет автоформатирования (он автоматом расставляет отступы). Но вообще принципиальной разницы нет: если тебе всё равно, то используй пробелы.

Кавычки

Кавычки могут быть одинарные ' и двойные ". Правило для HTML такое: вначале двойные, потом одинарные. Обычно это используется в JavaScript-коде:

<a href="адрес">ссылка</a>
<div onClick="alert('текст')">Кликни на меня</div>

Слэш в конце одиночных тэгов

Иногда встречается такая форма указания одиночных тэгов:

<img src="адрес" />

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

Порядок атрибутов в тэгах

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

Для HTML, опять же, без разницы, но для верстальщиков удобней такой вариант: вначале какие-то «особые-особые» атрибуты, потом id (поскольку он уникальный), потом class, а дальше все остальные без разницы. И в конце одиночные атрибуты. 

<input v-data id="myEmail" class="my" style="color: red" type="email" name="my-email" required>

И в заключении отмечу, что Visual Studio Code умеет выполнять форматирование автоматически (после установки соответствующих плагинов). То есть очень часто вообще не приходится об этом задумываться. Даже если получился «ужасный» код, достаточно выбрать пункт «Форматировать документ» и программа приведёт код в приличный вид.

Задание

Найди текст из википедии про Солнце и размести его в отдельном файле с учётом правильной html-структуры документа. Сделай так, чтобы страница была доступна по адресу http://localhost/sun.

← Локальные сайты
Семантика HTML →