Лекции
Начать
Начать обучение
JavaRush /Курсы /Frontend SELF /Структура HTML-документа

Структура HTML-документа

Frontend SELF
1 уровень , 4 лекция
Открыта

1. Знакомство с HTML-документом

Давайте разбираться, как же устроены HTML-документы. С чего начинается любой HTML-документ? Каждый HTML-документ имеет структуру, состоящую из трех вложенных тегов: html, head и body. Это стандарт, пример: 


<!DOCTYPE html>
<html>
    <head>
        Служебные теги
    </head>
    <body>
        Основной документ
    </body>
</html>

Всё, что отображает браузер, находится внутри парного тега body (тело документа). Внутри тега head находятся теги со служебной/вспомогательной информацией для браузера.

Telegram

Также в начале документа принято (не обязательно) писать тип документа — DOCTYPE, чтобы браузер лучше понимал, как ему интерпретировать ошибки. Многие браузеры умеют корректно отображать документы с поломанной версткой.

2. Пример HTML-документа

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> обозначает параграф текста. Он используется для разделения текста на логические блоки. Текст внутри этого тега отображается как обычный абзац.

Комментарии (9)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Omadbek080804 Уровень 2
14 сентября 2025
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>Document</title> </head> <body> <form> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <button type="submit">Login </button> </form> </body> </html>
Яков Уровень 1
16 августа 2025
Здравствуйте, я не совсем понимаю команду <hr> куда ее вписывать в <head> или <body>?
Ivan Izutov Уровень 2
22 августа 2025
`В <body>, все теги указываются последовательно
Pa4chaa Уровень 16
20 июня 2025
Есть живые? (проходящие этот курс) Кто с курса джавы? Лайк поставьте плиз)))
Ви Уровень 2
27 июня 2025
Хочешь вместе будем?
Олег Сычев Уровень 12
21 августа 2025
Тоже курс Java - прошел на половину (почти дошел до многопоточки, но ее еще не начинал), параллельно Spring изучаю по книге и решил начать изучать фронтенд)
Олег Сычев Уровень 12
21 августа 2025
Нас уже трое))) Пора объединяться))
Alexey Saprin Уровень 10
15 октября 2025
Я с вами хочу)
Ильдар Уровень 8
22 мая 2025
Задачи в приложении на телефоне ещё не доступны?