5.8 KiB
5.8 KiB
title, localeTitle
| 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
источники
- Ли, Мишель. «Обзор семантики HTML5». CodePen . 16 февраля 2016. Доступ: 24 октября 2017 г.
- Бидокс, Винсент. «Семантические элементы HTML5 и Webflow: основное руководство». Webflow . 16 декабря 2016. Доступ: 24 октября 2017 г.
Дополнительная информация:
Для получения дополнительной информации: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
Обратитесь к статье MDN Web Docs .