Полный документ
В прошлом уроке мы писали куски: заголовок, абзац. Настоящая страница — это целый документ, и у него есть скелет, одинаковый у всех страниц в интернете.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Домашние растения</title>
</head>
<body>
<h1>Растения</h1>
<p>Фикус не любит, когда его переставляют.</p>
</body>
</html>Выглядит громоздко, но запоминать тут почти нечего: этот кусок пишут один раз и потом копируют. Разберём построчно.
<!DOCTYPE html> — первая строка любой страницы. Она говорит браузеру: «дальше современный HTML, показывай по нынешним правилам». Без неё браузер включает режим совместимости со страницами девяностых, и вёрстка едет.
<html> — корневой элемент. Внутри него всё остальное. Атрибут lang="ru" сообщает язык страницы: по нему браузер предлагает перевод, а программа чтения с экрана выбирает голос.
Дальше две части, и это главное разделение в документе. head — сведения о странице: как её зовут, в какой кодировке, что показать в поиске. Ничего из этого на экране не видно. body — всё, что видно: заголовки, текст, картинки.
Кодировка и название
Две строки в head нужны почти всегда. Первая — кодировка.
<meta charset="utf-8">Текст в файле хранится числами, и кодировка — это таблица «какое число какая буква». Если браузер выберет не ту таблицу, русские буквы превратятся в набор знаков.
Строчку ставят первой в head — до всего остального. Браузер начинает разбирать файл сразу, и о кодировке должен узнать раньше, чем дойдёт до текста.
Вторая строка — название страницы.
<title>Домашние растения — уход и полив</title>Оно показывается на вкладке браузера, в закладках и — что важнее — заголовком в поиске. Название пишут для человека, а не для себя: «Главная» ничего не говорит тому, кто нашёл вас в выдаче.
Телефон и описание
Ещё две строки в head — про телефон и про поиск.
<meta name="viewport" content="width=device-width, initial-scale=1">Без неё телефон делает вид, что экран шириной около 980 точек, показывает страницу целиком и уменьшает всё до нечитаемого. Строка говорит: «ширина как у устройства, не уменьшай».
Это не делает страницу удобной на телефоне — это только позволяет ей такой стать. Настоящая адаптивность будет в шестнадцатом уроке, но без этой строки не поможет и она.
<meta name="description" content="Как ухаживать за фикусом: полив, свет, пересадка и частые ошибки.">Описание показывается под заголовком в поиске. Оно не влияет на место в выдаче, зато влияет на то, нажмут ли по ссылке, — и это ровно та разница, ради которой его и пишут.
Атрибуты
В этом уроке впервые появилось то, чего не было в первом: атрибуты. Это дополнения внутри открывающего тега.
<html lang="ru">
<meta charset="utf-8">Пишутся они так: имя, знак равенства, значение в кавычках. Атрибутов у тега может быть сколько угодно, они разделяются пробелом, порядок не важен.
<p lang="en">Hello</p>Абзац как абзац, но браузер знает, что текст английский
Атрибут ничего не показывает сам по себе. Он уточняет: у ссылки — куда вести, у картинки — какой файл взять, у поля — что туда вводить. Всё это будет в следующих уроках, а правило записи одно на всех.
Отдельно стоят теги без содержимого — <meta>, <img>, <br>. У них нет ни текста внутри, ни закрывающего тега: всё, что они говорят, сказано атрибутами.