JavaRush /Курсы /Frontend SELF /Оформление документа

Оформление документа

Frontend SELF
2 уровень , 2 лекция
Открыта

1. Оформление текста

Давайте продолжим изучение HTML...

Параграфы (p)

Тег <p> используется для создания параграфов (абзацев) текста. Параграфы помогают разбить текст на логические блоки, улучшая читаемость и восприятие информации.

Пример:

HTML
      
<p>Это первый параграф текста. Он содержит некоторое количество информации.</p>
<p>Это второй параграф текста. Он отделен от первого параграфа.</p>
      
    

Жирный текст (b)

Тег <b> используется для выделения текста полужирным (bold) шрифтом. Это позволяет подчеркнуть важность определенных слов или фраз.

HTML
      
<p>Это <b>важный</b> текст.</p>
      
    

Курсивный текст (i)

Тег <i> используется для выделения текста курсивом (наклонным шрифтом, italic). Он часто применяется для обозначения терминов, названий книг, иностранных слов и т. д.

Пример:

HTML
      
<p>Это <i>термин</i>, который выделен курсивом.</p>
      
    

2. Заголовки (h1 - h6)

Заголовки в HTML используются для структурирования контента и создания иерархии заголовков на странице. Существует шесть уровней заголовков, где <h1> является самым важным, а <h6> — наименее важным.

  • <h1> — Самый важный и крупный заголовок. Обычно используется для главного заголовка страницы.
  • <h2> — Используется для подзаголовков, которые следуют за <h1>.
  • <h3> — Уровень заголовка ниже <h2>.
  • <h4> — Уровень заголовка ниже <h3>.
  • <h5> — Уровень заголовка ниже <h4>.
  • <h6> — Наименее важный и самый маленький заголовок.

Пример:

HTML
      
<h1>Главный заголовок страницы</h1>
<h2>Подзаголовок уровня 2</h2>
<h3>Подзаголовок уровня 3,</h3>
      
    

3. Дополнительные теги в head-документе

Есть теги, которые вы можете в будущем встретить в HTML-примерах, хочу пару слов сказать о них:

1. Тег <title>

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

2. Тег <meta charset="UTF-8">

Тег <meta> внутри <head> задает кодировку символов для документа. UTF-8 — это наиболее распространенная кодировка, которая поддерживает большинство языков мира. О кодировках мы расскажем немного позднее.

3. Тег <meta name="viewport" content="width=device-width, initial-scale=1.0">

Этот тег также находится внутри <head>. Он обеспечивает правильное отображение страницы на мобильных устройствах. Задает ширину области просмотра (viewport) равной ширине экрана устройства и начальный масштаб страницы.

4. Тег <link rel="stylesheet" href="styles.css">

Тег <link/> подключает внешний CSS-файл для стилизации страницы. Атрибут rel="stylesheet" указывает, что это таблица стилей, а href="styles.css" задает путь к файлу стилей.

5. Тег <script src="script.js" defer></script>

Тег <script> подключает внешний JavaScript - файл для добавления интерактивности на страницу. Атрибут src указывает путь к файлу скрипта, а defer говорит браузеру, что скрипт должен быть выполнен после загрузки HTML - документа.

Комментарии (7)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Татьяна Уровень 3
12 октября 2025
Тег <strong> — это семантический тег, который тоже делает текст жирным, но добавляет смысловую важность (логический акцент). Например:
<p><strong>Внимание!</strong> Работы ведутся под напряжением.</p>
Результат: “Внимание!” — жирное и имеет смысловой акцент, а браузер, поисковики и голосовые программы понимают, что это важный текст. Программы чтения с экрана (для слабовидящих пользователей) даже читают такие слова с усилением голоса (например: “⚠ ВНИМАНИЕ!”). Тег <em> (от emphasis — «подчёркивание, выделение») тоже делает текст курсивным как и тег <i>, но добавляет смысловой акцент как и тег <strong> — выделяет важное слово или фразу по смыслу. Используется, когда нужно подчеркнуть эмоциональный или логический акцент в предложении. Теги <strong> и <em> могут влиять на SEO, так как помогают поисковым системам и вспомогательным технологиям (например, скринридерам) понимать важность содержимого.
Кыялбек Уровень 3
2 октября 2025
java rush это хорошо но очень дорогой
No Name Уровень 1
5 мая 2025
+ задачи в копилке
Павел Уровень 19 Expert
4 января 2025
Тег <title> задает название страницы, которое отображается на вкладке браузера. Это первое, что видит пользователь при открытии страницы У меня может не как у всех, но это последнее на что я обратил внимание. Это название страницы я увидел только на значке браузера в панели инструментов и после наведения мыши на значок открытой страницы в браузере.
Vadim Makarenko Уровень 42
20 декабря 2024
Обратите внимание, что в этой задаче 2 файла. У меня задача прошла проверку только тогда, когда я продублировал всё необходимое в обоих файлах.
Vad1m Уровень 5
16 декабря 2024
<meta charset="utf-8"> - не прошел проверку, только <meta charset="UTF-8"> проходит проверку. В данном случае регистр не имеет значения.
Борис Уровень 17
15 декабря 2024
В последней задаче атрибут lang="en" проверку не прошел. Прошел только lang="ru".