**HTML для начинающих - Полный курс (2025). Урок №3: Структурные теги — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/html-beginners-full-course-2025-lesson-3-structural-tags/

Урок по HTML для начинающих: как создать структуру сайта с помощью header, nav, main, footer и div, а также разница между блочными и строчными тегами.

## Key Takeaways

- Структурные теги header, nav, main, footer задают каркас сайта и улучшают читаемость, SEO и доступность
- Тег div объединяет контент в блоки и применяется, когда нет подходящего семантического тега
- Блочные теги занимают всю ширину и поддерживают любые отступы, строчные занимают только нужное место и не могут содержать блочные теги

## What the video covers

- Объясняется, зачем нужна структура страницы: читаемость кода, стилизация через CSS, доступность для людей с ограниченными возможностями и SEO
- Тег header используется для шапки сайта с логотипом и навигацией
- Тег nav служит контейнером для навигационного меню, внутри которого создаётся список ссылок
- Тег main оборачивает основной контент страницы, footer создаёт подвал сайта
- Тег hr используется для визуального разделения блоков страницы
- Универсальный тег div применяется для объединения контента в логические блоки: о нас, услуги, отзывы, контакты
- Показано создание ссылок tel: и mailto: для звонка и отправки письма
- Блочные теги занимают всю ширину родителя и начинаются с новой строки, строчные занимают только нужное место
- Для строчных тегов нельзя задать ширину и высоту, а внутри строчных тегов нельзя вкладывать блочные (кроме a в HTML5)
- Тег span — универсальный строчный тег для оформления фрагментов текста, а тег em — для курсива

## Chapters

1. 00:00 Введение и проблемы без структуры
2. 00:42 Создание шапки сайта и навигации
3. 02:08 Основной контент и подвал сайта
4. 02:55 Разбиение контента на блоки с div
5. 04:22 Ссылки для звонка и почты
6. 05:48 Блочные и строчные теги
7. 07:56 Тег span и выделение текста

Answers

## Questions about this video

Какие структурные теги рассматриваются в уроке?

В уроке рассматриваются header для шапки, nav для навигации, main для основного контента и footer для подвала сайта. Также используется hr для визуального разделения блоков.

Почему важно использовать структурные теги?

Они улучшают читаемость кода, упрощают стилизацию через CSS, помогают голосовым помощникам для людей с ограниченными возможностями и повышают ранжирование сайта в поиске.

В чём разница между блочными и строчными тегами?

Блочные теги занимают всю ширину родителя и начинаются с новой строки, а строчные занимают только необходимое место. Для строчных тегов нельзя задать ширину и высоту, а внутри них нельзя размещать блочные теги, кроме тега a в HTML5.

## Full Transcript — Download SRT & Markdown

00:00

Speaker A

Привет На прошлом уроке мы разобрали базовые теги для работы с контентом А сегодня научимся создавать структуру сайта а также разберёмся В чём разница между блочными и строчными тегами готов Давай начинать сейчас ситуация такая мы обернули контент контентные теги но сами

00:15

Speaker A

контентные теги Просто разбросаны внутри тега Body то есть не имеют никакой структуры Какие в связи с этим возникают проблемы Первое - это проблема читаемости Кодак сейчас контента на странице мало И нам всё равно уже приходится всматриваться в код чтобы

00:29

Speaker A

понять где начинается конкретно блока где он заканчивается когда кода станет больше сделать это будет ещё труднее вторая проблема - это проблема стилизации кода Когда мы будем писать CSS код Нам нужно будет обращаться к HTML элементам и как-то расставлять их

00:42

Speaker A

на страницы для этого как раз нам нужно будет оборачивать контентные теги внутрь структурных тегов третья проблема - это проблема доступности люди с ограниченными возможностями используют голосовые помощники которые находят семантические теги в коде и озвучивают содержимое четвёртая проблема - это

00:56

Speaker A

проблема SEO без правильных структурных тегов наш сайт будет хуже ранжировать при Давайте исправим это и создадим структуру сайта для этого изучим несколько строительных тегов начнём с первого структурного тега - это тег header тег header используется для создания шапки сайта в шапке сайта

01:10

Speaker A

обычно содержится логотип и навигация для создания логотипа чаще всего используют ссылку напишем что это логотип в шапке находится меню сайта Давайте его создадим для этого используется тег Nav тег Nav - это контейнерный тег для навигации по сайту внутри T naf мы должны создать список

01:28

Speaker A

