Найти в Дзене
Биты и байты
2 подписчика

HTML: Структура веб-страницы

3 мин
Веб-разработка начинается с понимания HTML (HyperText Markup Language), языка разметки, который определяет структуру веб-страниц. Это как создание каркаса дома: HTML указывает, где будут заголовки, текст, изображения, кнопки и другие элементы. Для новичков, далеких от программирования, важно начать с простого, например, вы можете создать страницу с заголовком "Мой первый сайт" и добавить текст, как в обычном документе, но с тегами. Откройте текстовый редактор, например, Блокнот (Windows) или TextEdit (macOS). Создайте новый файл и сохраните его как index.html в удобной папке, например, на рабочем столе. Это будет основа вашей страницы. <!DOCTYPE html> <html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой первый сайт</title>
</head>
<body>
<h1>Мой первый сайт</h1>
<p>Это мой первый текст на сайте.</p>
</body> </html> Здесь <!DOCTYPE html> указывает, что это HTML5. <head> содержит метаданные. <body> добавлен заголовок с тегом <h1> и текст с тегом <p>. Сохраните файл и о
Оглавление

Веб-разработка начинается с понимания HTML (HyperText Markup Language), языка разметки, который определяет структуру веб-страниц. Это как создание каркаса дома: HTML указывает, где будут заголовки, текст, изображения, кнопки и другие элементы. Для новичков, далеких от программирования, важно начать с простого, например, вы можете создать страницу с заголовком "Мой первый сайт" и добавить текст, как в обычном документе, но с тегами.

Откройте текстовый редактор, например, Блокнот (Windows) или TextEdit (macOS). Создайте новый файл и сохраните его как index.html в удобной папке, например, на рабочем столе. Это будет основа вашей страницы.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой первый сайт</title>
</head>
<body>
<h1>Мой первый сайт</h1>
<p>Это мой первый текст на сайте.</p>
</body>
</html>

Здесь

<!DOCTYPE html> указывает, что это HTML5.

<head> содержит метаданные.

<body> добавлен заголовок с тегом <h1> и текст с тегом <p>.

Проверка результата

Сохраните файл и откройте его в браузере, дважды щёлкнув по нему или перетащив в окно браузера. Вы увидите заголовок "Мой первый сайт" и текст ниже.

Структура HTML

Основная структура HTML-документа включает несколько ключевых компонентов. Начинается все с <!DOCTYPE html>, который сообщает браузеру, что это документ HTML5, необходимый для правильного отображения. Затем идет корневой элемент <html>, который обнимает всю страницу. Внутри <html> находится <head>, секция для метаданных, не видимых посетителям. Здесь размещают <title>, который отображается в вкладке браузера, например, "Мой первый сайт", и <meta charset="utf-8"> для поддержки символов разных языков. В <body> помещается всё, что видно на сайте: текст, изображения, видео, кнопки. Это базовый скелет, с которым работают все веб-разработчики, и его можно изучить на MDN Web Docs.

Со временем мы добавим стили с CSS и интерактивность с JavaScript, но сначала важно освоить структуру. Ниже приведен список с ключевыми элементами структуры HTML :

<!DOCTYPE html>

  • Указывает тип документа, версия HTML5.
  • Должен быть в начале, например, <!DOCTYPE html>.

<html>

  • Корневой элемент, содержит всю страницу.
  • Обнимает <head> и <body>, например, <html> </html>.

<head>

  • Содержит метаданные, не видно посетителям.
  • Включает <title>, <meta charset="utf-8">, например, <head><title>Мой сайт</title></head>.

<title>

  • Заголовок страницы, отображается в вкладке браузера.
  • Пример: <title> Тестовая страница </title>.

<meta charset>

  • Описание: Устанавливает кодировку, обычно utf-8 для поддержки всех языков.
  • Пример: <meta charset="utf-8" />.

<body>

  • Содержит видимый контент: текст, изображения, видео.
  • Включает <h1>, <p>, <img>, например, <body><h1>Мой сайт</h1><p>Текст</p></body>.

<header>

  • Шапка сайта, например, с названием и логотипом.
  • Пример: <header> <h1> Мой сайт </h1> </header>.

<nav>

  • Навигационное меню, например, ссылки на разделы.
  • Пример: <nav> <a href="#"> Главная </a> </nav>.

<main>

  • Основное содержимое, только один на странице.
  • Пример: <main> <p> Добро пожаловать! </p> </main>.

<aside>

  • Боковые блоки, например, изображения или реклама.
  • Пример: <aside> <img src="sidebar.jpg"> </aside>.

<footer>

  • Подвал, например, копирайт или контакты.
  • Пример: <footer> © 2025 Мой сайт </footer>.

<section>

  • Логические разделы, например, новости или статьи.
  • Пример: <section> <h2> Новости </h2> <p> Новость дня </p> </section>.

<article>

  • Самостоятельные блоки, например, статьи блога.
  • Пример: <article> <h2> Моя статья </h2> <p> Текст статьи </p> </article>.

Заголовки (<h1>-<h6>)

  • Иерархия текста, от <h1> (главный) до <h6> (меньший).
  • Пример: <h1> Спецификация HTML </h1>, <h2> Раздел 1 </h2>.

Параграфы (<p>)

  • Блоки текста, с отступами сверху и снизу.
  • Пример: <p> Это мой первый параграф. </p>.

Попробуйте сами добавить любые теги из списка, сохраните файл, откройте его в браузере и посмотрите, как страница меняется! Это отличный способ разобраться, как каждый тег формирует структуру вашего сайта.