Любая HTML-страница строится на одном и том же обязательном скелете: <!DOCTYPE html>, затем <html>, внутри него <head> со служебной информацией и <body> с тем, что видит посетитель. Без этого скелета браузер тоже что-то покажет, но может ошибиться с кодировкой или языком страницы.
В этом уроке
Попробуй поменять текст внутри (<h1>) - он обновится в самом результате. А если поменяешь текст внутри (<title>) - посмотри на «вкладку» над результатом: она покажет именно то, что попадает в заголовок страницы, а не в саму страницу.
Зачем нужен <!DOCTYPE html>
Строка <!DOCTYPE html> - не тег, а декларация: она стоит самой первой в файле, ещё до <html>, и сообщает браузеру одну вещь - (показывай эту страницу по современным правилам HTML5). Без неё браузер иногда переключается в старый (режим совместимости) и может отрисовать страницу не так, как ты задумал.
<!DOCTYPE html><html>... - декларация стоит первой строкой, до всего остального.
<html>... - декларации нет вообще; браузеру приходится самому гадать по каким правилам показывать страницу.
Роли <html>, <head> и <body>
Тег <html> оборачивает всю страницу целиком - это единственный корневой элемент документа. Внутри него всегда ровно два блока по порядку: сначала <head> - служебная часть, которую посетитель не видит в тексте страницы (там находится кодировка, заголовок вкладки и похожие вещи). Затем <body> - всё что реально показывается на экране: заголовки, абзацы, картинки.
<html><head>...</head><body>...</body></html> - порядок правильный: сначала служебная часть, потом видимая.
<html><body>...</body><head>...</head></html> - порядок перепутан; браузер постарается всё равно показать страницу, но так делать не стоит.
Что обязательно находится внутри <head>
В <head> почти всегда есть минимум два тега. Первый - <meta charset="UTF-8">, который указывает браузеру кодировку страницы; без него русский и другой не-английский текст рискует отобразиться нечитаемыми символами. Второй - <title>, текст которого браузер показывает во вкладке и в результатах поиска - и только там, на самой странице этот текст не появляется вообще.
<head><meta charset="UTF-8"><title>Моя страница</title></head> - кодировка указана, заголовок вкладки задан.
<head></head> - пустой <head>: кодировка не указана, вкладка браузера останется безымянной.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Забыть <!DOCTYPE html> в самом начале |
Браузер может переключиться в старый (режим совместимости) и показать страницу непредсказуемо | Всегда начинать файл с <!DOCTYPE html> |
Писать содержимое прямо в <html>, минуя <head>/<body> |
Структура страницы теряет чёткое деление на служебную и видимую часть | Служебное всегда класть в <head>, видимое - в <body> |
Забыть <meta charset="UTF-8"> |
Русский и другой не-английский текст может отображаться нечитаемыми символами | Указывать кодировку одной из первых строк внутри <head> |
Путать <title> с заголовком на странице |
Ждёшь, что текст из <title> появится в самой странице - но он виден только во вкладке браузера |
Для видимого заголовка на странице нужен отдельный тег <h1> внутри <body> |
Шпаргалка
| Термин | Значение |
|---|---|
<!DOCTYPE html> | Декларация в самом начале файла: «это HTML5-документ» |
<html> | Корневой тег, оборачивает всю страницу целиком |
<head> | Служебная часть: данные о странице, не видные в тексте |
<body> | Видимая часть: всё, что показывается посетителю |
<meta charset="UTF-8"> | Указывает кодировку, чтобы текст отображался правильно |
<title> | Текст, видимый во вкладке браузера и в поиске |
Коротко: отвечаем на вопросы
Обязательно ли писать <!DOCTYPE html> вручную каждый раз?
Да - вручную или через шаблон/автодополнение редактора, но в самом файле эта строка должна быть первой всегда, без исключений.
Что будет, если вообще не указать <meta charset="UTF-8">?
Чаще всего ничего критичного не случится, но кириллица или другие не-английские буквы рискуют отобразиться нечитаемыми символами - лучше не пропускать эту строку.
Чем <title> отличается от <h1>?
<title> виден только во вкладке браузера и в результатах поиска, а <h1> - заголовок на самой странице, который видит посетитель.
Можно ли поменять местами <head> и <body>?
Нет - <head> всегда идёт первым внутри <html>, а <body> вторым; именно в таком порядке браузер и ожидает получить документ.
