6. Популярные теги

Видео на Rutube

Здравствуйте, дорогие студенты! Добро пожаловать на шестой урок нашего курса. На предыдущих уроках мы изучили основы HTML, структуру документа, теги заголовков, а также разобрались с пробелами, переносами строк и комментариями.

Сегодня мы с вами сделаем еще один важный шаг и познакомимся с популярными HTML-тегами, которые очень часто используются при создании практически любой веб-страницы. Эти теги – как строительные блоки, из которых складывается контент вашего сайта. Понимание их назначения и правильное использование значительно расширит ваши возможности в веб-разработке.

В этом уроке мы подробно рассмотрим следующие популярные HTML-теги:

<p> – для создания абзацев текста.
<strong> – для выделения важного текста жирным шрифтом.
<i> – для выделения текста курсивом.
<blockquote> – для оформления длинных цитат.
<hr> – для создания горизонтальной линии-разделителя.
<div> – универсальный контейнер для группировки элементов.

Давайте разберем каждый из этих тегов пошагово и посмотрим, как они работают!

Подготовка к уроку

Для начала, как обычно, подготовим рабочее пространство для нашего урока.

Создайте новую папку для урока. На рабочем столе или в удобном для вас месте создайте новую папку и назовите ее lesson_6.
Внутри папки lesson_6 создайте новый файл и назовите его elements.html. Убедитесь, что файл имеет расширение .html.

Теперь файл elements.html готов к тому, чтобы мы начали изучать популярные HTML-теги.

Тег `<p>` – Параграф

Тег <p> (от англ. paragraph – абзац) – это один из самых фундаментальных и часто используемых HTML-тегов. Он предназначен для создания абзацев текста на веб-странице. Любой текст, который вы хотите представить в виде отдельного абзаца, должен быть заключен в теги <p> и </p>.

Особенности тега `<p>`:

Семантика: Тег <p> имеет семантическое значение – он явно сообщает браузеру и другим программам (например, поисковым системам, программам чтения с экрана), что заключенный в нем текст является отдельным абзацем контента.
Блочный элемент: <p> является блочным элементом. Это означает, что каждый абзац, созданный с помощью <p>, будет отображаться на новой строке и занимать всю доступную ширину родительского элемента (обычно ширину окна браузера или родительского <div>). Браузер автоматически добавляет отступы сверху и снизу от абзацев, чтобы визуально отделить их друг от друга.
Автоматические отступы: Браузеры по умолчанию применяют к тегам <p> стандартные CSS-стили, включая верхний и нижний отступы (margin). Это обеспечивает визуальное разделение абзацев и делает текст более читабельным. Вы можете изменить эти стили с помощью CSS, но по умолчанию абзацы выглядят разделенными.

Пример использования тега `<p>`:

Откройте файл elements.html в текстовом редакторе и добавьте базовую структуру HTML-документа.

В секцию <body> добавьте несколько тегов <p> с различным текстом. Скопируйте или введите следующий код в файл elements.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Популярные теги</title>
</head>
<body>
    <h1>Популярные теги HTML</h1>

    <p>Это первый абзац текста на нашей веб-странице. Тег &lt;p&gt; используется для создания абзацев. Абзацы помогают структурировать текст и делают его более читабельным.</p>

    <p>Это второй абзац. Вы можете добавлять сколько угодно абзацев на страницу. Каждый абзац будет отображаться на новой строке и будет визуально отделен от соседних элементов.</p>

    <p>Этот абзац демонстрирует, как теги &lt;p&gt; помогают организовать текстовый контент в логические блоки.</p>
</body>
</html>

Сохраните файл elements.html и откройте его в браузере. Сохраните изменения и откройте файл в веб-браузере.

Результат:

Вы увидите, что на странице отображается заголовок <h1> "Популярные теги HTML", а под ним – три абзаца текста, каждый из которых создан с помощью тега <p>. Вы заметите, что абзацы визуально разделены вертикальными промежутками (отступами) и каждый абзац начинается с новой строки.

