Тег h2 создает заголовок 2 -го уровня. Заголовок — это название какого-либо блока, обычно набранное большим и жирным шрифтом. Заголовок h1 — это самый главный заголовок на странице, в нем должна быть отражена ее основная мысль.
Заголовки в HTML имеют разные уровни: от первого ( h1 ) до шестого ( h6 ). Если сравнивать HTML страницу с книгой, то заголовок h1 можно считать названием всей книги, h2 — главы, h3 — параграфа в главе и так далее. Соответственно, обычный текст лежит в абзацах.
Данный тег по умолчанию жирный и большого размера. Это поведение можно изменить с помощью CSS свойств font-weight и font-size .
Пример
Давайте посмотрим, как выглядят заголовки разных уровней и абзацы в браузере:
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
Это первый абзац.
Это второй абзац.
Это третий абзац.
Смотрите также
теги h1 , h3 , h4 , h5 , h6 , которые также делают заголовки в тексте
тег p , с помощью которого можно сделать абзацы в тексте
Тег используется для создания заголовка второго уровня. Это более мелкий заголовок, чем , он подходит для названия раздела или подраздела на странице.
Тег должен располагаться только после тега , который создаёт главный заголовок страницы. Также не стоит использовать элемент только для стилизации текста — для этого больше подходят соответствующие теги (например, или ) или CSS-стили.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
6 октября 2023
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
28 сентября 2023
HTML: Заголовки
Чем больше текст, тем чаще он разбивается на логические секции. Например, базовая разметка доклада, диплома или реферата состоит из трёх основных частей:
Введение
Основная часть
Заключение
Такие логические разделения на заголовки позволяют быстрее ориентироваться в документе и находить ту часть, которая нужна.
Для создания заголовков используется 6 парных тегов: , , , , , , где — заголовок первого уровня, самый важный и описывающий главную тему текста, а — заголовок самого низшего уровня.
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Каждый заголовок низшего уровня является подразделом заголовка более верхнего уровня. Это очень похоже на оглавление любой книги, структура которой может выглядеть так:
Глава 1
Часть 1
Часть 2
Примечания
Часть 3
Лучшая книга на Земле
Описание книги. Благодарность моему коту и двум моим собакам. Мяу!
Глава 1
Часть 1
Параграф с текстом
Параграф с текстом
Часть 2
Параграф с текстом
Параграф с текстом
Примечания
Текст этого примечания написан с любовью
Часть 3
Параграф с текстом
Параграф с текстом
Глава 2
Задание
Добавьте в редакторе заголовок первого и второго уровня с произвольным текстом
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Соблюдайте последовательность заголовков. Не перескакивайте уровни
На странице, обычно, находится только один заголовок первого уровня
HTML-элементы от до представляют шесть уровней заголовков разделов. — это заголовок самого верхнего уровня, а — самого нижнего. По умолчанию все элементы заголовков создают в разметке блочный контейнер, начинающийся на новой строке и занимающий всю доступную ширину в содержащем его блоке.
Эти элементы допускают только глобальные атрибуты.
Примечания по использованию
Информация о заголовках может использоваться пользовательскими агентами для автоматического создания оглавления документа.
Не используйте элементы заголовков для управления размером шрифта. Для этих целей следует применять CSS-свойство font-size .
Не пропускайте уровни заголовков: всегда начинайте с , потом используйте и так далее.
Избегайте использования нескольких элементов на одной странице
Использование нескольких элементов на одной странице разрешено стандартом HTML (если они не вложены друг в друга), но это считается плохой практикой. Хорошо, когда на странице есть единственный элемент , который описывает содержимое этой страницы (по аналогии с элементом ).
Примечание: Использование нескольких элементов во вложенных элементах разделов было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье There Is No Document Outline Algorithm.
Старайтесь использовать один элемент на странице и вложенные заголовки без пропуска уровней.
Примеры
Все заголовки
Следующий код показывает все уровни заголовков в действии.
h1>Заголовок уровня 1h1>h2>Заголовок уровня 2h2>h3>Заголовок уровня 3h3>h4>Заголовок уровня 4h4>h5>Заголовок уровня 5h5>h6>Заголовок уровня 6h6>
Пример страницы
Следующий код показывает несколько заголовков с содержимым под ними.
Обычный метод навигации для пользователей программ чтения с экрана — это переход от заголовка к заголовку для быстрого ознакомления с содержимым страницы. Из-за этого важно не пропускать уровни заголовка. Это может создать путаницу, так как человеку, который использует такой способ навигации, может быть непонятно, где находится отсутствующий заголовок.
Неправильно:
h1>Заголовок уровня 1h1>h3>Заголовок уровня 3h3>h4>Заголовок уровня 4h4>
Правильно:
h1>Заголовок уровня 1h1>h2>Заголовок уровня 2h2>h3>Заголовок уровня 3h3>
Вложенность
Заголовки могут быть вложены в подразделы, чтобы отразить структуру содержимого страницы. Большинство программ чтения с экрана могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:
h1 Жуки
h2 Этимология
h2 Распределение и разнообразие
h2 Эволюция
h3 Поздний палеозой
h3 Юрский период
h3 Меловой период
h3 Кайнозойский период
h3 Голова
h4 Рот
h4 Переднегрудь
h4 Птероторакс
Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.
Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка секционированного содержимого и его использование для определения разметки страницы.
Разделы содержимого могут быть размечены с помощью комбинации атрибутов aria-labelledby (en-US) и id , с кратко описывающим назначение раздела значением. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.
