1. Знакомство с HTML-документом
Давайте разбираться, как же устроены HTML-документы. С чего начинается любой HTML-документ? Каждый HTML-документ имеет структуру, состоящую из трех вложенных тегов: html, head и body. Это стандарт, пример:
<!DOCTYPE html>
<html>
<head>
Служебные теги
</head>
<body>
Основной документ
</body>
</html>
Всё, что отображает браузер, находится внутри парного тега body (тело документа). Внутри тега head находятся теги со служебной/вспомогательной информацией для браузера.
Также в начале документа принято (не обязательно) писать тип документа — DOCTYPE, чтобы браузер лучше понимал, как ему интерпретировать ошибки. Многие браузеры умеют корректно отображать документы с поломанной версткой.
2. Пример HTML-документа
HTML-документ — это основа любой веб-страницы. Он сообщает браузеру, как должна выглядеть страница. Вот простой пример HTML-документа:
<!DOCTYPE html>
<html>
<head> <title>Название страницы</title> </head>
<body> <h1>Привет, мир!</h1> <p>Это моя первая веб-страница.</p> </body>
</html>
Основные части HTML-документа
Эта строка называется декларацией типа документа (doctype). Она сообщает браузеру, что документ написан на HTML5, последней версии языка HTML. Это важно для правильного отображения страницы
<html>
Тег <html>; открывает HTML-документ. Все содержимое веб-страницы должно находиться внутри этого тега. Он обозначает начало и конец HTML-документа.
<head>
Тег <head> содержит служебную информацию о странице. Эта информация не отображается непосредственно на веб-странице, но важна для браузеров и поисковых систем.
Тег <title> задает название страницы, которое отображается на вкладке браузера. Это первое, что видит пользователь при открытии страницы.
<body>
Тег <body> содержит все видимое содержимое веб-страницы: текст, изображения, ссылки, таблицы и так далее. Все, что видит пользователь на экране, находится внутри этого тега.
<h1>Привет, мир!</h1>
Тег <h1> представляет собой заголовок первого уровня. Он используется для самых важных заголовков на странице. Текст внутри этого тега отображается крупным и жирным шрифтом.
<p>Это моя первая веб-страница</p>
Тег <p> обозначает параграф текста. Он используется для разделения текста на логические блоки. Текст внутри этого тега отображается как обычный абзац.
<div>Это текстовый блок внутри контейнера</div>
Тег <div> является универсальным блочным контейнером. Он используется для группировки других элементов и создания структуры страницы. Сам по себе он не меняет внешний вид контента, но позволяет применять стили ко всей группе элементов сразу.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