freeCodeCamp

5.8 KiB

Raw Blame History

title	localeTitle
Semantic HTML Elements	Семантические элементы HTML

Семантические элементы HTML

Элемент <em> отмечает текст как подчеркнутый над текстом вокруг него. Как правило, браузер выделяет курсивом курсивом , но вы можете добавлять другие стили с помощью CSS.

Семантические элементы HTML предоставляют смысл браузерам, разработчикам и пользователям сайта. В отличие от таких элементов, как <div> или <span> , семантические элементы, такие как <header> и <footer> более четко объясняют цель каждого раздела веб-сайта.

Зачем использовать семантические элементы?

Разработчики используют семантические элементы для улучшения следующего:

доступность: помощь вспомогательным технологиям читать и интерпретировать вашу веб-страницу
возможность поиска: компьютеры помогают понять ваш контент
интернационализация: только 13% мира являются носителями английского языка
интероперабельность: помогите другим программистам понять структуру вашей веб-страницы 1

Полезные семантические элементы

<header> определяет заголовок для документа или раздела
<footer> определяет нижний колонтитул для документа или раздела
<nav> определяет ссылки навигации в документе
<main> определяет основное содержание документа
<section> определяет раздел в документе - спецификация определяет это как «тематическую группировку контента, как правило, с заголовком», поэтому вы можете думать о нем как о том, как главу
<article> определяет статью в документе
<aside> определяет контент, кроме содержимого страницы
<address> определяет контактную информацию для автора / владельца документа или статьи
<figure> определяет автономный контент, например иллюстрации, диаграммы, фотографии, блоки кода и т. д. 2

Малоизвестные семантические элементы

<bdi> определяет раздел текста, который может быть отформатирован в другом направлении от другого текста (например, цитата на иврите или арабском языке в англоязычной статье)
<details> определяет дополнительные сведения, которые люди могут просматривать или скрывать (например, всплывающие подсказки)
<dialog> определяет диалоговое окно или окно
<figcaption> определяет подпись для <figure>
<mark> определяет выделенный или выделенный текст.
<menuitem> определяет команду / пункт меню, которую пользователь может выбрать из всплывающего меню
<meter> определяет скалярное измерение в пределах известного диапазона (калибр)
<progress> определяет ход выполнения задачи
<rp> определяет, что показывать в браузерах, которые не поддерживают рубиновые аннотации
<rt> определяет объяснение / произношение символов (для восточно-азиатской типографии)
<ruby> определяет рубиновую аннотацию (для восточно-азиатской типографии)
<summary> определяет видимый заголовок элемента <details>
<time> определяет дату / время
<wbr> определяет возможный разрыв строки 2

источники

Дополнительная информация:

Для получения дополнительной информации: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics

Обратитесь к статье MDN Web Docs .

5.8 KiB Raw Blame History Unescape Escape