давайте уже имеющийся у нас вот этот этот список заберём и вставим его в навигацию только вместо текста сделаем ссылку а уже внутри ссылок напишем Ну допустим давайте сделаем сайт Web студии первая ссылка будет вести на блок о нас

01:42

Speaker A

вторая на услуги третья на отзывы и добавим ещё четвёртую она будет вести на блок контакты сейчас заметил что притер не работает забыл что мы его отключили На прошлом уроке опять же в настройках ставим формат UN Save галочку и теперь

01:55

Speaker A

при сохранении притер Будет нам помогать форматировать код всё отлично притер работает Давайте смотрим Что у нас сейчас происходит перезагружаем страницу и видим шапку сайта У нас появился логотип Web studia и панель с навигацией предлагаю после шапки поставить HR

02:10

Speaker A

Смотрим Да всё у нас теперь визуально шапка отделена и после HR у нас начинается основной контент основной контент мы должны обернуть в тег Main и поэтому всё что у нас лежало внутри габо Теперь мы засовывая внутрь тега Main в

02:23

Speaker A

браузере мы никаких изменений не увидим Но теперь у нас есть чёткая структура сайта шапка сайта У нас есть основной контент и Давайте создадим подвал сайта для этого используем фур гфр - это подвал сайта в подвале тоже может быть

02:37

Speaker A

навигация или просто какая-то справочная информация Давайте напишем там все права защищены также предлагаю после Main поставить T HR чтобы визуально разделить нашу страницу после основного контента также видим разделение по сути всё основная структура сайта готова с помощью всего трёх тегов мы этого

02:55

Speaker A

добились но сейчас проблема в том что внутри тега Main у нас просто разбросанные теги без без какой-либо структуры Давайте это исправим и внутри Tag Main тоже наведём порядок Мы решили что у нас будет в навигации четыре такие ссылки соответственно у нас должно быть

03:09

Speaker A

и в теге Main четыре таких блока блок АС услуги отзывы и контакты для разбития контента на блоке используется универсальный г div в любой ситуации когда нам нужно объединить контент внутрь какого-то блока мы используем г div У нас есть заголовок H1 Давайте его

03:24

Speaker A

скопирую положим в div и это будет блок о нас соответственно здесь мы внутри можем написать что это лучшая веб-студия в России отлично первый блок мы сделали Давайте перейдём к второму блоку блоку услуги также пишем Tag div и вот этот

03:38

Speaker A

заголовок H2 копируем вставляем сюда а заголовок услуги и Давайте вот этот список возьмём положим внутрь блок услуг только текст заменим на услуга блоки можно удобно сворачивать после того как мы их закончили следующий блок отзывы также пишем div копируем заголовок

03:54

Speaker A

вставляем сюда отзывы Давайте вот один тег P скопирую остальные удалим Будем считать что это текст с каким-то отзывам о нашей работе так третий блок тоже готов T HR нам здесь не нужен После отзывов у нас идёт блок контакты также

04:07

Speaker A

пишем div связаться с нами так заголовок связаться с нами вот этот вот этот весь контент Мы можем сейчас удалить а ссылку можем использовать саму ссылку в хрф Мы удалим а здесь напишем телефон пишем двоеточия и указываем номер телефона а в

04:22

Speaker A

самой ссылке напишем позвонить и также сделаем ещё одну ссылку Только уже С почтой для этого пишем mail to mail to двоеточия и указываем почту теперь по клику на первую ссылку мы сможем позвонить по указанному вот здесь телефону обязательно он должен быть без

04:37

Speaker A

пробелов кавычек и так далее а по клику на вторую ссылку сможем написать на указанную почту Давайте сохраним наш сайт перейдём в браузер и посмотрим что у нас получилось у нас есть шапка сайта отделена от основного контента основной контент начинается с первого блока

04:50

Speaker A

лучшая веб-студия в России второй блок начинается с заголовка услуги и список услуг третий блок - это у нас отзывы также заголовок и какой-то отзыв а четвёртый блок контакты Ну либо связаться с нами как я его назвал и и в

05:04

Speaker A

нём две ссылки позвонить или написать к следующему уроку или через урок я подготовлю макет и весь контент возьмём оттуда то есть текст ссылки Всё будет как на настоящем сайте отлично со структурой разобрались Давайте разберёмся В чём разница между блочными

05:17

Speaker A

и строчными элементами из уже изученных нами тегов блочными тегами являются все вот эти теги строчными являются только ссылки в чём основная разница между блочными и строчными тегами блочный тег всегда занимает всю ширину родителя независимо от того сколько контента

05:32

Speaker A

