Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

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


Семантика является изучение значений слов и фраз на языке.

Семантические элементы являются элементами с смыслом.

Семантический HTML является использование HTML-разметки для усиления семантики, или значения, информации, содержащейся в веб-страниц и веб-приложений, а не просто определить его представление или внешний вид.

Семантический HTML обрабатывается традиционными веб-браузеров, а также многими другими агентами пользователей. CSS используется для предложить свою презентацию для человека пользователей.


Какие семантические элементы?

Семантический элемент четко описывает его значение как в браузере и разработчиком.

Примеры несемантических элементов: <div> и <span> - ничего не говорит о его содержании.

Примеры семантических элементов: <form> , <table> и <img> - четко определяет его содержание.


Поддержка браузеров

да да да да да

HTML5 семантические элементы поддерживаются во всех современных браузерах.

Кроме того, вы можете "teach" старые браузеры , как обращаться с "unknown elements" .

Читайте об этом в браузере поддержку HTML5 .


Новые семантические элементы в HTML5

Многие веб - сайты содержат HTML - код , как: <div id="nav"> <div class="header"> <div id="footer">
для обозначения навигации, заголовок и нижний колонтитулы.

HTML5 предлагает новые семантические элементы для определения различных частей веб-страницы:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 семантические элементы


HTML5 <section> Элемент

<section> элемент определяет раздел в документе.

Согласно документации HTML5 W3C в : "A section is a thematic grouping of content, typically with a heading." как "A section is a thematic grouping of content, typically with a heading." , "A section is a thematic grouping of content, typically with a heading."

Главная страница веба сайта может быть разделена на разделы для введения, содержания и контактной информации.

пример

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Попробуй сам "

HTML5 <article> Элемент

<article> элемент определяет независимое, самодостаточное содержание.

Статья должна иметь смысл сама по себе, и она должна быть возможность читать независимо от остальной части веб-сайта.

Примеры , где <article> элемент может быть использован:

  • Форум пост
  • Сообщение блога
  • Газетная статья

пример

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
Попробуй сам "

Вложенные семантические элементы

В стандарте HTML5, то <article> элемент определяет полный, автономный блок смежных элементов.

<section> элемент определен как блок смежных элементов.

Можем ли мы использовать определение, чтобы решить, как гнездовые элементы? Нет мы не можем!

В Интернете вы найдете HTML страницы с <section> элементы , содержащие <article> элементы и <article> элементы , содержащие <sections> элементы.

Вы также найдете страницы с <section> элементы , содержащие <section> элементы и <article> элементы , содержащие <article> элементы.

Газета: Спортивные articles в спортивном section , есть технический section в каждой article .


HTML5 <header> Элемент

<header> элемент определяет заголовок документа или раздела.

<header> элемент должен быть использован в качестве контейнера для вводного содержимого.

Вы можете иметь несколько <header> элементов в одном документе.

Следующий пример определяет заголовок для статьи:

пример

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
Попробуй сам "

HTML5 <footer> Элемент

<footer> элемент определяет нижний колонтитул документа или раздела.

<footer> элемент должен содержать информацию о его элемента.

Колонтитул обычно содержит автор информации документа, авторского права, ссылки на условия использования, контактная информация и т.д.

Вы можете иметь несколько <footer> элементов в одном документе.

пример

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer>
Попробуй сам "

HTML5 <nav> Элемент

<nav> элемент определяет набор навигационных ссылок.

<nav> элемент предназначен для больших блоков навигационных ссылок. Однако, не все ссылки в документе должны быть внутри <nav> элемента!

пример

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
Попробуй сам "

HTML5 <aside> в <aside> Элемент

<aside> элемент определяет некоторый контент в стороне от содержания она помещена в (like a sidebar) .

Стороне содержание должно быть связано с окружающим контентом.

пример

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Попробуй сам "

HTML5 <figure> и <figcaption> Элементы

В книгах и газетах, обычно иметь заголовки с изображениями.

Целью титров является добавление визуального объяснения к изображению.

С HTML5, изображения и подписи могут быть сгруппированы вместе в <figure> элементов:

пример

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
Попробуй сам "

<img> элемент определяет изображение, то <figcaption> элемент определяет заголовок.


Почему семантический HTML5 элементы?

С HTML4, разработчики использовали свои собственные любимые имена атрибутов элементов стиля страницы:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

Это сделало невозможным для поисковых систем, чтобы определить правильное содержание веб-страницы.

С HTML5 элементы , такие как: <header> <footer> <nav> <section> <article> , это будет легче.

В соответствии с W3C, семантического Web:

«Позволяет данные для совместного использования и повторного использования в различных приложениях, предприятий и общин.»

Соображения

В тех случаях, когда документ требует более точной семантики, чем те, выраженных в HTML один, фрагменты документа могут быть заключены в пролетных или Div элементов со значимыми именами классов, такими как <SPAN класса = «автор»> и <DIV класс = «счета» >. Там, где эти имена классов также идентификатор фрагмента внутри схемы или онтологии, они могут ссылаться на более определенное значение. Microformats формализовать подход к семантике в HTML.

Одно важное ограничение этого подхода состоит в том, что такая разметка на основе включения элемента должна соответствовать хорошо оформленностям условия. Поскольку эти документы широко древовидные, это означает, что только сбалансированные фрагменты из суб-дерева может быть размечена таким образом. Средство разметки любой произвольный участок HTML потребует механизм независимой от самой структуры разметки, такие как XPointer.

Хорошо семантический HTML также улучшает доступность веб-документов (смотри также веб-Руководство по доступу к Content). [Править] Например, когда читатель экрана или аудио-браузер может правильно установить структуру документа, он не будет тратить с ослабленным зрением пользователя время, зачитав повторяющуюся или ненужную информацию, когда она помечена правильно.


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

Ниже приведен алфавитный список новых семантических элементов HTML5.

Ссылки идут на наш полный HTML5 Reference .

Тег Описание
<article> Определяет статью
<aside> Определяет содержание в стороне от содержимого страницы
<details> Определяет дополнительные сведения о том, что пользователь может просмотреть или скрыть
<figcaption> Определяет заголовок для <figure> элемента
<figure> Определяет автономное содержание, как иллюстрации, диаграммы, фотографии, списки кодов и т.д.
<footer> Определяет нижний колонтитул документа или раздела
<header> Определяет заголовок документа или раздела
<main> Указывает, основное содержание документа
<mark> Определяет отмеченный / выделенный текст
<nav> Определяет навигационные ссылки
<section> Определяет раздел в документе
<summary> Определяет видимый заголовок для <details> элемента
<time> Определяет дату / время