МОДУЛ 01 / ОСНОВИ НА УЕБ

HTML5 — структура и семантика

Научи как да организираш съдържанието на уебстраница с HTML5 елементи, които описват неговото предназначение.

HTML5Интерактивен урок12. клас

01 / НАУЧИ

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

HTML определя структурата и значението на съдържанието. Един HTML5 документ започва с декларацията<!DOCTYPE html>.

Елементът <head> съдържа метаданни, а <body> — съдържанието, което браузърът визуализира.

СЕМАНТИЧНИ ЕЛЕМЕНТИ

HTML описва смисъла

header — въвеждаща част.

nav — навигационни връзки.

main — основно съдържание.

section — тематичен раздел.

footer — завършваща част.

02 / РАЗГЛЕДАЙ

От структура към уебстраница

Разгледай как семантичните елементи организират съдържанието на примерна страница за училищен клуб.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<header>
  <h1>Клуб по роботика</h1>
  <p>Откриваме технологиите заедно.</p>
</header>

<nav aria-label="Основна навигация">
  <a href="#about">За клуба</a>
  <a href="#activities">Дейности</a>
</nav>

<main>
  <section id="about">
    <h2>За клуба</h2>
    <p>Учим се да създаваме роботи.</p>
  </section>

  <section id="activities">
    <h2>Нашите дейности</h2>
    <p>Програмиране и експерименти.</p>
  </section>
</main>

<footer>
  <p>Клуб по роботика · 2026</p>
</footer>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #182235;
  background: #eef2f8;
}

header, footer {
  padding: 24px;
  background: #17243b;
  color: white;
}

nav {
  display: flex;
  gap: 20px;
  padding: 16px 24px;
  background: #d52f38;
}

nav a {
  color: white;
}

main {
  padding: 24px;
}

section {
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 12px;
}

03 / ПРОМЕНИ

Експериментирай със структурата

В демонстрационния редактор промени заглавията, добави нов раздел и наблюдавай резултата. Опитай да замениш някой семантичен елемент с div и сравни значението на двата подхода.

04 / СЪЗДАЙ

Страница за училищен клуб

Избери училищен клуб и създай собствена семантична HTML страница.

Изисквания към задачата

Използвай header с основно заглавие h1.
Добави nav с навигационни връзки.
Организирай съдържанието в main.
Създай поне две section със заглавия h2.
Завърши страницата с footer.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<header>
  <h1>Моят училищен клуб</h1>
</header>

<nav>
  <a href="#about">За нас</a>
</nav>

<main>
  <section id="about">
    <h2>За клуба</h2>
    <p>Представи своя клуб.</p>
  </section>
</main>

<footer>
  <p>Моят училищен клуб</p>
</footer>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #eef2f8;
  color: #182235;
}

header, footer {
  padding: 20px;
  background: #17243b;
  color: white;
}

nav, main {
  padding: 20px;
}

section {
  padding: 20px;
  background: white;
  border-radius: 12px;
}

Промените се запазват локално в браузъра. Демонстрационният и проектният редактор са независими.

05 / ПРОВЕРИ

Провери семантичната структура на своята страница.

Резултатите ще се появят тук след проверката.