Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Напишите исходный код страницы
- Добавьте один абзац
В предыдущем уроке познакомились с тегом doctype, определяющим тип документа, и ещё ранее с тегами html, head и body. Последние теги также тесно участвуют в образовании веб-страницы.
Перед обсуждением темы приведем традиционную структуру веб-страницы.
Типичная страница на HTML
Пример простой HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<title>Типичная страница</title>
<meta charset = "utf-8">
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Абзац.</p>
<!-- Комментарий -->
</body>
</html>Исходный код страницы традиционно содержит определенные теги. Они организуют структуру веб-страницы. О них мы уже ранее говорили, поэтому лишь повторим.
Страница начинается с тега <!DOCTYPE html>, который объявляет тип документа.
Далее можно увидеть контейнер <html> за пределами которого может быть только <!DOCTYPE>.
Внутри тега <head> указываются заголовок страницы, мета-теги, подключаемые стили и скрипты, то есть то, что для пользователя является «невидимым» (кроме заголовка, отображаемого во вкладке браузера).
Далее можно увидеть тег <body>, в котором размещаются все элементы сайта, видимые пользователем. На странице должен быть только один тег <body>.
Поначалу может показаться что нет необходимости соблюдать структуру, ведь вы же разработчик, а следовательно, в праве решать что и как вам делать. Но когда сайт будет запущен, поисковые системы не дадут вам так вольно относится к структуре сайта. Неправильно сверстанные страницы будут ниже ранжироваться в поисковой выдаче, а это приведет к меньшему количеству посещений сайта из поисковых систем и меньшей популярности сайта в целом.
Ранжирование – это сортировка сайтов в поисковой выдаче.
В следующем уроке поговорим о важном теге <title> - заголовок веб-страницы.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
