Первый HTML-документ: index.html и базовая структура

Когда вы вводите адрес сайта, например example.com, браузер просит у сервера страницу. Если в адресе не указано конкретное имя файла, сервер ищет файл с именем index.html и отправляет его. Это общепринятое соглашение: index.html — это домашняя страница сайта, корневой файл всего проекта.

Имя важно именно так написать: index.html. Другое имя, например home.html, тоже будет работать, но тогда адрес придётся указывать полностью: example.com/home.html. А index.html открывается по умолчанию, поэтому для главной страницы его используют всегда.

index.html должен лежать в корне проекта, если это главная страница.

Для работы нужен редактор кода. Подойдёт любой: VS Code, Atom, Sublime Text, WebStorm или даже обычный «Блокнот» в самом начале. Создайте файл index.html и напишите в нём одну строку.

<h1>Hello World</h1>

Тег <h1> — это самый крупный заголовок. Всё, что написано между <h1> и </h1>, браузер покажет как заголовок. Откройте файл в браузере: даже если вокруг этой строки ничего нет, браузер попытается отобразить текст.

Браузер очень терпеливый: он автоматически исправляет мелкие проблемы в разметке. Откройте инструменты разработчика — во вкладке Elements или Элементы вы увидите, что браузер добавил вокруг вашей строки дополнительные теги. Он достроил недостающую обёртку сам, потому что знает, как должна выглядеть правильная HTML-страница.

Писать весь скелет документа вручную каждый раз неудобно. В большинстве редакторов кода есть сокращение: поставьте восклицательный знак ! и нажмите клавишу Tab. Редактор вставит готовую базовую структуру HTML-документа.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мой первый документ</title>
</head>
<body>
  
</body>
</html>

Это всего лишь шаблон. Всё, что в нём есть, можно менять: язык, кодировку, заголовок, содержимое. Но каждая строка здесь несёт смысл, и дальше мы разберём, зачем нужна каждая.

Первой строкой в HTML-документе идёт <!doctype html>. На первый взгляд это объявление версии, но работает оно иначе: doctype — это переключатель режима отрисовки. Если он есть, браузер рисует страницу по современным правилам. Если его нет, браузер может включить режим совместимости со старыми ошибками.

Последняя версия стандарта — HTML5. Она добавила семантику, мультимедиа, графику и многое другое. Синтаксис doctype при этом остался очень коротким и легко запоминается.

parse(`<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Привет</title>
</head>
<body>
  <h1>Привет, мир!</h1>
</body>
</html>`);

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

Теги делятся на две группы. Парные теги имеют открывающую и закрывающую части: <html>…</html>, <head>…</head>, <title>…</title>, <body>…</body>. Одиночные теги состоят из одной части, потому что внутри них нечего оборачивать: <meta>, <img>, <br>.

Тег может содержать атрибуты — дополнительные параметры, которые расширяют его возможности. Порядок атрибутов внутри тега не важен, но у каждого тега есть свой набор разрешённых атрибутов.

<html lang="ru">

Атрибут lang говорит браузеру, на каком языке написан документ. Это важно для поисковиков, переводчиков и программ чтения с экрана. Атрибут charset="utf-8" в теге <meta> указывает кодировку — правило, по которому байты файла превращаются в буквы. UTF-8 понимает русский язык, поэтому мы используем её почти всегда.

Любой HTML-документ содержит две важные секции. Секция <head> — это служебная часть: заголовок вкладки, описание страницы, кодировка, ссылки на стили и скрипты. Всё, что здесь написано, не появляется на самой странице, но нужно браузеру, поисковикам и другим программам.

Секция <body> содержит весь контент, который видит пользователь: заголовки, абзацы, картинки, кнопки, ссылки. Если что-то должно быть на странице, оно находится именно здесь.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая страница.</p>
</body>
</html>

В этом примере <title> написан внутри <head>, поэтому он появится на вкладке браузера. Текст «Привет, мир!» и абзац написаны внутри <body>, поэтому их увидит посетитель.

Абсолютно любой контент, который отображается на веб-странице, должен быть обёрнут в определённый тег. Тег говорит браузеру, что это за контент: заголовок, абзац, ссылка, кнопка или что-то ещё.

<h1>Hello World</h1>
<p>Это абзац.</p>

Здесь <h1>Hello World</h1> превращает текст в заголовок первого уровня, а <p>Это абзац.</p> — в абзац. Браузер может показать и «голый» текст без тегов, но тогда он не поймёт, что это за текст, и не сможет правильно его оформить.

Если текст не обёрнут в тег, браузер отобразит его, но не поймёт его смысл.