Перейти к основному содержимому

Разметка текста

Абзац​

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

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
  eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
  asperiores non temporibus ut nisi minima?
</p>

Часто необходимо заполнить тег текстом-болванкой, когда самого текста, который будет размещаться на сайте, ещё нет. Для этого используют специальный заполнитель (текст-рыба).

Полезно

В редакторе VSCode, в HTML-документе можно набрать код lorem10, после чего нажать клавишу Tab. Это создаст массив текста из 10 слов. Вместо 10 можно поставить любое число.

Заголовки​

Группа тегов <h1>...<h6> - определяет текстовые заголовки смысловых разделов разного уровня, которые указывают важность секции контента расположенного после них. Это инструмент структурирования текстового контента.

Тег <h1> чаще всего используется только один раз, как основной заголовок страницы. Остальные заголовки могут использоваться сколько угодно раз, но их всегда следует применять правильно, придерживаясь иерархии.

Полезно

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

Списки​

Списки позволяют упорядочить коллекции и представить их в наглядном и удобном для пользователя виде. Список это контейнер, детьми которого могут быть только элементы списка, теги <li>.

Тег <ol> - создаёт нумерованный (упорядоченный) список, то есть каждый элемент списка пронумерован. Браузер нумерует элементы по порядку автоматически, и если удалить один или несколько элементов такого списка, остальные номера будут автоматически пересчитаны. Нумерацией элементов можно управлять при помощи специальных атрибутов списка.

Используется для перечисления действий в определенном порядке, например рецепт.

<h1>Как заварить чай</h1>
<p>Пошаговая инструкция для чайников, просто повтори и у тебя всё получится!</p>

<ol>
  <li>Закипятить воду</li>
  <li>Засыпать чай в чашку</li>
  <li>Налить в чашку кипяток</li>
  <li>Ждать 10 минут, после чего можно пить</li>
</ol>

Тег <ul> - создаёт маркированный (неупорядоченный) список, каждый элемент которого начинается с небольшого символа (маркера). При помощи CSS маркер можно будет убрать или заменить.

Используется для перечисления набора в произвольном порядке, например список курортов.

<h1>Самые горячие курорты</h1>
<p>В этом году эксперты рекомендуют посетить следующие локации.</p>

<ul>
  <li>Тунис</li>
  <li>Турция</li>
  <li>Греция</li>
  <li>Египет</li>
</ul>
Внимание

По спецификации в теги <ul> и <ol> можно вкладывать только элементы спика - теги <li>. При этом, внутри тегов <li>, могут быть вложены другие произвольные теги.

Вложенные списки​

Сделать многоуровневый список просто - вкладываем в элемент списка еще один список. Это часто применяется для создания многоуровневых меню.

<ul>
  <li>
    Компьютеры и комплектующие
    <ul>
      <li>Процессоры</li>
      <li>Мониторы</li>
      <li>Видеокарты</li>
    </ul>
  </li>
  <li>
    Бытовая техника
    <ul>
      <li>Холодильники</li>
      <li>Телевизоры</li>
      <li>Стиральные машины</li>
    </ul>
  </li>
  <li>
    Товары для дома
    <ul>
      <li>Кресла</li>
      <li>Матрасы</li>
      <li>Электрокамины</li>
    </ul>
  </li>
</ul>

Ссылка​

Тег <a> - предназначен для создания ссылок, текста, при клике по которому переходим на другую страницу, скачиваем файл и т. п. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта синий, при наведении на ссылку курсор мыши меняет вид.

Адрес ссылки задается в обязательном атрибуте href="адрес". Адрес это URL, который может указывать на страницу, файл, любой ресурс.

<a href="https://google.com">Ссылка на главную страницу Google</a>

Атрибуты target и rel​

По умолчанию ссылка открывается в текущей вкладке браузера. Атрибут target="значение" определяет то, в какой вкладке должен открываться документ, к которому ведёт ссылка. При значении _blank страница открывается в новой вкладке браузера.

Атрибут rel дополняет атрибут href информацией об отношении между текущим и связанным документом и используется в паре с target="_blank".

<!-- Ссылка на внешний ресурс, откроется в текущей вкладке -->
<a href="https://www.facebook.com/">Facebook</a>

<!-- Ссылка на внешний ресурс, откроется в новой вкладке -->
<a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
  Facebook
</a>

Атрибут download​

Если в href ссылки указан путь к файлу, браузер попытается его открыть в текущем окне, если умеет обрабатывать файлы этого типа. Обычно так происходит с изображениями и PDF-файлами.

Атрибут download="имя файла" сообщает браузеру, что указанный ресурс должен быть не открыт, а загружен в момент, когда пользователь кликнет по ссылке. Значение атрибута задаёт имя загружаемого файла, то есть можно изменить имя во время загрузки. Атрибут можно использовать без указания значения, тогда будет использовано имя оригинального файла.

<!-- Ссылка на скачивание файла -->
<a href="/путь/к/cv.pdf" download>Скачать резюме</a>

Специальные значения href​

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

<!-- Ссылка на телефонный номер -->
<a href="tel:+14251234563">+1 (425) 123-45-63</a>

<!-- Ссылка на адрес электронной почты  -->
<a href="mailto:example@mail.ru">example@mail.ru</a>

Ссылка-якорь​

Ссылка с якорем используется для создания навигации по текущей странице. Например, для быстрого перехода к какой-то секции (как в этих материалах). При клике по такой ссылке браузер проскролит страницу до якоря без её перезагрузки.

Для создания якоря необходимо добавить тегу, до которого мы хотим проскролить страницу, атрибут id - уникальный идентификатор. А атрибуту href у ссылки задать значение начинающееся с символа #, после которого указан идентификатор элемента.

Кнопка​

Интерактивный элемент, который оживляется при помощи JavaScript. Например, кнопка открытия и закрытия всплывающего окна, переключения мобильного меню или отправки формы. Необходимо явно указывать атрибут type. Его значение по умолчанию - submit, но чаще всего нужно значение button. Да, кнопка типа «кнопка», такая особенность.

<button type="button">Открыть модальное окно</button>
Полезно

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

Атрибут lang​

Если на странице есть текст на разных языках, для того, чтобы сделать её более доступной для ассистивных технологий, можно задавать атрибут lang не только всему документу, но и отдельным тегам.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Инструкция по эксплуатации пирожков" />
    <title>Пирожки это внусно!</title>
  </head>
  <body>
    <p>Инструкция по эксплуатации</p>
    <p lang="en">Operating instructions</p>
    <p lang="fr">Manuel d'utilisation</p>
  </body>
</html>
Внимание

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