Введение в HTML

Чтение — около 7 минут· без учёта практики

Что такое HTML

Язык гипертекстовой разметки HTML (англ. HyperText Markup Language) — язык разметки документов во Всемирной паутине.

HTML — язык разметки, а не программирования. В нём нет переменных, условий и вычислений. Его задача — описать структуру документа: какие в нём есть абзацы, заголовки, списки, таблицы, ссылки на другие страницы и так далее.

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

Цель любого веб-браузера — прочитать HTML-документ и правильно его отобразить. Браузер не показывает HTML-теги, но использует их, чтобы определить, как отображать конкретный документ.

Внешний вид страницы — цвета, шрифты, расположение блоков — задаёт язык стилей CSS. У браузера есть стили по умолчанию, поэтому даже без CSS заголовок выглядит крупнее абзаца. Но HTML отвечает за смысл, а не за оформление.

Первый HTML-код: попробуйте сами

Так выглядит HTML: заголовок и абзац. Измените текст между тегами и посмотрите, как меняется результат.

index.html
HTML
<h1>Моя первая страница</h1>
<p>Я изучаю HTML.</p>

Метки <h1> и <p> на странице не видны: по ним браузер понимает, что первая строка — заголовок, а вторая — абзац. Разберём, из чего состоит такая запись.

Теги и элементы

HTML
<p>Привет!</p>
  • <p> — открывающий тег: показывает, где элемент начинается;
  • Привет! — содержимое;
  • </p> — закрывающий тег: показывает, где элемент заканчивается.

Тег — это запись в коде, например <p>. Элемент — часть документа, которая из этой записи получается. У большинства элементов есть открывающий тег, содержимое и закрывающий тег — такие теги называют парными. Но есть и пустые элементы: они записываются одним тегом, без содержимого. Их разберём ниже. В учебнике я буду говорить «тег», когда речь о записи в коде, и «элемент», когда речь о части документа.

Синтаксис парного тега

Все теги заключены в угловые скобки < и >, а закрывающий тег содержит прямой слеш перед названием — </p>. Так браузер понимает, что элемент на этом месте закончился.

У некоторых элементов, например у абзаца <p> и пункта списка <li>, стандарт разрешает не писать закрывающий тег. В учебнике я всегда закрываю парные теги: такой код проще читать и в нём труднее ошибиться.

Атрибуты

Атрибут задаёт дополнительные сведения об элементе и записывается в открывающем теге после названия. В записи <html lang="ru"> атрибут lang указывает язык страницы, а ru — его значение; кавычки ограничивают значение в коде. У одного тега может быть несколько атрибутов через пробел.

В примерах учебника я записываю атрибуты так: имя, знак = и значение в двойных кавычках. HTML допускает и другие формы записи — их рассмотрим позже.

Синтаксис одиночного тега

Одиночный тег записывается так же, как открывающий тег парного: название в угловых скобках < и >. Содержимого и закрывающего тега у него нет.

HTML
<br>
<hr>
<img src="cat.jpg" alt="Кот">
<input type="text">
<meta charset="utf-8">

Одиночные теги не требуют закрывающего тега. Они добавляют на страницу отдельный объект, например, изображение <img> — или выполняют одно действие, например перевод строки <br>. В HTML одиночных тегов значительно меньше, чем парных, вот самые распространённые из них:

Тег От английского Для чего нужен
<br> break — разрыв перенос строки внутри текста
<hr> horizontal rule — горизонтальная линия тематический разрыв между частями текста
<img> image — изображение вставка картинки
<input> input — ввод поле формы: текст, флажок, кнопка
<meta> metadata — метаданные сведения о документе, например кодировка
<link> link — связь подключение внешнего файла, например стилей

Подробно эти теги мы разберём в следующих уроках.

Теги HTML не чувствительны к регистру: <P> и <p> означают одно и то же. Пишите их в нижнем регистре — так принято в современном коде и во всех примерах учебника.

Пример простого HTML-документа

Полный HTML-документ: из такого кода состоит практически любая страница. Попробуйте изменить текст заголовка или абзаца.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
  </head>
  <body>
    <h1>Это заголовок</h1>
    <p>Это абзац текста.</p>
  </body>
</html>

Браузер схлопывает пробелы, табуляции и переносы строк: несколько пробельных символов подряд он показывает как один пробел (если явно не указать иное — об этом позднее). Поэтому отступы в коде на вид страницы не влияют. В примерах учебника вложенные теги я сдвигаю на два пробела, чтобы код было легче читать.

Из чего состоит HTML-документ

<!doctype html> — это декларация типа документа. Декларация не является тегом HTML: это инструкция для браузера. Она сообщает, что документ написан на современном HTML, и включает стандартный режим отображения. Без неё браузер переходит в режим совместимости со старыми сайтами и может показывать страницу иначе.