Инструменты разработчика:

Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Выберите любой из тегов <p>. Посмотрите на вкладку "Styles" или "Computed" – вы увидите, что браузер применяет к тегам <p> CSS-свойства display: block и margin-block-start, margin-block-end, которые и отвечают за блочное отображение и автоматические отступы абзацев.

В заключение о теге `<p>`:

Тег <p> – это основа для представления текстового контента на веб-страницах. Используйте его всегда, когда вам нужно создать абзац текста. Это сделает ваш HTML-код семантически правильным и улучшит читабельность вашего веб-сайта.

Тег `<strong>` – Важный текст (Жирный шрифт)

Тег <strong> (от англ. strong emphasis – сильное выделение) используется для выделения важных частей текста жирным шрифтом. Этот тег подчеркивает семантическую важность выделенного текста, сообщая, что этот текст имеет особое значение в контексте окружающего контента.

Особенности тега `<strong>`:

Семантика: Тег <strong> имеет семантическое значение. Он указывает, что выделенный текст является важным, значимым, требующим особого внимания. Программы чтения с экрана и поисковые системы интерпретируют <strong> как указание на важность контента.
Визуальное отображение: Браузеры по умолчанию отображают текст, заключенный в теги <strong>, жирным шрифтом (bold). Однако, визуальное отображение – это лишь следствие семантической роли тега, а не его основная функция. Вы можете изменить визуальное отображение <strong> с помощью CSS, но его семантическое значение при этом не изменится.
Вложенность: Тег <strong> может быть вложен в другие текстовые теги, такие как <p>, <h1>-<h6>, <span> и т.д.

Пример использования тега `<strong>`:

Вернитесь к файлу elements.html в текстовом редакторе.

Добавьте теги <strong> в текст первого параграфа, чтобы выделить слово "абзацев" как важное. Измените первый параграф следующим образом:

<p>Это первый абзац текста на нашей веб-странице. Тег &lt;p&gt; используется для создания <strong>абзацев</strong>. Абзацы помогают структурировать текст и делают его более читабельным.</p>

Сохраните файл elements.html и обновите страницу в браузере.

Результат:

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

Инструменты разработчика:

Откройте инструменты разработчика (F12) и выберите тег <strong>. На вкладке "Styles" или "Computed" вы увидите CSS-свойство font-weight: bold, которое браузер применяет к тегу <strong> по умолчанию.

В заключение о теге `<strong>`:

Используйте тег <strong> для выделения важных слов и фраз, которые вы хотите подчеркнуть семантически и визуально выделить жирным шрифтом. Помните, что <strong> – это семантический тег, и его основная цель – указать на важность контента, а визуальное отображение жирным шрифтом – это стандартное, но не единственное возможное, представление важности. Для чисто визуального выделения текста жирным шрифтом, без семантического значения, лучше использовать CSS-стили (например, font-weight: bold в CSS), а не тег <strong>.

Тег `<i>` – Курсив (Идиоматический текст)

Тег <i> (от англ. idiomatic text – идиоматический текст) используется для выделения текста курсивом. Исторически тег <i> был предназначен только для визуального отображения курсивом, но в HTML5 он приобрел семантическое значение. Теперь тег <i> используется для обозначения текста, который отличается от обычного текста по тону или настроению, например:

Технические термины
Иностранные слова
Мысли или внутренние монологи
Названия книг, фильмов, произведений искусства
Текст в идиоматическом тоне

Особенности тега `<i>`:

Семантика: Тег <i> имеет семантическое значение, хотя и менее сильное, чем <strong>. Он указывает, что выделенный текст имеет отличающийся тон или идиоматический характер.
Визуальное отображение: Браузеры по умолчанию отображают текст, заключенный в теги <i>, курсивом (italic). Как и в случае с <strong>, визуальное отображение – это вторично по отношению к семантике. Вы можете изменить визуальное отображение <i> с помощью CSS, но его семантическое значение останется прежним.
Вложенность: Тег <i> также может быть вложен в другие текстовые теги.

