search

Какую структуру имеет веб-страница?

Веб-страница состоит из нескольких уровней, которые определяют её структуру, оформление и поведение. Структура строится вокруг HTML, CSS и JavaScript.

hashtag
1️⃣ HTML-структура (скелет страницы)

Основная структура HTML-документа выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Название страницы</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header>
    <h1>Заголовок сайта</h1>
    <nav>Меню</nav>
  </header>
  <main>
    <section>
      <h2>Раздел</h2>
      <p>Контент</p>
    </section>
    <article>
      <h2>Статья</h2>
      <p>Текст статьи</p>
    </article>
  </main>
  <footer>
    <p>Подвал сайта</p>
  </footer>
</body>
</html>

hashtag
Основные части:

  1. <!DOCTYPE html> — указывает браузеру, что документ HTML5.

  2. <html> — корневой элемент страницы.

  3. <head> — метаданные страницы: заголовок, подключение CSS/JS, метатеги.

  4. <body> — видимая часть страницы: текст, изображения, кнопки и т.д.

hashtag
2️⃣ Семантические блоки HTML

  • Header — шапка страницы, логотип, меню.

  • Nav — навигационное меню.

  • Main — основной контент страницы.

  • Section — тематический блок внутри main.

  • Article — отдельная статья или пост.

  • Footer — подвал сайта, контакты, копирайт.

  • Aside — боковая колонка, например, виджеты или реклама.

hashtag
3️⃣ CSS — оформление (вид)

  • Отделяет визуальный стиль от структуры.

  • Применяется к HTML-элементам через селекторы, классы и ID.

  • Позволяет задавать цвета, шрифты, расположение блоков, анимации.

hashtag
4️⃣ JavaScript — поведение (динамика)

  • Добавляет интерактивность: обработка кликов, динамическая подгрузка данных, валидация форм.

  • Может изменять HTML и CSS на лету (DOM-манипуляции).

hashtag
5️⃣ Иерархия и поток

  1. HTML формирует структуру и содержание.

  2. CSS накладывает стили на элементы HTML.

  3. JavaScript управляет поведением и динамикой.

PreviousЧто такое HTML/CSS/JavaScript?NextЗачем чистить кэш?

Last updated