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