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 предлагает новые семантические элементы для определения различных частей веб-страницы:

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."

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

HTML5 <article> Элемент

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

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

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

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

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

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

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

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

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

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

HTML5 <header> Элемент

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

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

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

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

HTML5 <footer> Элемент

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

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

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

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

HTML5 <nav> Элемент

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

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

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

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

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

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

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

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

С HTML5, изображения и подписи могут быть сгруппированы вместе в <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 .