Пример использования тега `<i>`:

Вернитесь к файлу elements.html в текстовом редакторе.

Добавьте теги <i> в текст второго параграфа, чтобы выделить фразу "новой строке" курсивом. Измените второй параграф следующим образом:

<p>Это второй абзац. Вы можете добавлять сколько угодно абзацев на страницу. Каждый абзац будет отображаться на <i>новой строке</i> и будет визуально отделен от соседних элементов.</p>

Сохраните файл elements.html и обновите страницу в браузере.

Результат:

Вы увидите, что фраза "новой строке" во втором параграфе теперь отображается курсивом.

Инструменты разработчика:

Откройте инструменты разработчика (F12) и выберите тег <i>. На вкладке "Styles" или "Computed" вы увидите CSS-свойство font-style: italic, которое браузер применяет к тегу <i> по умолчанию.

Важное различие между `<i>` и `<em>`:

В HTML также есть тег <em> (от англ. emphasis – ударение, акцент), который также часто отображается курсивом браузерами по умолчанию. В чем разница между <i> и <em>?

<em> (emphasis – ударение, акцент): Используется для обозначения смыслового ударения, акцента на слове или фразе. Это подчеркивает важность выделенного текста в контексте предложения, но менее сильную, чем <strong>. Программы чтения с экрана могут по-разному интонировать текст, заключенный в <em>, чтобы передать этот акцент. Семантически, <em> – это логическое выделение текста.
<i> (idiomatic text – идиоматический текст): Используется для обозначения текста, отличающегося по тону или настроению, как описано выше (термины, иностранные слова, мысли и т.д.). Семантически, <i> – это стилистическое выделение текста.

В большинстве случаев, для смыслового ударения и акцента в тексте, лучше использовать <em>, а для стилистического выделения – <i>. Однако, браузеры визуально отображают оба тега курсивом по умолчанию, что может вводить в заблуждение начинающих разработчиков. Помните о семантической разнице между ними и выбирайте тег, который лучше соответствует смыслу выделяемого текста.

Тег `<blockquote>` – Блочная цитата

Тег <blockquote> (от англ. block quote – блочная цитата) используется для оформления длинных цитат, которые выделяются в виде отдельного блока текста, визуально отличающегося от основного текста страницы. Тег <blockquote> предназначен для цитирования внешних источников, и часто используется для выделения цитат из книг, статей, высказываний известных личностей и т.д.

Особенности тега `<blockquote>`:

Семантика: Тег <blockquote> имеет явное семантическое значение – он сообщает браузеру и другим программам, что заключенный в нем контент является блочной цитатой из внешнего источника.
Блочный элемент: <blockquote> является блочным элементом, как и <p>. Цитата будет отображаться на новой строке и занимать всю доступную ширину.
Визуальное оформление по умолчанию: Браузеры обычно применяют к тегам <blockquote> стандартное визуальное оформление:
- Отступы слева и справа (margin или padding) – для визуального отделения цитаты от основного текста.
- Курсивный шрифт (font-style: italic) – хотя это не всегда обязательно, некоторые браузеры делают текст цитаты курсивным.

Пример использования тега `<blockquote>`:

Вернитесь к файлу elements.html в текстовом редакторе.
Добавьте тег <blockquote> после третьего параграфа и поместите внутрь него текст цитаты. Также добавьте тег <p> внутрь <blockquote>, чтобы отформатировать текст цитаты как абзац. Скопируйте или добавьте следующий код после третьего параграфа в elements.html:
```
<blockquote cite="https://ru.wikipedia.org/wiki/%D0%A6%D0%B8%D1%82%D0%B0%D1%82%D0%B0">
    <p>Цитата – это дословная выдержка из какого-либо текста или чьих-либо слов, приводимая для подтверждения или пояснения собственной мысли.</p>
</blockquote>
```
В этом примере мы добавили тег <blockquote> и вложили в него тег <p> с текстом цитаты. Атрибут cite в теге <blockquote> (необязательный, но рекомендуемый) указывает источник цитаты (в данном случае, ссылку на статью в Википедии).
Сохраните файл elements.html и обновите страницу в браузере.

