Семантические элементы HTML5
Семантика = значение.
Смысловые элементы = смысл элемента.
Что такое семантические элементы?
Семантического элементы могут четко описать их значение для браузера и разработчиков.
Примеры несемантических элементов: <DIV> и <SPAN> - независимо от его содержания.
Примеры семантических элементов: <form>, <table> и <IMG> - четко определяет его содержание.
Поддержка браузеров
Internet Explorer 9 +, Firefox, Chrome, Safari и Opera поддерживают семантические элементы.
Примечание: Internet Explorer 8 и более ранние версии не поддерживают этот элемент , но в нижней части статьи предусматривает совместимое решение.
HTML5 новые семантические элементы
Многие существующие веб-сайты включают следующий HTML-код: <DIV ID = "нав">, <DIV класс = "заголовок"> или <DIV ID = "Footer">, чтобы указать навигационные ссылки, головы и хвоста.
HTML5 предоставляет новые семантические элементы, чтобы определить различные части веб-страницы:
- <Заголовок>
- <Nav>
- <Раздел>
- <Статья>
- <Кроме>
- <Figcaption>
- <Рисунок>
- <Footer>
HTML5 элемент <раздел>
<Раздел> тэг определяет раздел документа (раздел, раздел). Такие, как главы, заголовки, колонтитулы, или других частей документа.
В соответствии с W3C HTML5 документа: раздел содержит набор контента и его название.
примеров
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Попробуйте »
HTML5 <статья> элемент
<Статья> тег определяет независимое содержание. ,
<Статья> Элемент Пример:
- Форум сообщение
- сообщение в блоге
- Новости история
- комментарий
примеров
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
Попробуйте »
элемент HTML5 <нав>
<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>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Попробуйте »
HTML5 элемент <заголовок>
<Заголовок> элемент описывает область заголовка документа
<Заголовок> Элемент записке приводится описание область отображения используется для определения содержания.
На странице вы можете использовать несколько элементов <заголовок>.
Следующий пример определяет глава статьи:
примеров
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>
Попробуйте »
элемент HTML5 <сноска>
<Нижнего колонтитула> описывает нижнюю область документа.
<Footer> элемент должен содержать элементы, содержащиеся в нем
Колонтитул обычно содержит автора документа, информацию об авторских правах, ссылки условия использования, контактная информация и т.д.
Документ, который вы можете использовать элемент несколько <сноска>.
примеров
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
Попробуйте »
HTML5 <цифра> и элемент <figcaption>
<Рисунок> тег указан отдельный поток контента (изображения, графику, фотографии, код и т.д.).
Содержимое элемента <цифра> должен быть связан с основным контентом, но если он удаляется, не реагируют на воздействие потока документов.
<Figcaption> тег определяет заголовок элемента <рисунок>.
<Figcaption> элемент должен быть помещен в элемент «фигура» в первой или последней позиции дочерний элемент.
примеров
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
Попробуйте »
Мы можем начать использовать эти семантические элементы делать?
Вышеуказанные элементы являются блочные элементы (за исключением <figcaption>).
Для того чтобы эти блоки и элементы вступили в силу во всех версиях браузера, вам нужно настроить в файле атрибутов таблицы стилей (код далее стиль позволяет более старые браузеры поддерживают блочные элементы в этой главе):
{
display: block;
}
Internet Explorer 8 и более ранних версиях IE проблем
IE8 и более ранних версиях IE не могут быть оказаны в этих элементах, эффекты CSS, так что вы не можете использовать <заголовок>, <раздел>, <сноска>, <в сторону>, <нав>, <статья>, <цифра>, или другой элементы HTML5.
Решение: Вы можете использовать скрипт HTML5 Shiv Javascript для решения проблемы совместимости ИЭ. HTML5 Shiv Скачать: http://code.google.com/p/html5shiv/
После загрузки, следующий код на странице:
<script src="html5shiv.js"></script>
<![endif]-->
Приведенный выше код, если версия браузера меньше, чем IE9 будет загружен html5shiv.js файл, необходимо поместить его в элементе <HEAD>, потому что браузер IE требуется после загрузки головки рендеринга эти новые элементы HTML5