Часть документа, часть тела, содержит контент, который посетители могут видеть. Традиционные документы HTML обычно организуют структуры документов через элементы Div и в сочетании с соответствующими таблицами стиля. Тем не менее, проблема DIV не хватает семантической информации. Особенно, если структура ткани страницы HTML не очень хороша, она легко вызовет путаницу. В связи с этим в HTML5 добавляются многие семантические элементы, чтобы заменить элементы Div и отдельную семантику и презентацию.
Все семантические элементы имеют значительную характеристику: они на самом деле ничего не делают, они мало влияют на содержание на внешности и даже не имеют никакого эффекта. Есть несколько причин существования семантических элементов:
1) Легко изменять и поддерживать. Через семантический элемент HTML5 можно передать дополнительную структурированную информацию, что позволяет людям легко понять общую планировку документа и роль различных блоков.
2) Не -стеснительное положение. Важной темой современного веб -дизайна является доступ к любому, чтобы получить доступ к веб -странице без препятствий, то есть люди, которые используют читатели экрана и другие вспомогательные инструменты, могут свободно перемещаться на странице.
3) Поисковая оптимизация. Использование HTML5 позволяет поисковым системам лучше понять ваш сайт и позволить им собирать больше информации на своих страницах индекса.
4) Будущая функция. Новые браузеры и инструменты для редактирования веб -редакции определенно будут использовать семантические элементы в будущем. Например: основная часть документа представлена.
Самое главное, что если вы правильно используете семантические элементы, вы можете создать более четкую структуру страниц, и вы можете адаптироваться к тенденции разработки будущих браузеров и инструментов веб -дизайна. Следующее введет семантические элементы для организационных структур документов.
Структура документа HTML5Старая HTML -страница использует элементы DIV в сочетании с соответствующими таблицами стилей, но проблема элемента DIV заключается в том, что она не отражает какую -либо информацию, связанную со страницей. Страница HTML5 предназначена для замены этих элементов DIV на описательные семантические элементы. Следующий пример содержит основные семантические элементы, используемые в HTML5 для описания структуры документа.
<body> <header> <hgroup> <h1> вещи, которые мне нравятся </h1> <h2> Адам Фриман </h2> </hgroup> <drade> Вопросы и комментарии? > </address> <vav> <h1> Содержание </h1> <li> <a href =#fruitsilike> фрукты мне нравятся </a> </li> <ul> <li> <a href =#moreFruit> Дополнительное из </a> </li> </ul> <li> <a href =#активность мне нравится </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> < li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul > <li> <li> <li> <li> <a href =#tritypes> виды триатлона </a> </li> <li> <a href =#mytri> Триатлон, который я стремлюсь к < /a> </li> </ul> </ul> </nav> </header> <main Room = main> <artadicle> <header> ...... </header> <в сторону> <h1 > Почему из IS Healthy </H1> <section> Здесь три причины каждый должен есть больше фруктов: <ol> <li> Фрукты содержит много витаминов </li> <li> Фрукты - источник клетчатки </li> <li> Fruit содержит W Callies </li> </ol> <section> << раздел> <p> Мне нравится плавать, цикть и бегать /p> <summary> виды триатлона </summary> Существуют различные виды триатлона - li> <li> 40 -километровый цикл </li> <li> 10 км запустить </li> </ol> </detail> </section> </article> </main> <av> Дополнительная информация: <a href = http: // fruit .org> Узнайте больше о фруктах </a> <a href = http://triathlon.org> Узнайте больше о Trithlons </a> </nav> <foloter id = Mainfooter> © 2011, Adam Freeman.
Приведенный выше документ содержит много элементов HTML5.
заголовокHTML определяет названную систему элементов, от H1 до H6, а H1 - самый высокий. Название одного и того же уровня обычно используется для разделения контента на несколько частей, каждую часть одной темы. Название на всех уровнях обычно используется для представления всех аспектов одной и той же темы. Они вместе составляют план документа, поэтому пользователи могут изначально понимать свою помощь и структуру, если они просматривают заголовок документа, и пользователи могут быстро перейти к контенту интереса через систему заголовков.
<body> <h1> фрукты мне нравятся </h1> ...... </body>Подзаголовок
Элемент hGroup может использоваться в качестве общей обработки (если элемент hGroup не используется, основной заголовок и субтитры будут использоваться в качестве двух заголовок, а после использования hGroup название и субтитры будут рассматриваться как заголовок), чтобы избежать очертания нарушая документ HTML.
<body> <hgroup> <h1> фрукты мне нравятся </h1> <h2> как я научился любить цитрусовые </h2> </hgroup> ...... </body> </body> </body >
Здесь, как я научился любить цитрусовые, существует как подзадача фруктов, которые мне нравятся.
Основная область страницы MarkОбычно существует только одна часть страницы, представляющая его основной контент.
<body> ...... <Main Rely = main> <artlicle> ...... </article> </main> ...... </body>
Роль = Main может помочь основной области страницы позиционирования считывателя экрана.
Создайте статьюЭлемент статьи представляет собой независимый контент в элементе HTML. Статья может быть вложена в другую статью. Одна страница может иметь несколько элементов статьи, каждая статья может быть создана независимо, и одна статья может содержать один или несколько элементов раздела (см. Следующий раздел).
<body> ...... <Main Rely = main> <Artadicle> <header> ...... </header> <в сторону> ... </wather> <section> ... ... ... ... ... ... ... ... ... ... ... </section> </article> <arttern <artader> ...... </header> <в сторону> ...... </wather> <section> .../section> </article>. .. </main> ...... </body>раздел
Элемент раздела является вновь добавленным HTML5, чтобы представлять раздел в документе. Не существует четкой спецификации для использования элемента раздела, но обычно элемент раздела должен использоваться, чтобы включить, который должен быть включен в схему документа или в каталог. Раздел может принадлежать к определенной статье, а статья может содержать один или несколько раздела. Элементы раздела обычно содержат один или несколько абзацев и один заголовок, но название не требуется.
<body> <section <hgroup> <h1> фрукты мне нравятся </h1> <h2> Как я научился любить цитрусовые </h2> </hgroup>, я люблю яблоки и апельсины. , Манго, вишни, абрикосы, сливы, персики и виноград.
Вышеуказанное определяет 3 секции, вложенные слои, название каждого раздела составляет H1. Однако в разных браузерах появление по умолчанию иерархической структуры раздела будет отличаться, и эта проблема может быть решена путем создания пользовательского стиля. Разница между разделом и статьей заключается в том, что раздел более организован и структурный по сути и может рассматриваться как независимый абзац, в то время как статья представляет собой контейнер.
Первый и хвостЭлемент заголовка представляет первый раздел, который может включать заголовок и логотип. Элемент заголовка обычно содержит элемент заголовка или элемент hgroup, а также может содержать навигационные элементы этого раздела. Страница может содержать произвольное количество элементов заголовка, и их значение может отличаться в соответствии с его контекстом.
Элемент FOOS представляет хвост раздела, который обычно содержит сводную информацию раздела, а также может включать введение автора, информацию об авторском праве, ссылки на связанный контент, логотип и исключительные операторы.
<body> <header> <hgroup> <h1> вещи, которые мне нравятся </h1> <h2> Адам Фриман </h2> </hgroup> </header> <seader> <hgroup> <h1> фрукты мне нравятся < /h1> <h2> Как я научился любить цитрусовые </h2> </hgroup> </header> ...... </section> <seader> <h1> Действия мне нравится </h1> </заголовок > .......
Этот пример определяет 3 элемента заголовка. Элемент заголовка элементов тела является первым из всего документа.
Примечание. Вы не можете быть вложены заголовком или другим нижним колонтитулом в нижнем колонтитуле, а также не может быть вложен в заголовок или элемент адреса.
Навигационная зонаЭлементы NAV представляют собой область навигации в документе, которая содержит ссылки на другие части других страниц или других частей одной и той же страницы. Не все ссылки должны быть размещены в элементах NAV.
<body> <header> <hgroup> <h1> вещи, которые мне нравятся </h1> <h2> Адам Фриман </h2> </hgroup> <vav> <h1> Содержание </h1> <ul> <li> <A href =#fruitsilike> фрукты мне нравятся </a> </li> <ul> <li> <a href =#moreFruit> Дополнительные фрукты </a> </li> </ul> <li> <a href =#activeilike> действия, которые мне нравятся </a> </li> <li> <a href =#tritypes> виды триатлона </a> </li> <li> <a href =#mytri> Triathlon Я стремлюсь к </a> </li> </ul> </ul> </nav> </header> <section> ...... </section> <section> .. ... .. > </nav> <идентификатор нижнего колонтитула = основной специалист> ...... </cooler> </body>
Здесь используются два элемента NAV.
Будьте осторожны, чтобы не помещать все ссылки в блоке NAV, NAV обычно следует использовать только в крупнейшей и наиболее важной области навигации на странице. Например, приведенная выше навигация документа необходима, чтобы поместить его в блок NAV, но если это только информация о лицензии и контактной информации, нет необходимости помещать его в блок NAV.
Аннотация БарВ стороне элемент используется для обозначения контента, который слегка окрашивается окружающим контентом, аналогично боковой панели в книге или журнале. Основной контент.
<body> <header> ...... </header> <Artadicle> <header> ...... </header> <hay Aflow> <h1> Почему плод здоровы </h1> <section> Здесь Ar threee oadereryone shuld едят больше фруктов: <ol> <li> фрукты содержит много витаминов </li> <li> Фрукты является источником клетчатки </li> <li> Фрукты содержит несколько лори. </Li> </ ol> <section> </asside> ...... </article> <идентификатор нижнего колонтитуриза
Вы можете использовать в стороне такие элементы, как панель заметок в печатном веществе, вы можете представить еще одну связанную тему или объяснить точку зрения, предложенную в основном документе. Вы также можете использовать элементы для хранения рекламных объявлений, связанных контент и т. Д.
Контактная информацияЭлемент адреса используется для представления контактной информации документа или элемента статьи. Если элемент адреса является субэлементом элемента статьи, контактная информация, которую он предоставляет, рассматривается как статья; Элемент адреса не может использоваться для представления адреса за пределами контактной информации документа или статьи, такой как: не может использоваться для представления адреса клиента или пользователя.
<body> <header> ...... <drade> Вопросы и комментарии?> ...... </body>Детальная область
Детали элементы генерируют область в документе, и пользователи могут начать ее, чтобы понять более подробную информацию о теме. Детали элементы обычно содержат сводный элемент для создания описания метки или заголовка для области деталей.
<body> <header> ...... </header> <artcticle> <header> ...... </header> <section> <p> Я люблю плавать, циклу и бегать Обучение для моего первого триатлона, но это тяжелая работа. : <ol> <li> 1,5 км плавать </li> <li> 40 -километровый цикл </li> <li> 10 км запуска </li> </ol> </section> </</section> </article> </body>
Детали элементы имеют вид по умолчанию в браузере.
Детали элементы будут сложены по умолчанию.
<Открытые детали> <summary> виды триатлона < /summary> Существуют различные виды триатлона -спринта, олимпийский и так далее. /li> <li> 10 км запустить </li> </ol> </defails>
Эффект заключается в следующем:
краткое содержаниеСемантические элементы HTML5 определяются на основе его изобретателей при изучении существующих веб -страниц. Если вы заинтересованы, вы можете просмотреть его здесь (сайт Google, вы не можете напрямую просмотреть его).
В настоящее время семантические элементы HTML5 были поддержаны во всех современных браузерах, но для некоторых старых версий браузера (в основном IE9 Internet Explorer) необходимы некоторые меры по исправлению положения. Поскольку семантические элементы не делают ничего, они должны их поддерживать, если браузер разрешается рассматривать их как обычные элементы Div, а остальная часть работы - добавить им некоторые правила стиля. проблематично. К счастью, эти работы Modernizr помогли вам достичь этого.