Результат:

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

Инструменты разработчика:

Откройте инструменты разработчика (F12) и выберите тег <blockquote>. На вкладке "Styles" или "Computed" вы увидите CSS-стили, которые браузер применяет к тегу <blockquote> по умолчанию, включая margin-block-start, margin-block-end, margin-inline-start, margin-inline-end, и возможно font-style: italic.

В заключение о теге `<blockquote>`:

Используйте тег <blockquote> для оформления длинных, блочных цитат из внешних источников. Это сделает ваш контент более структурированным и семантически богатым, а также визуально выделит цитаты для лучшего восприятия читателями. Атрибут cite (хоть и необязательный) помогает указать источник цитаты и является хорошей практикой. Для коротких цитат внутри абзаца (без выделения блоком) можно использовать обычные кавычки или тег <q> (для строчных цитат, но <blockquote> для блочных цитат – семантически предпочтительнее для длинных цитат).

Тег `<hr>` – Горизонтальная линия-разделитель

Тег <hr> (от англ. horizontal rule – горизонтальная линия) используется для создания горизонтальной линии, которая визуально разделяет контент на веб-странице. Тег <hr> представляет собой тематический разрыв (thematic break) в контенте, и обычно используется для отделения разделов, тем или частей страницы друг от друга.

Особенности тега `<hr>`:

Семантика: Тег <hr> имеет семантическое значение, хотя и довольно простое. Он указывает на тематический разрыв в контенте, сигнализируя о переходе к другой теме или разделу.
Самозакрывающийся тег: Тег <hr> является самозакрывающимся тегом. Это означает, что ему не нужен закрывающий тег </hr>. Достаточно просто написать <hr>.
Визуальное отображение: Браузеры по умолчанию отображают тег <hr> как тонкую горизонтальную линию, которая пересекает всю ширину родительского элемента (обычно ширину окна браузера или родительского <div>). Вы можете изменить внешний вид линии <hr> с помощью CSS (например, цвет, толщину, стиль линии), но по умолчанию это простая серая линия.

Пример использования тега `<hr>`:

Вернитесь к файлу elements.html в текстовом редакторе.
Добавьте тег <hr> после тега <blockquote>, чтобы визуально отделить цитату от последующего контента. Просто добавьте строку <hr> после тега </blockquote> в файле elements.html:
```
</blockquote>
<hr>
<p>Это текст, который идет после горизонтальной линии &lt;hr&gt;.</p>
```
Сохраните файл elements.html и обновите страницу в браузере.

Результат:

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

Инструменты разработчика:

Откройте инструменты разработчика (F12) и выберите тег <hr>. На вкладке "Styles" или "Computed" вы увидите CSS-стили, которые браузер применяет к тегу <hr> по умолчанию, включая display: block, margin-block-start, margin-block-end, border-top и border-block-start, border-block-end для создания визуальной линии.

В заключение о теге `<hr>`:

Используйте тег <hr> для создания визуальных разделителей между разделами контента на веб-странице, когда вы хотите обозначить тематический разрыв между частями информации. <hr> – это простой и эффективный способ визуально структурировать страницу и сделать ее более удобной для восприятия. Однако, не злоупотребляйте <hr> для создания только визуальных эффектов. Если вам нужно просто создать декоративную линию без семантического значения "разделителя", лучше используйте CSS-стили (например, border-bottom для элемента) вместо тега <hr>.

Тег `<div>` – Универсальный контейнер

