**HTML для начинающих - Полный курс (2025). Урок №2:Теги для контента — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/html-beginners-full-course-2025-lesson-2-content-tags/
Урок о контентных тегах HTML: заголовки H1-H6, списки ul/ol, абзацы p, неразрывные пробелы, переносы, изображения img, ссылки a. Курс HTML для начинающих, урок 2.
## Chapters
1. 00:00 Введение и проблема схлопывания текста
2. 00:28 Заголовки H1-H6
3. 01:56 Списки ul и ol
4. 02:26 Абзацы, неразрывные пробелы и переносы
5. 03:24 Разделительная линия hr
6. 03:34 Изображения img
7. 04:21 Размер изображения и ссылки a
Answers
## Questions about this video
Почему браузер объединяет весь текст в одну строку?
HTML игнорирует обычные пробелы и переносы строк в исходном коде. Без тегов весь текст воспринимается как единый блок, и браузер переносит его только при достижении края экрана. Для структурирования используются специальные теги.
Как правильно использовать заголовки H1-H6?
H1 — самый главный заголовок страницы, отражающий её суть. H2 используется для блоков, H3 — внутри блоков с H2. Порядок должен соблюдаться строго по иерархии, а на практике редко используют даже H4.
Как добавить ссылку, которая открывается в новой вкладке?
Нужно использовать тег a с атрибутом href, указывающим адрес, и добавить атрибут target со значением \_blank. Тогда при клике ссылка откроется в новом окне, а исходный сайт останется открытым.
## Full Transcript — Download SRT & Markdown
00:00
Speaker A
Привет Сегодня разберём самые популярные теги для работы с контентом Готов давай начинать Я открыл проект первого урока и добавил вот этот контент если мы сейчас нажмём cter S Кстати чтобы притер который мы установили тоже на прошлом уроке не схлопнулась в Единый текст так
00:15
Speaker A
как без тегов всё что мы пишем в HTML это сплошной текст а я зашёл в настройки и на прошлом уроке мы устанавливали формат UN Save галочку здесь а я её сейчас убрал нажимаю cter S и Давайте откроем наш сайт в браузере и видим что
00:28
Speaker A
Несмотря на то что у нас в ходе установлены пробелы и переносы строк браузер это видит Как одну сплошную строку и переносит текст только там где уже заканчивается экран Давайте используем контентные теги чтобы наш контент отображался корректно на странице для заголовков в HTML
00:44
Speaker A
используется тег H H1 это самый главный заголовок на странице вообще в HTML шесть уровней заголовков то есть H1 H2 вход с помощью плагина emit может развернуть нам все шесть заголовков с помощью такой комбинации пишем H указываем знак доллара знак умножения и
01:00
Speaker A
после умножения количество элементов которые нам нужно нажимаем Tab и вот здесь он развернул нам шесть заголовков Давайте в каждый из них запишем контент и посмотрим как это выглядит в браузере для того чтобы поставить курсор в несколько мест зажимаем Alt и потом куда
01:14
Speaker A
кликаем там установится курсор нажимаем CS переходим в браузер обновляем страницу видим наш H1 H2 H3 H6 самый маленький H1 - это самый главный заголовок на странице он отображает всю суть сайта дальше заголовок H2 мы уже используем для заголовков внутри
01:29
Speaker A
отдельных блоков заголовок H3 используем внутри блока где уже есть заголовок H2 мы не можем рандомном порядке назначать заголовки заголовки идут строгой иерархии в связи с этим в реальной разработке самый маленький заголовок который я видел это был заголовок H4 и
01:45
Speaker A
то он встречался мне несколько раз поэтому и в наших примерах мы будем использовать только их Давайте здесь мы это удалим далее У нас идёт блок и заголовок блока со списками как я уже сказал ранее для заголовков блоков мы
01:56
Speaker A
используем г H2 для создания списков мы используем Тег Это для маркированного списка и ol для нумерованного у нажимаем Tab и внутри него То есть это родительский блок для списка а внутри него каждый пункт Меню мы оборачиваем то же в специальный тег он называется Le он
02:13
Speaker A
одинаковый и для ol списков и для UL Давайте скопирую у список только здесь у заменим на о притер Нам сейчас не помогает поэтому руками поправим и вот этот контент поместим сюда переходим в браузер и видим что у нас есть отдельный
02:26
Speaker A
блок с заголовком и двумя списками если мы добавим ещё несколько пунктов то вот так будет нагляднее выглядеть следующий блок - это у нас блок с текстом заголовок у него будет также H2 а Для текста мы используем г P каждый
02:38
Speaker A
абзац текста мы кладём внутрь тега P нажимаем cter S переходим в браузер теперь каждая строка обёрнутый абзацам который имеет между собой отступы но как вы можете заметить пробелов и переноса не произошло для того чтобы поставить длинный пробел между словами мы можем использовать либо
02:56
Speaker A
специальный символ либо использовать CSS так как до CSS мы ещё не дошли Давайте используем специальный символ записывается он следующим образом ставим амперсанд NB SP и точка запятой каждый такой символ добавляет один неразрывный пробел Пустим у нас будет пять пробелов
03:12
Speaker A
если захотим больше копируем всё сразу вставляем обновляем и видим что у нас теперь уже 10 пробелов между словами следующий блок - это блок с переносом текста и здесь мы используем тег б пишем б нажимаем Tab переходим в браузер и
03:24
Speaker A
теперь после слов вот здесь идёт перенос текста на следующую строку также мы можем указывать такую Разде делительную черту с помощью тега HR зайдём в браузер видим теперь у нас наглядно блоки разделены переходим к следующему блоку заголовок у него будет также H2 и вот
03:39
Speaker A
если в этом блоке Нам нужен подзаголовок используем тег H3 для подзаголовка теперь добавление изображения здесь мы Этот текст уже можем удалить добавляем изображение с помощью тега AMG нажимаем Tab добавляются ещё два атрибута src - это источник то есть мы должны указать
03:54
Speaker A
Откуда мы хотим получить картинку а Alt - это альтернативный текст если мы здесь ничего не укажем в src или укажем неправильный путь то браузер выведет альтернативный текст хорошая практика всегда что-то писать Аль Давайте добавим изображение в наш проект для этого я с
04:08
Speaker A
рабочего стола просто перетащил в проект какое-то изображение и теперь так как наш индекс HTML и превьюшка находится на одном уровне я могу просто написать название файла Ну вот VC уже подсказывает нажимаем Tab для того чтобы здесь эта иконка отображалась нужно
04:21
Speaker A
установить расширение Image preview оно называется вот так выглядит устанавливаете и тоже когда будете подключать картинку будете видеть эту иконку это очень удобно сразу можно видеть правильный путь или нет Давайте в альтернативном тексте напишем что это preview переходим в браузер обновляем и
04:35
Speaker A
видим что наша картинка успешно добавлена также и заголовок и подзаголовок Вот видите H3 уже меньше шрифтом и не такой жирный как H2 сейчас картинка огромная она занимает больше чем даже ширина экрана моего Всё потому что картинка если мы не задаём ей размер
04:51
Speaker A
будет занимать ровно столько места какой у неё размер по умолчанию для того чтобы уменьшить её и задать нам необходимый размер Мы можем здесь использовать свойства vz пикселей наша картинка занимает 400 пикселей а высота рассчиталась автоматически и последний блок блок с ссылками заголовок у него
05:08
Speaker A
также будет H2 и Также как для картинок для добавления ссылки на страницу используется специальный тег тег а нажимаем Tab здесь внутри тега А мы должны прописать какой-то текст по клику на который будет что-то происходить наша ссылка будет вести на YouTube видео и
05:22
Speaker A
вот в атрибут хф мы должны указать ссылку на это видео я укажу ссылку на своё первое видео у вас это может быть абсолютно любая ссылка и Давайте перейдём в браузер обновим видим нашу ссылку YouTube видео кликаем и всё
05:34
Speaker A
открылось а но сейчас Вы видите что мы покинули наш сайт и в этом окне открылся другой сайт чтобы этого не происходило мы должны прописать атрибут который называется Target со значением Blank обновляем страницу кликаем и теперь Наше видео открывается в новом окне а наш
05:49
Speaker A
сайт остаётся в том окне в котором он и был теперь ты можешь наполнить сайт практически любым контентом и он будет корректно отображаться на странице в следующем уроке мы изучим строительные теги и разберёмся в разнице между между блочными и строчными тегами подписывайся
06:02
Speaker A
на канал увидимся в следующем видео
Topics: HTML теги заголовки H1-H6 списки ul ol изображения img ссылки a верстка для начинающих Emmet
Учить по этому видео
- [Карточки по этому видео](https://sozai.app/ru/tools/flashcard-maker/?from=transcript&id=91389)
- [Тест по этому видео](https://sozai.app/ru/tools/quiz-generator/?from=transcript&id=91389)
- [Краткое содержание этого видео](https://sozai.app/ru/youtube-video-summarizer/?from=transcript&id=91389)
- [Кроссворд по этому видео](https://sozai.app/ru/tools/crossword-maker/?from=transcript&id=91389)
- [Филворд по этому видео](https://sozai.app/ru/tools/word-search-maker/?from=transcript&id=91389)
- [Шпаргалка по этому видео](https://sozai.app/ru/tools/study-guide-maker/?from=transcript&id=91389)
Бесплатно, составлено ИИ по этой расшифровке. Без регистрации.
---
This is the markdown twin of https://sozai.app/transcript/html-beginners-full-course-2025-lesson-2-content-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/