204 lines
14 KiB
Markdown
204 lines
14 KiB
Markdown
---
|
||
title: HTML5 Semantic Elements
|
||
localeTitle: HTML5 Семантические элементы
|
||
---
|
||
## HTML5 Семантические элементы
|
||
|
||
Семантические элементы HTML четко описывают его значение в человеческом и машиносчитываемом виде. Элементы, такие как `<header>` , `<footer>` и `<article>` , считаются семантическими, потому что они точно описывают цель элемента и тип содержимого, который внутри них.
|
||
|
||
### Краткая история
|
||
|
||
HTML был первоначально создан как язык разметки для описания документов в начале интернета. По мере того, как Интернет рос и был принят больше людей, его потребности изменились. Когда интернет был первоначально предназначен для обмена научными документами, теперь люди хотели поделиться и другими вещами. Очень быстро люди начали хотеть сделать Интернет более приятным. Поскольку веб-сервер изначально не был спроектирован для разработки, программисты использовали разные хаки, чтобы все было по-разному. Вместо использования `<table></table>` для описания информации с использованием таблицы программисты использовали бы их для размещения других элементов на странице. По мере прогрессирования использования визуально разработанных макетов программисты начали использовать общий «не семантический» тег, например `<div>` . Они часто давали этим элементам атрибут `class` или `id` для описания своей цели. Например, вместо `<header>` это часто записывалось как `<div class="header">` . Поскольку HTML5 по-прежнему относительно нов, это использование не семантических элементов по-прежнему очень распространено на веб-сайтах сегодня.
|
||
|
||
#### Список новых семантических элементов
|
||
|
||
Семантические элементы, добавленные в HTML5:
|
||
|
||
* `<article>`
|
||
* `<aside>`
|
||
* `<details>`
|
||
* `<figcaption>`
|
||
* `<figure>`
|
||
* `<footer>`
|
||
* `<header>`
|
||
* `<main>`
|
||
* `<mark>`
|
||
* `<nav>`
|
||
* `<section>`
|
||
* `<summary>`
|
||
* `<time>`
|
||
|
||
Элементы, такие как `<header>` , `<nav>` , `<section>` , `<article>` , `<aside>` и `<footer>` действуют более или менее как элементы `<div>` . Они группируют другие элементы вместе в разделы страниц. Однако, если `<div>` может содержать любой тип информации, легко определить, какая информация будет отображаться в семантической области `<header>` .
|
||
|
||
**Пример размещения семантического элемента w3schools**
|
||
|
||
|
||
|
||
### Преимущества семантических элементов
|
||
|
||
Чтобы взглянуть на преимущества семантических элементов, вот два фрагмента кода HTML. Этот первый блок кода использует семантические элементы:
|
||
```
|
||
<header></header>
|
||
<section>
|
||
<article>
|
||
<figure>
|
||
<img>
|
||
<figcaption></figcaption>
|
||
</figure>
|
||
</article>
|
||
</section>
|
||
<footer></footer>
|
||
```
|
||
|
||
Хотя этот второй блок кода использует не семантические элементы:
|
||
```
|
||
<div id="header"></div>
|
||
<div class="section">
|
||
<div class="article">
|
||
<div class="figure">
|
||
<img>
|
||
<div class="figcaption"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="footer"></div>
|
||
```
|
||
|
||
Во-первых, его гораздо **легче читать** . Это, вероятно, первое, что вы заметите при просмотре первого блока кода с использованием семантических элементов. Это небольшой пример, но в качестве программиста вы можете читать сотни или тысячи строк кода. Чем проще читать и понимать этот код, тем легче он делает вашу работу.
|
||
|
||
Он имеет **большую доступность** . Вы не единственный, который легче воспринимает семантические элементы. Поисковые системы и вспомогательные технологии (например, программы для чтения с экрана для пользователей с ухудшением зрения) также могут лучше понимать контекст и содержание вашего веб-сайта, что означает лучший опыт для ваших пользователей.
|
||
|
||
В целом, семантические элементы также приводят к более **согласованному коду** . При создании заголовка с использованием не семантических элементов разные программисты могут записать это как `<div class="header">` , `<div id="header">` , `<div class="head">` или просто `<div>` . Существует так много способов создать элемент заголовка, и все они зависят от личных предпочтений программиста. Создавая стандартный семантический элемент, он упрощает работу для всех.
|
||
|
||
С октября 2014 года HTML4 был повышен до HTML5, а также некоторые новые «семантические» элементы. По сей день некоторые из нас все еще могут быть смущены тем, почему так много разных элементов, которые, похоже, не показывают каких-либо серьезных изменений.
|
||
|
||
#### `<section>` и `<article>`
|
||
|
||
«В чем разница?», Спросите вы. Оба эти элемента используются для секционирования содержимого, и да, они могут определенно использоваться взаимозаменяемо. Это вопрос ситуации. HTML4 предлагает только один тип элементов контейнера, который является `<div>` , Хотя это все еще используется в HTML5, HTML5 предоставил нам `<section>` и `<article>` чтобы заменить `<div>` ,
|
||
|
||
`<section>` и `<article>` элементы концептуально похожи и взаимозаменяемы. Чтобы решить, какой из них вы должны выбрать, обратите внимание на следующее:
|
||
|
||
1. Статья предназначена для самостоятельного распределения или повторного использования.
|
||
2. Раздел представляет собой тематическую группировку контента.
|
||
|
||
```html
|
||
|
||
<section>
|
||
<p>Top Stories</p>
|
||
<section>
|
||
<p>News</p>
|
||
<article>Story 1</article>
|
||
<article>Story 2</article>
|
||
<article>Story 3</article>
|
||
</section>
|
||
<section>
|
||
<p>Sport</p>
|
||
<article>Story 1</article>
|
||
<article>Story 2</article>
|
||
<article>Story 3</article>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
#### `<header>` и `<hgroup>`
|
||
|
||
`<header>` элемент обычно находится в верхней части документа, раздела или статьи и обычно содержит основной заголовок и некоторые средства навигации и поиска.
|
||
|
||
```html
|
||
|
||
<header>
|
||
<h1>Company A</h1>
|
||
<ul>
|
||
<li><a href="/home">Home</a></li>
|
||
<li><a href="/about">About</a></li>
|
||
<li><a href="/contact">Contact us</a></li>
|
||
</ul>
|
||
<form target="/search">
|
||
<input name="q" type="search" />
|
||
<input type="submit" />
|
||
</form>
|
||
</header>
|
||
```
|
||
|
||
`<hgroup>` элемент должен использоваться там, где вам нужен основной заголовок с одной или несколькими подзаголовками.
|
||
|
||
```html
|
||
|
||
<hgroup>
|
||
<h1>Heading 1</h1>
|
||
<h2>Subheading 1</h2>
|
||
<h2>Subheading 2</h2>
|
||
</hgroup>
|
||
```
|
||
|
||
ПОМНИТЕ, что `<header>` элемент может содержать любой контент, но `<hgroup>` элемент может содержать только другие заголовки, то есть `<h1>` to `<h6>` и включая `<hgroup>` ,
|
||
|
||
#### `<aside>`
|
||
|
||
`<aside>` элемент предназначен для контента, который не является частью потока текста, в котором он появляется, однако все еще связан каким-то образом. Это от `<aside>` как боковая панель вашего основного контента.
|
||
|
||
```html
|
||
|
||
<aside>
|
||
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
|
||
</aside>
|
||
```
|
||
|
||
Перед HTML5 наши меню были созданы с помощью `<ul>` 's и `<li>` «S. Теперь, вместе с ними, мы можем отделить наши пункты меню с помощью `<nav>` , для навигации между вашими страницами. У вас может быть любое число `<nav>` элементы на странице, например, общие для глобальной навигации по вершине (в `<header>` ) и локальной навигации на боковой панели (в элементе `<aside>` ).
|
||
|
||
```html
|
||
|
||
<nav>
|
||
<ul>
|
||
<li><a href="/home">Home</a></li>
|
||
<li><a href="/about">About</a></li>
|
||
<li><a href="/contact">Contact us</a></li>
|
||
</ul>
|
||
</nav>
|
||
```
|
||
|
||
#### `<footer>`
|
||
|
||
Если есть `<header>` должен быть `<footer>` , A `<footer>` обычно находится в нижней части документа, раздела или статьи. Как `<header>` содержание, как правило, является метаинформацией, такой как данные автора, юридическая информация и / или ссылки на соответствующую информацию. Также справедливо включить `<section>` элементы в нижнем колонтитуле.
|
||
|
||
```html
|
||
|
||
<footer>©Company A</footer>
|
||
```
|
||
|
||
#### `<small>`
|
||
|
||
`<small>` элемент часто появляется в `<footer>` или `<aside>` элемент, который обычно содержит информацию об авторских правах или юридические заявления об отказе от ответственности и другую такую мелкую печать. Однако это не означает, что текст меньше. Он просто описывает его содержание, не предписывая презентацию.
|
||
|
||
```html
|
||
|
||
<footer><small>©Company A</small> Date</footer>
|
||
```
|
||
|
||
#### `<time>`
|
||
|
||
`<time>` элемент позволяет однозначно устанавливать дату ISO 8601 на читаемую человеком версию этой даты.
|
||
|
||
```html
|
||
|
||
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
|
||
```
|
||
|
||
Зачем беспокоиться о `<time>` ? В то время как люди могут читать время, которое может однозначно рассортироваться через контекст, компьютеры могут считывать дату ISO 8601 и видеть дату, время и часовой пояс.
|
||
|
||
#### `<figure>` и `<figcaption>`
|
||
|
||
`<figure>` для обертывания содержимого изображения вокруг него и `<figcaption>` это заголовок вашего изображения.
|
||
|
||
```html
|
||
|
||
<figure>
|
||
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
|
||
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
|
||
</figure>
|
||
```
|
||
|
||
### Подробнее о новых элементах HTML5 ...
|
||
|
||
* [w3schools](https://www.w3schools.com/html/html5_semantic_elements.asp) предоставляет простые и четкие описания многих элементов новостей и как / где они должны использоваться.
|
||
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) также обеспечивает отличную ссылку для всех элементов HTML и углубляется в каждый. |