Тег <div> (от англ. division – раздел, блок) – это универсальный блочный контейнер в HTML. Тег <div> не имеет семантического значения сам по себе, и используется исключительно для группировки других HTML-элементов в логические блоки. <div> – это один из самых важных и часто используемых тегов в HTML, особенно в сочетании с CSS для стилизации и макета веб-страниц.

Особенности тега `<div>`:

Не имеет семантики: В отличие от <p>, <strong>, <blockquote> и других семантических тегов, <div> не несет никакого семантического смысла сам по себе. Он просто обозначает раздел или блок контента, не указывая на его тип или значение.
Блочный элемент: <div> является блочным элементом. Как и <p>, <blockquote> и <h1>-<h6>, <div> отображается на новой строке и занимает всю доступную ширину.
Контейнер для группировки: Основное назначение <div> – группировать другие HTML-элементы. Вы можете помещать внутрь <div> любые другие теги – текстовые теги, изображения, формы, другие <div> и т.д. Это позволяет создавать логические разделы на странице и управлять ими как единым целым.
Используется для стилизации и макета: Теги <div> часто используются в сочетании с CSS для стилизации и создания макета веб-страницы. Вы можете задавать CSS-стили непосредственно для <div> (например, цвет фона, отступы, размеры, положение на странице) или использовать <div> как контейнер для применения общих стилей к группе элементов, помещенных внутрь него. <div> – это основа для создания сложных макетов веб-страниц с помощью CSS.

Пример использования тега `<div>`:

Вернитесь к файлу elements.html в текстовом редакторе.

Оберните все существующие элементы <body> (заголовок <h1>, абзацы <p>, цитату <blockquote>, линию <hr>) в один общий тег <div>. Также добавьте еще один тег <div> после первого, чтобы создать еще один контейнер. Измените секцию <body> следующим образом:

<body>
    <div>
        <h1>Популярные теги HTML</h1>
        <p>Это первый абзац текста на нашей веб-странице. ... </p>
        <p>Это второй абзац. ... </p>
        <p>Этот абзац демонстрирует, ... </p>
        <blockquote cite="https://ru.wikipedia.org/wiki/%D0%A6%D0%B8%D1%82%D0%B0%D1%82%D0%B0">
            <p>Цитата – это дословная выдержка ... </p>
        </blockquote>
        <hr>
    </div>
    <div>
        <h2>Второй раздел страницы</h2>
        <p>Этот текст находится во втором div-контейнере.</p>
    </div>
</body>

В этом примере мы обернули все предыдущие элементы в тег <div>, создав первый <div>-контейнер, и добавили еще один <div>-контейнер для создания второго раздела страницы. Второй <div>-контейнер содержит заголовок <h2> и абзац <p>.

Сохраните файл elements.html и обновите страницу в браузере.

Результат:

Визуально страница почти не изменилась! Это ожидаемо, так как тег <div> не добавляет никакого визуального оформления сам по себе. Он предназначен только для группировки элементов. На веб-странице вы увидите тот же контент, что и раньше, но теперь он организован в <div>-контейнеры в HTML-коде.

Инструменты разработчика:

Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Вы увидите, что в секции <body> теперь есть два тега <div>. Разверните каждый из них – вы увидите, что содержимое страницы структурировано внутри этих <div>-контейнеров. Выберите теги <div> и посмотрите на вкладку "Styles" или "Computed". Вы увидите, что браузер применяет к тегам <div> очень мало CSS-стилей по умолчанию – в основном только display: block. <div> – это нейтральный контейнер, и его внешний вид полностью зависит от CSS-стилей, которые вы зададите для него (или для элементов внутри него).

В заключение о теге `<div>`:

