HTML-страница как документ. Курс по HTML (12 из 20)

Итак, мы рассмотрели основные теги, которые используются постоянно.
Теперь давайте посмотрим на саму страничку.

Да, вначале мы просто писали текст и на ходу добавляли туда теги. Но это потому что браузер добрый и не ругается на ошибки.
На самом деле, веб-страничка — это документ. Документ, составленный по чётким стандартам.

Если ваша страничка отвечает этим стандартам, то на программистском сленге говорят, что “ваш HTML валидный”, то есть он оформлен по правилам.
Это от английского слова valid — правильный.
Проверять странички на валидность нужно для того, чтобы они хорошо показывались во всех браузерах ваших посетителей, а также чтобы поисковым роботам было легче извлечь информацию о вашем сайте и показать её в поисковых результатах.

Итак, давайте посмотрим, как устроен документ веб-страницы.

Во-первых, HTML-документ должен быть заключён в свой специальный тег html. Исправляем.
Во-вторых, сверху ставится специальная абсолютно бесполезная, но обязательная строчка — doctype html. Просто напишите и забудьте про неё.
В-третьих, как у любого документа, HTML-страница состоит из 2 частей: заголовка и тела документа.

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

А тело документа содержит видимую информацию — это всё то, что мы с вами до этого писали.

Давайте добавим пока что пустой заголовок — по-английски это будет head.
И оформим тело документа, по-английски это так и будет body.

Теперь давайте в заголовке укажем название и описание документа.
Название задаётся тегом title — пишем тут например “Страничка Саши Скакунова”.
Если обновить страничку, то эта информация покажется в названии страницы.

Теперь добавим описание нашей страницы для поисковых роботов — meta.

Вот и всё.
Давайте теперь проверим, насколько правильно составлен наш HTML-документ.
Пишем в гугле “html validator”, открываем первую ссылку.
Выбираем вкладку “Validate by direct input”, то есть сюда можно прямо вставить наш HTML-код.
Копируем и вставляем наш код. Нажимаем Check, то есть проверить.
Внизу видим, что ошибок нет.

Если бы ошибка была (сейчас я её специально добавлю, например, не закрою тег b), и перевалидирую документ, то я получу ошибку в указанной строке.

Курс по HTML — http://zero2hero.org/course/details/html

Видео HTML-страница как документ. Курс по HTML (12 из 20) канала Zero to Hero