внутри него находится у нас есть заголовок он занимает всю ширину экрана То есть он заканчивается Вот здесь неважно сколько сколько текста внутри тега H1 теги следующие за ним уже будут начинаться с новой строки каждый блочный трек начинается с новой строки строчные

05:48

Speaker A

же теги такие как тег а они занимают ровно столько места на странице сколько требуется контенту внутри этого тега из-за того что строчные теги занимают только то место которое нужно контенту они вы устраиваются вряд на страницы до тех пор пока им будет хватать места

06:03

Speaker A

Давайте увеличим количество ссылок просто продублируйте и вот этот текст вернём в тег P и сделаем ещё несколько таких тегов то каждый текст будет начинаться с новой строки потому что тег P занимает всю ширину родителя также происходит с пунктами меню каждый пункт Меню - это

06:23

Speaker A

тегли и каждый тегли занимает всю ширину родителя а контент внутри тега Le у нас ссылка и она занимает ровно столько место Сколько ей нужно так давайте это удалим ещё разница между блочными и строчными тегами заключается в том что

06:36

Speaker A

блочным тегам мы можем задавать в стилях ширину и высоту и различные внутренние отступы внешние отступы границы и так далее а для строчных тегов мы не сможем задать ни ширину ни высоту и отступы будут работать только слева справа сверху снизу не будут работать но с

06:50

Speaker A

написанием стилей мы разберёмся позже когда перейдём к CSS сейчас важно запомнить ещё одно правило что внутри блочных тегов мы можем писать любые теги мы можем вкладывать внутрь блочного тега и другие блочные теги и строчные теги А вот внутрь строчного тега мы не можем

07:05

Speaker A

класть блочные теги за исключением тега ссылка в html5 Появилась возможность оборачивать любые другие блочные теги Ну давайте познакомимся с ещё одним строчный тегом это тег span пишется он вот так и он такой же универсальный как и Tag div только div у нас для создания

07:21

Speaker A

структуры а Tag span используется для того чтобы оборачивать какой-то текст если нам нужно каким-то образом выделить текст на странице сделать более жирным сделать его с курсив наклоном или перечеркнуть текст в общем любое изменение текста внутри блока для этого

07:35

Speaker A

можно использовать T span если span - это универсальный тег который мы обернули текст и потом Обращаемся с помощью либо CSS либо с помощью JavaScript к этому тегу и уже что-то с ним делаем то HTML есть встроенные теги которые уже имеют в стили по умолчанию

07:49

Speaker A

То есть если нам нужно выделить жирным текст мы оборачиваем текст Text STR смотрим и наш текст здесь жирный уже если мы хотим какой-то текст выделить бэкграунда мы оборачиваем кусок текста в Tag Mark и видим что у нас текст выделен

08:03

Speaker A

жёлтым Ну вернее Граунд сам цвет текста не изменился но Граунд то есть задний фон на у этого текста окрашен в жёлтый если мы хотим сделать текст курсивным то мы можем использовать ТГ em и вот этот текст допустим положим внутрь тега м и

08:17

Speaker A

видим что текст теперь написан Курси курсивным шрифтом сейчас вот эти теги как е Mark STR и так далее запоминать необязательно важно запомнить универсальный тег span как строчный тег и важно запомнить что внутрь бло тегов мы можем класть строчные теги А внутрь

08:32

Speaker A

строчных тегов блочные теги уже не можем класть за исключением тега А теперь ты умеешь строить структуру сайта и знаешь разницу между блочными и строчными тегами на следующем уроке мы научимся добавлять формы на сайт подписывайся на канал Ставь лайк увидимся в следующем

08:48

Speaker A

видео

Topics: HTML структурные теги header nav main footer блочные элементы строчные элементы верстка веб-разработка

Учить по этому видео

- [Карточки по этому видео](https://sozai.app/ru/tools/flashcard-maker/?from=transcript&id=91414)
- [Тест по этому видео](https://sozai.app/ru/tools/quiz-generator/?from=transcript&id=91414)
- [Кроссворд по этому видео](https://sozai.app/ru/tools/crossword-maker/?from=transcript&id=91414)
- [Филворд по этому видео](https://sozai.app/ru/tools/word-search-maker/?from=transcript&id=91414)
- [Шпаргалка по этому видео](https://sozai.app/ru/tools/study-guide-maker/?from=transcript&id=91414)

Бесплатно, составлено ИИ по этой расшифровке. Без регистрации.


---
This is the markdown twin of https://sozai.app/transcript/html-beginners-full-course-2025-lesson-3-structural-tags/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/