Что такое HTML
HTML (HyperText Markup Language) — язык разметки, которым описывают содержимое веб-страницы: где заголовок, где абзац, где ссылка. Это не язык программирования: в нём нет вычислений, только описание структуры. Браузер читает разметку и рисует страницу. Под каждым примером этого учебника сразу виден результат — меняйте код и смотрите, что получается.
Теги
Разметка состоит из тегов — названий в угловых скобках. Большинство тегов парные: открывающий тег, содержимое и закрывающий тег с косой чертой:
<p>Это абзац текста.</p>Тег <p> (от paragraph) означает абзац. Сами теги на странице не видны — в превью остался только текст.
Элементы
Открывающий тег, содержимое и закрывающий тег вместе называют элементом. Элементы идут друг за другом сверху вниз:
<h1>Мой сайт</h1>
<p>Добро пожаловать!</p>
<p>Здесь я рассказываю о путешествиях.</p><h1> — главный заголовок страницы. Браузер сам выбрал для него крупный жирный шрифт, а абзацы разделил отступами.
Вложенность
Элемент может лежать внутри другого. Внутренний элемент называют дочерним, внешний — родительским. Закрывают их в обратном порядке: сначала внутренний, потом внешний:
<p>Это <strong>очень</strong> важно.</p><strong> выделяет важные слова — браузер показывает их жирным. Вложенные элементы принято сдвигать отступом, чтобы структура читалась с первого взгляда.
Одиночные теги
Некоторым элементам содержимое не нужно, и у них нет закрывающего тега. Например, <br> переносит строку, а <hr> рисует горизонтальную линию:
<p>Первая строка<br>Вторая строка</p>
<hr>
<p>Текст после линии.</p>Такие теги называют одиночными или пустыми. Писать косую черту в конце (<br />) не обязательно.
Комментарии
Текст между <!-- и --> — комментарий. Браузер его не показывает, он нужен людям, которые читают код:
<!-- Шапка сайта -->
<h1>Мой сайт</h1>
<!-- <p>Этот абзац временно скрыт</p> -->Комментарием удобно временно «выключить» часть разметки, не удаляя её.
Частая ошибка
Незакрытый тег распространяется на всё, что идёт после него. Здесь забыли закрыть <strong>, и жирным стал весь текст до конца:
<p>Это <strong>важно.</p>
<p>А это обычный текст — но он тоже жирный.</p>Браузер не сообщает об ошибках в HTML, а пытается их угадать и исправить. Поэтому следите сами, чтобы у каждого парного тега был закрывающий.