Тег <div> – это фундаментальный инструмент для структурирования и организации HTML-кода и создания макетов веб-страниц с помощью CSS. Используйте <div> для группировки логически связанных элементов, создания разделов и блоков на странице, и для применения общих стилей к группам элементов. Хотя <div> сам по себе не добавляет визуального оформления, он является ключевым элементом для создания сложных и стильных веб-страниц в сочетании с CSS. В HTML5 также появились более семантические теги-контейнеры, такие как <header>, <nav>, <main>, <article>, <aside>, <footer>, которые также являются блочными элементами и часто используются вместо <div> для более семантичной разметки (мы изучим их позже), но <div> по-прежнему остается важным и универсальным инструментом.

Итоги урока

Давайте подведем итоги нашего урока о популярных HTML-тегах:

<p> (параграф): Используется для создания абзацев текста. Имеет семантическое значение "абзац" и является блочным элементом с автоматическими отступами.
<strong> (сильное выделение): Используется для выделения важного текста жирным шрифтом. Имеет семантическое значение "важный текст".
<i> (идиоматический текст): Используется для выделения текста курсивом для обозначения идиоматического тона, терминов, названий и т.д. Имеет семантическое значение "отличающийся тон".
<blockquote> (блочная цитата): Используется для оформления длинных цитат в виде отдельного блока. Имеет семантическое значение "блочная цитата".
<hr> (горизонтальная линия): Используется для создания горизонтальной линии-разделителя между разделами контента. Обозначает тематический разрыв. Самозакрывающийся тег.
<div> (раздел, блок): Универсальный блочный контейнер для группировки других HTML-элементов. Не имеет семантического значения сам по себе, используется для структурирования и стилизации с помощью CSS.

Поздравляю!

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

Спасибо за внимание! Продолжайте экспериментировать с этими тегами, создавайте свои веб-страницы, комбинируйте их и смотрите, как они работают в браузере. Чем больше практики, тем лучше вы усвоите материал!

До встречи на следующем уроке!

6. Популярные теги

Подготовка к уроку

Тег <p> – Параграф

Особенности тега <p>:

Пример использования тега <p>:

Результат:

Инструменты разработчика:

В заключение о теге <p>:

Тег <strong> – Важный текст (Жирный шрифт)

Особенности тега <strong>:

Пример использования тега <strong>:

Результат:

Инструменты разработчика:

В заключение о теге <strong>:

Тег <i> – Курсив (Идиоматический текст)

Особенности тега <i>:

Пример использования тега <i>:

Результат:

Инструменты разработчика:

Важное различие между <i> и <em>:

Тег <blockquote> – Блочная цитата

Особенности тега <blockquote>:

Пример использования тега <blockquote>:

Результат:

Инструменты разработчика:

В заключение о теге <blockquote>:

Тег <hr> – Горизонтальная линия-разделитель

Особенности тега <hr>:

Пример использования тега <hr>:

Результат:

Инструменты разработчика:

В заключение о теге <hr>:

Тег <div> – Универсальный контейнер

Особенности тега <div>:

Пример использования тега <div>:

Результат:

Инструменты разработчика:

В заключение о теге <div>:

Итоги урока

Поздравляю!

Тег `<p>` – Параграф

Особенности тега `<p>`:

Пример использования тега `<p>`:

В заключение о теге `<p>`:

Тег `<strong>` – Важный текст (Жирный шрифт)

Особенности тега `<strong>`:

Пример использования тега `<strong>`:

В заключение о теге `<strong>`:

Тег `<i>` – Курсив (Идиоматический текст)

Особенности тега `<i>`:

Пример использования тега `<i>`:

Важное различие между `<i>` и `<em>`:

Тег `<blockquote>` – Блочная цитата

Особенности тега `<blockquote>`:

Пример использования тега `<blockquote>`:

В заключение о теге `<blockquote>`:

Тег `<hr>` – Горизонтальная линия-разделитель

Особенности тега `<hr>`:

Пример использования тега `<hr>`:

В заключение о теге `<hr>`:

Тег `<div>` – Универсальный контейнер

Особенности тега `<div>`:

Пример использования тега `<div>`:

В заключение о теге `<div>`: