Первая страница: теги, заголовок, ссылка

HTML — язык разметки: теги помечают, где в тексте заголовок <h1>, абзац <p> и ссылка <a>. Браузер читает эти пометки и рисует по ним страницу.

Страница: текст с пометками

Любая веб-страница начинается с обычного текста. Чтобы браузер понял, где в этом тексте заголовок, где абзац, а где ссылка, текст размечают: ставят пометки. Язык этих пометок называется HTML, HyperText Markup Language, язык разметки гипертекста.

HTML не язык программирования. Он ничего не считает и ничего не решает. Он только говорит: «это заголовок», «это абзац», «это ссылка на другую страницу». Браузер читает пометки и рисует страницу.

Проверьте себя: что делает HTML?

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

Тег и элемент

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

Внутри открывающего тега бывают атрибуты: уточнения в виде имя="значение". У ссылки главный атрибут href, адрес, куда она ведёт. Нажмите на части строки ниже, чтобы увидеть, из чего она сделана.

<ahref="tel:+70000000000">Позвонить</a>

Начало открывающего тега

Буква a значит anchor, якорь: так в HTML называется ссылка.

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

Проверьте себя: чем элемент отличается от тега?

Тег: одна пометка в угловых скобках. Элемент: открывающий тег, содержимое и закрывающий тег вместе.

Скелет документа

У каждой страницы один и тот же скелет:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Название вкладки</title>
  </head>
  <body>
    Всё, что видно на странице
  </body>
</html>

Первая строка, <!doctype html>, говорит браузеру: это современный HTML. Элемент html обнимает всю страницу, а его атрибут lang сообщает её язык. По нему программа чтения с экрана выбирает произношение, а переводчик и поисковик понимают, с каким языком имеют дело.

В head лежит то, чего не видно на самой странице: кодировка текста и название вкладки в title. В body лежит всё, что видно.

Проверьте себя: где написать название вкладки, в head или в body?

В head, в элементе title. Всё видимое на странице идёт в body.

Заголовок, абзац, ссылка

<h1> это главный заголовок страницы, обычно один. Для подзаголовков есть <h2>, <h3> и дальше до <h6>. Заголовки нужны не для крупного шрифта, а для смысла: по ним люди и программы понимают, из чего состоит страница.

<p> это абзац. Браузер сам отделит абзацы друг от друга. А вот переносы строк внутри файла он не видит: пока текст не размечен, он сливается в одну строку. Это вы увидите в практике.

<a href="..."> это ссылка. Адрес может вести на другую страницу (https://), на почту (mailto:) или на телефон (tel:). На телефоне по ссылке tel: сразу открывается набор номера.

Проверьте себя: сколько h1 обычно бывает на странице?

Один: это главный заголовок, который говорит, о чём вся страница.

Что браузер прощает

Забыли закрыть </p>? Написали <h1> внутри <p>? Браузер не покажет ошибку: он молча достроит страницу так, как сочтёт нужным. Помните урок про то, как браузер рисует страницу: из текста он строит дерево элементов, DOM, и в нём всё должно быть вложено правильно. Если вы ошиблись, браузер сам исправит дерево, и результат может оказаться не тем, который вы задумали.

Поэтому полезная привычка: закрывайте всё, что открыли, и вкладывайте теги как матрёшки. Первым закрывается тот, что открыт последним: <p>текст <a href="...">ссылка</a></p> верно, а <p>текст <a href="...">ссылка</p></a> нет. Проверить себя можно в «Элементах» инструментов разработчика: там видно дерево, каким оно получилось на самом деле, а не каким вы его писали.

Комментарии и особые символы

Бывает, что нужна заметка для себя, которую посетитель не увидит. Для этого есть комментарий: всё между <!-- и --> браузер пропускает.

<!-- Здесь будет телефон, когда его утвердят -->

А если в самом тексте нужен знак «меньше» или амперсанд, их нельзя писать как есть: браузер примет < за начало тега. Для этого есть особые записи: < вместо <, > вместо >, & вместо &. Так что фраза «Иванов & сыновья» в разметке выглядит как Иванов & сыновья.

Практика

Ниже ваша первая страница. В ней уже есть ваши данные, или данные Ксении из примера, если вы своих не вписывали. Сейчас это сплошной текст, и браузер показывает его одной строкой. Разметьте его, и проверки справа будут загораться одна за другой.

Что было не так с первыми страницами

Первая страница в истории, как вы помните, была чистым текстом со ссылками, и в этом была её сила: любой документ читался в любой программе. Слабость была другой. Заголовок выглядел как заголовок только потому, что браузер так решил, и автор не мог ничего изменить: ни цвет, ни шрифт, ни ширину. Когда сайты захотели выглядеть красиво, авторы начали использовать разметку не по смыслу. Об этом следующий урок. А то, что вы сделали сейчас, пережило все эпохи: заголовок, абзац и ссылка остаются основой любой страницы и сегодня.