14 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| HTML5 Semantic Elements | 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> элементы концептуально похожи и взаимозаменяемы. Чтобы решить, какой из них вы должны выбрать, обратите внимание на следующее:
- Статья предназначена для самостоятельного распределения или повторного использования.
- Раздел представляет собой тематическую группировку контента.
<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> элемент обычно находится в верхней части документа, раздела или статьи и обычно содержит основной заголовок и некоторые средства навигации и поиска.
<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> элемент должен использоваться там, где вам нужен основной заголовок с одной или несколькими подзаголовками.
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>
ПОМНИТЕ, что <header> элемент может содержать любой контент, но <hgroup> элемент может содержать только другие заголовки, то есть <h1> to <h6> и включая <hgroup> ,
<aside>
<aside> элемент предназначен для контента, который не является частью потока текста, в котором он появляется, однако все еще связан каким-то образом. Это от <aside> как боковая панель вашего основного контента.
<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> ).
<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> элементы в нижнем колонтитуле.
<footer>©Company A</footer>
<small>
<small> элемент часто появляется в <footer> или <aside> элемент, который обычно содержит информацию об авторских правах или юридические заявления об отказе от ответственности и другую такую мелкую печать. Однако это не означает, что текст меньше. Он просто описывает его содержание, не предписывая презентацию.
<footer><small>©Company A</small> Date</footer>
<time>
<time> элемент позволяет однозначно устанавливать дату ISO 8601 на читаемую человеком версию этой даты.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
Зачем беспокоиться о <time> ? В то время как люди могут читать время, которое может однозначно рассортироваться через контекст, компьютеры могут считывать дату ISO 8601 и видеть дату, время и часовой пояс.
<figure> и <figcaption>
<figure> для обертывания содержимого изображения вокруг него и <figcaption> это заголовок вашего изображения.
<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>