В старых версиях HTML декларация указывала конкретную версию языка и была длинной. Современная запись <!doctype html> версию не указывает: HTML развивается как единый живой стандарт.

Основные элементы документа

Элемент <html> — корневой элемент HTML-документа: все остальные элементы вложены в него (являются его потомками). Атрибут lang="ru" сообщает язык страницы — он нужен программам экранного доступа и переводчикам.

Элемент <head> содержит сведения о документе, которые не показываются на странице. Внутри него обязательно должен быть элемент <title>. Строка <meta charset="utf-8"> указывает кодировку, чтобы русский текст отображался правильно. Подробнее о ней — в следующем уроке.

Элемент <title> задаёт название документа. Его видно на вкладке браузера, в закладках и в результатах поиска, поэтому название должно коротко и точно описывать страницу. Поисковые системы учитывают его, когда решают, по каким запросам показать страницу. На самой странице название не видно — вы увидите его на вкладке в следующем уроке, когда откроете свой файл в браузере.

Элемент <body> содержит видимое содержимое страницы.

Элемент <h1> (англ. heading level 1) — заголовок первого уровня, главный заголовок страницы. Поисковые системы и программы экранного доступа используют заголовки, чтобы понять структуру документа. Как правильно использовать заголовки от первого до шестого уровня, мы рассмотрим в статье «Базовый HTML».

Элемент <p> (англ. paragraph) определяет абзац. По умолчанию браузер начинает каждый абзац с новой строки и добавляет отступы сверху и снизу; это поведение можно изменить с помощью CSS.

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

История HTML

Хронология версий HTML
Версия Год
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML Living Standard (WHATWG)с 2011, без номера версии
HTML5 (W3C)2014
HTML 5.1 (W3C)2016
HTML 5.2 (W3C)2017
Единый стандарт — HTML Living Standard2019

Долгое время HTML развивали две организации. W3C выпускала нумерованные версии — HTML5, HTML 5.1 и HTML 5.2, а WHATWG с 2011 года ведёт HTML Living Standard («живой стандарт»), который обновляется постепенно, без номеров версий. В 2019 году W3C и WHATWG договорились о едином стандарте, и им стал HTML Living Standard.

В этом учебнике мы изучаем HTML Living Standard — стандарт, который развивается без смены номера версии. Поэтому сегодня говорят просто «HTML».

Проверьте себя

Выберите ответ — объяснение появится сразу. Ответ можно менять.

1. Какая основная задача языка гипертекстовой разметки?
Показать ответ

Описать структуру и смысл содержимого документа — HTML размечает документ: показывает, где заголовок, абзац, список или ссылка.

2. Какая версия языка HTML сейчас используется?
Показать ответ

HTML Living Standard — без номера версии — WHATWG развивает живой стандарт с 2011 года, а в 2019 году W3C и WHATWG договорились, что он станет единым стандартом HTML.

3. Что делает декларация <!doctype html>?
Показать ответ

Включает стандартный режим отображения страницы — Без декларации браузер переходит в режим совместимости со старыми сайтами и может показать страницу иначе.

4. В какой элемент помещается видимое содержимое страницы?
Показать ответ

<body> — Всё, что пользователь видит на странице — заголовки, абзацы, изображения, — размещается внутри <body>.

5. Хотели записать один абзац с явным закрывающим тегом. Что нужно исправить в <p>Привет!<p>?
Показать ответ

Добавить слеш во второй тег: </p> — Закрывающий тег пишется со слешем. Без него второй тег начинает новый абзац: браузер сам закроет первый и создаст второй, пустой.

6. Чем одиночный тег отличается от парного?
Показать ответ

У одиночного тега нет содержимого и закрывающего тега — Одиночный тег, например <br> или <img>, добавляет отдельный объект или действие и не закрывается.

7. Что изменится, если заменить текст внутри <title>?
Показать ответ

Название на вкладке браузера — <title> задаёт название документа: его видно на вкладке, в закладках и в результатах поиска.

8. Что в записи <html lang="ru"> является значением атрибута?
Показать ответ

ru — Значение атрибута — ru, русский язык. Кавычки только ограничивают его в коде.

Задание

С этого задания начинается сайт Тони: пока это одна страница, а в следующих уроках она будет расти.

В редакторе ниже внутри <body>, после существующего абзаца, добавьте заголовок второго уровня <h2> с текстом «Обо мне» и абзац <p> с парой предложений от лица Тони. Заголовок второго уровня обозначает раздел внутри страницы и подчиняется главному заголовку <h1>.

Выполните задание

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
  </head>
  <body>
    <h1>Это заголовок</h1>
    <p>Это абзац текста.</p>
  </body>
</html>

Ожидаемый результат: на странице появился раздел «Обо мне» с заголовком второго уровня и абзацем.