Теги структуры страницы. Семантические теги

Last updated: 9 мая 2025 г.

Все видели классическую структуру страницы:

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

Для этих частей есть специальные теги, которые называются семантическими:

<section> – основной контент,
<aside> – это боковые секции,
<header> – это верхняя часть,
<footer> – нижняя часть,
<nav> – панель навигации.

Сами по себе эти теги ничего не делают. Но их названия уже говорят много о структуре страницы человеку, который в первый раз смотрит на html код страницы. То есть они типа div только со специальными названиями.

Эти теги тоже нужно настраивать с помощью css.

1header {
2/* сделаем отступы внутри секции header. */
3    padding: 10px;
4/* зададим цвет секции header. */
5    background: #aaf6a1;
6}
7
8nav {
9/* делаем отступы секции навигации */
10    margin: 10px;
11    padding: 10px;
12/* зададим цвет секции nav */
13    background: #f1f1a1;
14}
15
16section {
17/* Делаем чтобы section и aside были в ряд.
18   То есть чтобы было обтекание section справа */
19    float: left;
20/* задаем ширину section */
21    width: 75%;
22/* задаем высоту section */
23    height: 600px;
24/* зададим цвет секции section */
25    background: #b99999;
26}
27
28aside {
29/* то же самое здесь */
30    float: left;
31/* задаем ширину aside */
32    width: 25%;
33/* задаем высоту aside */
34    height: 600px;
35/* зададим цвет секции aside */
36    background: #c1f1e1;
37}
38
39footer {
40/* Предыдущие два блока обтекали друг друга.
41   На footer нужно остановить обтекание.
42   both значит запрет обтекания footer секции
43   другими элементами с обеих сторон. */
44    clear: both;
45/* зададим цвет секции footer */
46    background: #d11777;
47}
48
49/* ниже из прошлых уроков */
50
51.divblock {
52/* Основные параметры div-блока */
53    width: 410px;
54    height: 300px;
55    background: #f1f1f1;
56    float: left;
57    margin: 0 15px 15px 0;
58    text-align: center;
59    padding: 5px 15px 15px 5px;
60    box-shadow: 5px 10px #888888;
61}
62
63.imagePropsClass {
64/* Определяем размеры изображений */
65    width: 400px;
66    height: 170px;
67}
68
69h1, h2 {
70/* Стиль заголовков */
71    font-weight: 600;
72    font-family: ‘Brush Script MT’, cursive;
73}
74
75h3 {
76/* Шрифт заголовков h3 */
77    font-weight: 600;
78    font-family: ‘Courier New’, monospace;
79}
80
81img {
82/* Стилизация изображений */
83    border-style: dashed;
84    border-color: red;
85    border-radius: 15px;
86}

Вот и сама страница с тегами структуры, к которым будут применены только что определенные стили.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>HTML Basics</title>
6    <link rel="stylesheet" href="C:\HTML\style.css" />
7</head>
8<body>
9    <header>
10        <p align="center">header часть страницы.
11        В ней может быть логотип панель навигации</p>
12        <nav>
13            nav часть страницы. здесь элементы
14            навигации по сайту
15        </nav>
16    </header>
17    <section>
18        <p align="center">section часть. здесь основной
19        контент страницы</p>
20    </section>
21    <aside>
22        <p align="center">aside часть. здесь может быть
23        меню, реклама и тд</p>
24    </aside>
25    <footer>
26        <p align="center">footer часть. здесь обычно
27        ссылки на соцсети, поддержку и т.д.</p>
28    </footer>
29</body>
30</html>

Давайте откроем только что написанную страницу в браузере.

Видим всем знакомую структуру страницы. Таким образом с помощью структурных тегов можно выстраивать структуру страницы

Структура страницы с помощью div.

Но зачастую специальные теги секций не используются (хотя лучше использовать) , а используются просто div вместо них.

Для каждого div отвечающего за какую-либо секцию создаются классы с соответствующими названиями.

1.header {
2    /* Делаем отступы внутри
3       блока div, на который будет
4       применен класс header. */
5    padding: 10px;
6    /* Зададим цвет этому div. */
7    background:#aaf6a1;
8}
9
10.nav {
11    /* Делаем отступы блоку div,
12       на который будет применен
13       класс header nav. */
14    margin: 10px;
15    padding: 10px;
16    /* Зададим цвет этому div. */
17    background:#f1f1a1;
18}
19
20.mainSection {
21    /* Делаем так, чтобы блоки div, на которые
22       будут применены классы mainSection и
23       aside, были в ряд. То есть чтобы было
24       обтекание блока div
25       с классом mainSection. */
26    float: left;
27    /* Задаем ширину этому div. */
28    width: 75%;
29    /* Задаем высоту этому div. */
30    height: 600px;
31    /* Зададим цвет этому div. */
32    background:#b99999;
33}
34
35.aside {
36    /* Все то же самое здесь с блоком div,
37       на который будет применен класс aside. */
38    float: left;
39    width: 25%;
40    height: 600px;
41    /* Зададим цвет этому div. */
42    background:#f1fee1;
43}
44
45.footer {
46    /* Предыдущие два блока обтекали
47       друг друга. На div, к которому будет
48       применен класс footer, нужно остановить
49       обтекание. Both значит запрет
50       обтекания этого div другими
51       элементами с обеих сторон. */
52    clear: both;
53    /* Зададим цвет этому div. */
54    background:#d11777;
55}
56
57/* Ниже из прошлых уроков */
58
59.header {
60    padding: 10px;
61    background:#aaf6a1;
62}
63
64.nav {
65    margin: 10px;
66    padding: 10px;
67    background:#f1f1a1;
68}
69
70.mainSection {
71    float: left;
72    width: 75%;
73    height: 600px;
74    background:#b99999;
75}
76
77.aside {
78    float: left;
79    width: 25%;
80    height: 600px;
81    background:#f1fee1;
82}
83
84.footer {
85    clear: both;
86    background:#d11777;
87}
88
89.divblock {
90    width: 410px;
91    height: 300px;
92    background:#f1f1f1;
93    float: left;
94    margin: 0 15px 15px 0;
95    text-align: center;
96    padding: 5px 15px 15px 5px;
97    box-shadow: 5px 10px #888888;
98}
99
100.imagePropsClass {
101    width: 400px;
102    height: 170px;
103}
104
105h1, h2 {
106    font-weight: 600;
107    font-family:’Brush Script MT’, cursive;
108}
109
110h3 {
111    font-weight: 600;
112    font-family: ‘Courier New’, monospace;
113}
114
115img {
116    border-style: dashed;
117    border-color: red;
118    border-radius: 15px;
119}

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>HTML Basics</title>
6    <link rel="stylesheet" href="C:\HTML\style.css" />
7</head>
8<body>
9    <div class="header">
10        <p align="center">header часть страницы. 
11         В ней должен быть логотип, панель навигации</p>
12        <div class="nav">
13            nav часть страницы. здесь элементы навигации по сайту
14        </div>
15    </div>
16
17    <div class="mainSection">
18        <p align="center">section часть. здесь основной контент страницы</p>
19    </div>
20
21    <div class="aside">
22        <p align="center">aside часть. здесь может быть меню, реклама и т.д.</p>
23    </div>
24
25    <div class="footer">
26        <p align="center">footer часть. 
27         здесь обычно ссылки на соцсети, поддержку и т.д.</p>
28    </div>
29</body>
30</html>