Текст, изображения, ссылки и списки

HTML предоставляет шесть уровней заголовков. Используйте их для создания структуры документа, а не для изменения размера текста. <h1> — заголовок страницы, используемый один раз; <h2> — заголовки основных разделов; <h3> — заголовки подразделов и так далее.

Элемент <p> содержит абзац текста. Браузер автоматически добавляет интервалы сверху и снизу. Используйте <br> умеренно — только для значимых переносов строк, например в адресе или стихотворении, а не для создания промежутков между абзацами.

Используйте строчные элементы, чтобы придать тексту смысл: <strong> — для важного текста (жирный шрифт), <em> — для выделения (курсив), <code> — для фрагментов кода, <mark> — для подсвеченного текста, а <small> — для мелкого шрифта.

Элемент <img> встраивает изображение. Атрибут src задаёт URL, а alt содержит альтернативный текст для программ чтения с экрана и на случай, если изображение не загрузится. Всегда указывайте содержательное значение alt.

Альтернативный текст должен передавать содержание и назначение изображения. Для декоративных изображений (разделителей и значков, предназначенных только для оформления) используйте alt="" (пустую строку), чтобы программы чтения с экрана пропускали их. Никогда не пишите alt="image of" — просто описывайте то, что изображено.

Элемент <a> (якорь) создаёт гиперссылки. Атрибут href задаёт URL назначения. Текст ссылки должен описывать назначение — никогда не пишите «нажмите здесь».

При открытии ссылок в новой вкладке с помощью target="_blank" всегда добавляйте rel="noopener noreferrer". Без этого открытая страница может получить доступ к объекту окна страницы, которая её открыла, — это уязвимость, называемая обратным перехватом вкладки.

Используйте <ul> (ненумерованный список), когда порядок элементов не важен: для возможностей, ингредиентов и навигационных ссылок. Каждый элемент — это <li>. По умолчанию браузер отображает маркеры, но почти всегда вы будете оформлять их с помощью CSS.

Используйте <ol> (нумерованный список), когда порядок важен: для шагов учебного материала, рейтингов и инструкций. Элементы автоматически нумеруются. Используйте атрибуты start и reversed, чтобы управлять нумерацией.

<dl> (список описаний) объединяет термины и их определения или описания. Используйте его для глоссариев, метаданных (автора и даты) и пар «ключ—значение». <dt> — это термин, а <dd> — его описание.

Списки можно вкладывать, чтобы представлять иерархии. Помещайте дочерний <ul> или <ol> внутрь родительского элемента <li>. Не вкладывайте списки только ради отступа — вместо этого используйте CSS.

Используйте элементы заголовков для структуры документа, p — для абзацев, img со значимым альтернативным текстом — для изображений, a с описательным текстом — для навигации, а ul/ol/dl — для содержимого в виде списков. Семантика делает HTML доступным и понятным для машинной обработки.