Элемент article


Содержание
Ассоциирован с заголовком «C». Также ассоциирован с абзацем «D». Нет вложенных разделов. Предполагаемый раздел для второго элемента h2 . Ассоциирован с заголовком «E». Также ассоциирован с абзацем «F». Нет вложенных разделов. Элемент, из которого сделан выход, это элемент заголовочного содержимого или элемент с атрибутом hidden . Вытолкнуть этот элемент из стэка. Если верх стэка это элемент заголовочного содержимого или элемент с атрибутом hidden Ничего не делать. При входе в элемент с атрибутом hidden Протолкнуть этот элемент в стэк. (Это заставит алгоритм пропустить этот элемент и всех его потомков.) При входе в элемент содержимого разделов Выполнить эти шаги: Если current outline target не null, выполнить эти подшаги: Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section . Протолкнуть current outline target в стэк. Пусть current outline target это элемент, в который делается вход. Пусть current section это вновь создаваемый раздел для элемента current outline target . Ассоциировать current outline target с current section . Пусть будет новый каркас для нового current outline target , инициализированный с новым только что созданным current section как единственным разделом в этом каркасе. При выходе из элемента содержимого разделов, если стэк не пустой Выполнить эти шаги: Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section . Вытолкнуть верхний элемент из стэка, а current outline target сделать этим верхним элементом. Пусть current section это последний раздел в каркасе элемента current outline target . Присоединить каркас элемента содержимого разделов, с которого выполняется выход, к current section . (Это не меняет того, какой раздел является последним разделом в каркасе .) При входе в элемент корня раздела Выполнить эти шаги: Если current outline target не null, протолкнуть current outline target в стэк. Пусть current outline target это элемент, в который делается вход. Пусть current outline target ‘а parent section это current section . Пусть current section это вновь создаваемый раздел для элемента current outline target . Пусть будет новый каркас для нового current outline target , инициализированный с новым только что созданным новым current section как единственным разделом в этом каркасе. При выходе из элемента корня раздела, если стэк не пустой Выполнить эти шаги: Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section . Пусть current section это current outline target ‘s parent section. Вытолкнуть верхний элемент из стэка, а current outline target сделать этим верхним элементом. При выходе из элемента содержимого разделов или из элемента корня раздела (если стэк пустой) Сurrent outline target это элемент, из которого делается выход, и это элемент содержимого раздела или корня раздела в корне поддерева, для которого генерируется каркас. Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section . Перескочить на следующий шаг в общем наборе шагов. (Проход завершён.) При входе в элемент заголовочного содержимого Если current section не имеет заголовка, пусть элемент, в который делается вход, будет заголовком для current section . Иначе, если элемент, в который делается вход, имеет ранг равный или выше, чем у заголовка последнего раздела в каркасе current outline target , или если заголовок последнего раздела в каркасе current outline target это предполагаемый заголовок, то создать новый раздел и присоединить его к каркасу элемента current outline target , чтобы этот новый раздел был новым последним разделом этого каркаса. Пусть current section это новый раздел. Пусть элемент, в который делается вход, будет заголовком для current section . Иначе, выполнить эти подшаги: Пусть candidate section это current section . Heading loop: Если элемент, в который делается вход, имеет ранг ниже, чем ранг заголовка в candidate section , то создать новый раздел и присоединить его к candidate section . (Это не меняет того, какой раздел является последним разделом в каркасе.) Пусть current section это новый раздел. Пусть , в который делается вход, будет новым заголовком для current section . Прервать выполнение этих подшагов. Пусть new candidate section это раздел, содержащий candidate section в каркасе current outline target . Пусть candidate section это new candidate section . Возвратиться к шагу heading loop. Протолкнуть элемент, в который сделан вход, в стэк. (Это заставит алгоритм пропустить всех его потомков этого элемента.) Отозваться, что h1 имеет высший уровень, а h6 – низший. Иначе Ничего не делать. Кроме того, всякий раз, когда проход по узлу завершается и делается выход, после выполнения вышеуказанных шагов, если узел ещё не ассоциирован с разделом, ассоциировать узел с разделом current section . Ассоциировать все узлы с заголовком раздела, с которым они ассоциированы, если имеются. Дерево разделов, созданное этим алгоритмом или его подмножеством, обязано использоваться при генерации каркасов документов, например, при генерации оглавления. Каркас, созданный для элемента body Document ‘a это каркас всего документа. При создании интерактивного оглавления его элементы должны переводить пользователя на соответствующий элемент содержимого раздела, если раздел был создан для реального элемента в оригинальном документе, или на соответствующий элемент заголовочного содержимого, если раздел в дереве был сгенерирован для заголовка в вышеуказанном процессе. Выбор первого раздела документа поэтому всегда приводить пользователя в начало документа, независимо от того, где первый заголовок в body найден. элемента заголовочного содержимого, ассоциированного с разделом section это количество разделов-предков section в самом внешнем каркасе, в котором сам section находится, когда каркасы элементов его Document ‘а создаются, плюс 1. Глубина каркаса элемента заголовочного содержимого, не ассоциированного с разделом, равна 1. ПАгентам следует предоставлять заголовки по умолчанию для разделов, не имеющих явных заголовков раздела. Хотя он не содержит заголовков, в нём имеется три раздела: документ ( body ) с двумя подразделами ( nav и aside ). ПА может показать этот каркас так: Эти заголовки по умолчанию («Untitled document», «Navigation», «Sidebar») не специфицированы данной спецификацией и могут отличаться для разных пользовательских языков, языков страниц, пользовательских настроек, настроек изготовителя ПАгента etc. 4.3.10.2 Примеры каркаса Этот раздел не является нормативным. Эта книга может сформировать такой каркас: The Tax Book Earning money Getting a job Spending money Cheap things Expensive things Investing money Losing money Poor judgement Заметьте, что элемент title не участвует в каркасе. Эта книга формирует такой же каркас: The Tax Book Earning money Getting a job Spending money Cheap things Expensive things Investing money Losing money Poor judgement Это может сформировать такой же каркас из трёх разделов верхнего уровня: Фактически элемент body разделён на три. Рассмотрим, например, следующий код – это предыдущий пример, но содержимое (предполагаемого) body обёрнуто в section : Результирующий каркас может быть таким: Результат описан как unintuitive (неинтуитивный), поскольку даёт три подраздела, хотя имеется только один элемент section . Фактически этот section разделяется на три, точно как body в предыдущем примере. (В этом примере » (untitled page)» это предполагаемый заголовок для элемента body , поскольку он не имеет явного заголовка.) Результирующий каркас может быть таким: (untitled page) A plea from our caretakers Feathers Таким образом, когда элемент article стартует с блока nav и только потом имеет заголовок, результатом станет то, что блок nav не будет частью того же раздела, что остаток article в каркасе. Например, этот документ: может дать такой итоговый каркас: Ray’s blog Untitled article Untitled navigation section We’re adopting a child! Кроме того, в это примере следует отметить, что элементы header и main не имеют никакого влияния на каркас документа. 4.3.11 Резюме об использовании Этот раздел не является нормативным. Элемент Назначение Пример body article section nav aside h1 – h6 Заголовок раздела header footer 4.3.11.1 Article или section? Этот раздел не является нормативным. Раздел section образует часть чего-то ещё. Статья article это нечто самостоятельное. Но как узнать, кто есть кто? Наиболее реальный ответ – «это зависит от намерений автора». Например, можно представить себе книгу с главой «Granny Smith», в которой сказано только: «These juicy, green apples make a great filling for apple pies.»; это может быть section , потому что может быть множество других глав о (возможно) других сортах яблок. С другой стороны, можно представить твит, reddit-комментарий, tumblr-пост или классифицированную газетную статью, в которой просто сказано: «Granny Smith. These juicy, green apples make a great filling for apple pies.»; это уже может быть article s, так как это некий цельный объект. Комментарий или статья не являются частью article , в которой комментируются, следовательно, это его собственный article .
  • Создание навигационных ссылок с помощью элемента
  • Создание разворачиваемых блоков с помощью элементов и
  • Что выбрать: div , section , article .
  • Семантическая структура для HTML5 страницы. Семантика в HTML5
  • Семантическая структура для HTML5 страницы
  • DOCTYPE и meta теги в заголовке страницы
  • Заголовок страницы
  • Навигация на странице
  • Контент на странице
  • Оформление статьи
  • Сайдбар или колонка с виджетами
  • Тег section
  • Подвал сайта — Footer
  • Заключение
  • HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
  • Тэги header и footer
  • Самый сайт
  • Самый сайт
  • Тэг nav
  • Тэг aside
  • Тэг section
  • Тэг article
  • Тэг hgroup
  • Самый сайт
  • Здесь описание Самого сайта
  • Тэг main
  • HTML5
  • Рекомендации W3C от 28 октября 2014 г.
  • 4.3 Разделы
  • 4.3.1 Элемент
  • My Book
  • My First Chapter
  • It Continutes: The Second Chapter
  • Chapter Three: A Further Example
  • Appendix A: Overview of Examples
  • Appendix B: Some Closing Remarks
  • 4.3.4 Элемент
  • 4.3.5 Элемент
  • 4.3.6 Элементы , , , , и
  • 4.3.7 Элементы
  • 4.3.8 Элементы
  • 4.3.9 Элементы
  • 4.3.10 Заголовки и разделы
  • 4.3.11 Резюме об использовании
  • Илон Маск рекомендует:  Эффект пламени

    Как правильно использовать теги div, section и article.

    Всем привет! В этой статье мы рассмотрим, как правильно использовать теги div, section и article в HTML5.

    Помимо всем известного и очень часто используемого тега div, в HTML5 появились новые, семантические теги, которые позволяют более четко разделить контент на вашем сайте и тем самым помочь поисковым роботам в их нелегкой работе. Однако, к сожалению, многие верстальщики еще не научились их использовать правильно, особенно те, которые обозначены в начале статьи. Надеюсь, что после прочтения данной статьи вопросы по этому поводу, если и не пропадут совсем, то их станет, как минимум, меньше. Итак, приступим.

    Если вы откроете сайт W3C, то можете найти там рекомендацию, смысл которой заключается в том, что использовать данный тег нужно для семантически несвязанного между собой контента. Очень часто div используют для того, чтобы сгруппировать какой-нибудь контент, который затем нужно спозиционировать или как-то оформить с помощью css.

    Section

    Данный элемент используется, наоборот, для семантически связанного между собой контента. Содержимое такого тега должно обладать общей темой. К примеру, новости на новостном сайте:

    Последние новости

    Article

    Этот элемент также должен обладать общей темой и содержать семантически связанный между собой контент, однако этот самый контент должен быть автономен, т.е. вы можете взять отдельный article, убрать его со страницы, но при этом смысл содержимого внутри него не потеряется. Все на том же примере новостного сайта можно сказать, что каждая отдельная новость будет выделена тегом article, т.к., если изолировать ее со страницы, она не потеряет смысл, но все новости вместе будут обрамлены тегом section, т.к. это отдельный большой блок с общей темой, и он не может быть изолирован. Согласитесь, если мы оставим на странице просто блок с новостями, он будет «не к месту», а если оставим одну конкретную новость, то все будет вполне логично.

    Конечно, все зависит от конкретной ситуации, но чаще всего вы можете разметить свою страницу правильно, используя следующее правило: если контент семантически связан между собой и может быть изолирован со страницы без потери смысла, то используйте article. Если не может быть изолирован со страницы без потери смысла, используйте section. В остальных случаях – div.

    Итак, на этом все. Надеюсь, что данная тема вам ясна и теперь вы будете размечать ваши интернет-странички грамотно. Спасибо за внимание и удачи!

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 5 ):

    Ни чего не понятно. Михаил, покажи полный пример. Одна или две строчки мне не о чём не говорят. Тут как минимум 2 примера нужно с article и section.

    Здесь все более чем понятно. Перечитайте статью снова. На ваш вопрос есть ответ в разделе Article, в самом начале. Нужен пример? Держите! Отдельная статья на сайте(новость или еще что-нибудь) будет в теге article, но все статьи(новости и т.д.) ВМЕСТЕ будут обрамлены тегом section

    Александр, aricle в переводе на русский, значит статья — это понятно, все статьи должны быть в теге article. А по мне вот правильный пример двух тегов:

    Вот такой пример я здесь вижу. И Вам Александр, нужно было именно так и написать пример, то есть показать код в качестве примера.

    Тема не такая уж и простая,сложно сразу все правильно сделать.Кстати, вот тут есть вы сможете найти решение.если что-то не так сделали http://sitepark.ua/osnovnye-oshibki-pri-sozdanii-saytov

    Крутая статья, спасибо за полезный материал!

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

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

    Семантические элементы являются одним из значимых нововведений в HTML5. До их появления вся разметка веб-страниц строилась при помощи элементов

    В HTML5 появились новые семантические элементы для структурирования, группировки контента и разметки текстового содержимого. Они четко описывают, какой контент содержат (было

    Рассмотрим подробнее семантические элементы и их значения.

    Элемент

    Элемент формирует заголовочный блок или “шапку” документа, используется как контейнер для группировки вводных и навигационных элементов (логотип, навигационное меню, форма поиска и т.д.).

    HTML5 — Элемент section

    Статья, в которой рассматривается HTML-элемент section из категории sectioning.

    Назначение элемента section

    Элемент section используется для создания секции в документе, которая группирует некоторый тематический контент вместе. Для каждой секции в документе следует указывать её название (тему). Это, как правило, осуществляется с помощью заголовков (элементов h1 — h6 ).

    Элементы section , обычно применяются в следующих случаях:

    • для разметки разделов внутри секции. Например, для разметки глав в статье, вкладок в диалоговом окне, разделов в диссертации и т.п.
    • для группировки нескольких секций в одну тематическую группу. Например, для группировки последних новостей на сайте, комментариев к статье и т.п.

    Применение элемента section

    Например, рассмотрим фрагмент кода страницы, содержащий статью с комментариями. Каждый из комментариев, оставленных пользователем на странице, содержит некоторый завершенный контент и, следовательно, может рассматриваться как элемент article . Но, в тоже время все комментарии представляют некоторую тематическую группу, и следовательно их можно поместить в элемент section , т.е. данный элемент сгруппирует все эти комментарии на странице вместе.

    Вышеприведенный пример будет иметь следующую структуру (outline):

    Например, рассмотрим применение элементов section для создания разделов внутри элемента article :

    Вышеприведенный пример будет иметь следующую структуру (outline):

    Ограничения при использовании элемента section

    Элемент section в HTML 5 не является универсальным элементом для группировки содержимого, т.е. его не следует использовать для оборачивания любого понравившегося контента. Его основное назначение это добавление семантики в документ и создание его структуры (outline).

    Когда автору необходимо сгруппировать контент, только для того, чтобы применить к нему стили или поработать с ним в сценарии JavaScript, ему в этом случае лучше всего будет воспользоваться элементом div . Элемент div в отличие от элемента section , не добавляет семантики в документ и не участвует в создании его структуры (outline).

    Отличие между элементами section и article

    Элементы section и article хоть и кажутся на первый взгляд очень похожими, но имеют различное семантическое значение. Элемент article предназначен для группирования контента, который представляет собой нечто завершённое, самостоятельное и которое может рассматриваться отдельно от остального содержимого страницы. А элемент section несёт в себе другой семантический смысл, он предназначен для группировки контента, который является составной частью чего-то другого.

    Но как автору узнать, что собой представляет некоторый контент на странице? Давайте рассмотрим это на примере фрагмента статьи. Фрагмент — это часть статьи и, следовательно, для группировки его контента необходимо применять элемент section . Но этот же фрагмент, уже оставленный в качестве комментария, будет представлять собой нечто целое, завершенное. Следовательно, в этом контексте для его группировки можно использовать элемент article . Но рассуждать, конечно, можно и наоборот. Поэтому, какой элемент использовать для группировки контента, в большинстве случаев зависит от вашего субъективного мнения как автора. Но самое главное в этом подходе поддерживаться выбранной позиции. Поэтому чем автор будет более последовательным в создании структуры, тем он сможет больше смысла в неё вложить.

    Чем отличается тег section от article?

    Макет содержит блок, в котором содержится 2 блока. Левый блок для новостей, правый для блоков с информацией (поиск, меню и т.п.). Какие теги использовать для блока новостей, что подставить вместо . div не предлагать, хочу понять принцип новых тегов html5.

    • Вопрос задан более двух лет назад
    • 6869 просмотров

    W3C пишет, что section — любая часть (заголовок, основной контент, сайдбар), а article — независимый контент.

    тем что эти теги можно и нужно никогда не использовать


    Как пользоваться секционными элементами HTML5

    Дата публикации: 2014-03-28

    От автора: В HTML5 представлены несколько секционных элементов, которые можно применять для разметки веб-страниц. Использование таких элементов передает страницам больше семантического смысла, позволяя компьютерным программам лучше понимать ваш контент.

    Из этого поста вы узнаете, как применять элементы секционирования в собственных веб-сайтах. Я поясню, когда следует пользоваться данными элементами, а когда другими, а также когда лучше всего придерживаться старого доброго div.

    Элемент main

    Элемент main должен содержать основной контент вашей веб-страницы. Ему следует быть единственным в своем роде для отдельной страницы, и он не должен появляться на сайте где-то еще. Любой контент, повторяющийся на нескольких страницах (логотипы, поля поиска, ссылки нижнего колонтитула и пр.), помещать в элемент main нельзя.

    В нижеприведенном примере элемент main применяется для представления основного содержимого страницы.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Заметьте: мы применили здесь атрибут ARIA role=”main” для указания на значимость этого элемента для программ, которые пока не поддерживают элемент main (таких как некоторые screen reader-ы).

    На странице следует использовать всего один элемент main, и его нельзя размещать внутри элементов article, aside, header, footer или nav.

    Элемент article

    В элементе article должен содержаться фрагмент автономного содержимого, которое можно распределять вне контекста страницы. Оно включает в себя новые статьи, посты блогов или комментарии пользователей.

    Элементы article можно размещать один в другом. В данном случае подразумевается, что вложенные элемент связаны с внешним элементом article.

    В данном примере мы применили элементы article для разметки поста блога и каждого из комментариев. Такая модель вложения подразумевает, что комментарии связаны с темой основного поста блога.

    Элемент section

    Элемент section применяется для представления группы связанного содержимого. Он аналогичен элементу article с тем лишь отличием, что содержимому внутри элемента section не обязательно иметь смысл вне контекста страницы.

    Для определения темы раздела советуем пользоваться элементом заголовков (h1 – h6).

    Воспользуемся данным постом блога как примером: можно взять элементы section, представляющие внутри поста каждый раздел по отдельности.

    Здесь мы применили элемент article, чтобы представить пост как одно целое, а затем множеством элементов section, чтобы представить каждый из обсуждаемых в посте подразделов. Если вам нужно просто сгруппировать содержимое с целью назначения ему стилей, вам следует воспользоваться элементом div, а не section.

    Элемент nav

    Элемент nav применяется для разметки набора ссылок на внешние страницы или разделы внутри текущей страницы. Применяемый для основной навигации веб-сайта, элемент nav также отлично подходит для оглавления или просмотра списка блогов.

    Илон Маск рекомендует:  Что такое код pspell_config_ignore

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Элемент aside

    Элемент aside применяется для представления содержимого, четко связанного с окружающим его контентом, но которое можно счесть отдельным. Это включает боковые колонки (такие, как можно видеть в книге), группы элементов nav, цифровые данные и извлеченные цитаты.

    В этом примере для разметки информации о Google внутри новостной статьи мы воспользовались элементом aside. Пользователь может счесть информацию о компании в aside полезной, но с новостями она напрямую не связана.

    Элемент header

    Элемент header применяется для представления вводного содержимого к статье или веб-странице. Обычно он содержит элемент заголовка, а также существенные для содержимого метаданные, такие как дата поста или новостной статьи, например. В нем также может содержаться оглавление (в элементе nav) более длинного документа.

    Элемент header будет связан с ближайшим элементом секционирования, обычно это прямой родительский элемент страничной структуры.

    В данном примере элемент header содержит заголовок и дату новостной статьи.

    Элемент footer используется для представления информации о разделе: автор, копирайт или ссылки на связанные веб-страницы.

    Как и в случае с header, элемент footer связывается с ближайшим элементом секционирования.

    Элемент address

    Элемент address — один из самых неверно понимаемых элементов HTML. Он предназначен не для разметки почтового адреса, а для представления контактной информации статьи или веб-страницы. Это может быть ссылка на сайт автора или его электронный адрес.

    Этот элемент часто используется внутри footer для article.

    Последние размышления об элементах секционирования

    Из этого поста вы узнали, как пользоваться элементами секционирования HTML5 при разметке веб-страниц. Их применение гарантирует массу преимуществ. Одно из основных – передача определенным областям страницы более семантического значения, создание возможности для компьютерных программ идентифицировать ключевые элементы, такие как основной контент и страничная навигация. Эта информация чрезвычайно важна для таких приложений, как screen reader-ы.

    Обратите внимание: не все скринридеры пока могут похвастать поддержкой этих семантических элементов. Для безопасности вам, может быть, придется продолжить пользоваться ролями ARIA.

    Еще применение элементов секционирования дает следующее преимущество: оно заставляет разработчиков лучше обдумывать структуру своих веб-страниц. Выбор того, какой элемент применить для очередного фрагмента содержимого, не всегда однозначен, но он поднимает важный вопрос целей этого содержимого, и отведено ли ему вообще место на этой странице. Это пример, где веб-стандарты помогают улучшить не только качество разметки, но и качество веб-страниц вообще.

    Мне интересно узнать, что вы думаете об элементах секционирования HTML5. Поделитесь своим мнением в разделе комментариев под постом.

    Автор: Matt West

    Редакция: Команда webformyself.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

    Один элемент в особенности — скромный

    Форматирование страниц с применением элемента

    Эта ситуация заставила разработчиков задуматься, нельзя ли заменить элемент

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

    Новые семантические элементы HTML5 позволяют улучшить структуру веб-страницы, добавляя смысловое значение заключенному в них содержимому . Например, новый элемент обозначает действительную дату или время веб-страницы. Вот самый простой пример использования этого элемента:

    В браузере эта разметка отображается как обычный текст «Регистрация начнется 2012-11-25».

    Здесь важно понимать то обстоятельство, что элемент не обладает никакими встроенными возможностями форматирования. По сути, ничто не говорит устройству для чтения веб-страниц о том, что дата в коде страницы заключена в дополнительный элемент. Хотя к элементу можно добавить дополнительное форматирование с помощью таблицы стилей, по умолчанию он ничем не отличается от обычного текста.

    В данном случае, элемент предназначен содержать одну единицу информации. Но большинство семантических элементов HTML5 не такие: они служат для обозначения блоков содержимого большего размера. Например, элемент обозначает набор ссылок для перемещения по содержимому, элемент в коде обрамляет нижний колонтитул страницы и т.д.

    Хотя семантические элементы наименее впечатляющие из новых возможностей HTML5, они составляют одну из самых больших групп. По сути, большинство новых элементов HTML5 является семантическими элементами.

    Все семантические элементы имеют одну общую отличительную особенность: они по существу ничего не делают. В противоположность, элемент , например, вставляет в веб-страницу полноценный видеоплеер. Зачем же тогда утруждать себя использованием набора новых элементов, которые никак не изменяют внешний вид веб-страницы? Этому есть несколько хороших причин:

    Более удобное редактирование и сопровождение . Разметка традиционной HTML-страницы может быть трудной для понимания. Чтобы понять общую структуру и значение отдельных блоков страницы, часто приходится исследовать ее таблицу стилей. А использование семантических элементов HTML5 позволяет разработчику предоставить в разметке страницы дополнительную информацию о ее структуре. Это облегчит вам жизнь, когда потребуется редактировать эту страницу через несколько месяцев, и будет еще более кстати, если вашу работу придется редактировать кому-то другому.

    Доступность . Одной из ключевых тем в сфере современного веб-дизайна является создание доступных страниц, т. е. страниц, которые пользователи могут просматривать и перемещаться по ним с помощью программ-ридеров и вспомогательных средств.

    Оптимизация поисковых движков . Поисковые движки наподобие Google или Yandex используют мощные поисковые роботы — автоматизированные программы, которые методически обходят Интернет и просматривают все страницы, которые они могут найти — для сканирования содержимого веб-страниц и составления для них указателей в своих поисковых базах данных.


    Чем лучше Google понимает вашу веб-страницу, тем больше шансов, что он сможет сопоставить ее содержимое с поисковым запросом, и тем больше шансов, что ваша веб-страница будет отображена в результатах чьего-либо поиска. В настоящее время поисковые роботы уже проверяют на наличие некоторых семантических элементов HTML5, чтобы собрать всю возможную информацию об индексирующих их веб-страницах.

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

    Модифицирование традиционной HTML-страницы

    Легче всего начать знакомство с новыми семантическими элементами, а также обучаться их применению для структурирования страницы на классическом HTML-документе и вставить в него некоторые облагораживающие элементы HTML5. На рисунке ниже показан первый пример, который вы можете попробовать реализовать:

    Это простая, самодостаточная веб-страница, содержащая статью, хотя другие типы содержимого (например, сообщения блогов, описание продукта или короткий рассказ) вполне бы подошли для этих целей.

    Структурирование страницы старым способом

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

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

    В хорошо написанной, традиционной HTML-странице (подобной этой) большинство работы по форматированию отдается на откуп таблице стилей посредством контейнеров

    В данном случае перед таблицей стилей стоит легкая задача форматирования. Для всей страницы установлена максимальная ширина в 1000 пикселов, чтобы текст не отображался длинными строками на широкоформатных мониторах. Верхний колонтитул помешен в блок синего цвета, содержимое отцентрировано:

    Структурирование страницы с помощью HTML5

    Чтобы исправить такую ситуацию, в HTML5 некоторые элементы

    Далее приводится разметка страницы, показанной на рисунке выше, но с применением новых элементов. В частности, два элемента

    Соответственно изменятся и селекторы стилей CSS:

    Оба подхода одинаково действенные. Такая гибкость, без необходимости следовать жестким правилам, в HTML5 присуща многим решениям по разработке веб-страниц.

    Обратите внимание на блок

    Наконец, есть еще один элемент, который стоит добавить в этот пример. Это элемент , который представляет завершенную, самодостаточную единицу содержимого, например запись в блоге или новостную заметку. Элемент обрамляет заголовок, строку с именем автора и основное содержимое. Добавив элемент к разметке, получим следующую структуру:

    Конечная структура страницы показана на рисунке:

    Хотя новая разметка отображается в браузере точно так же, как и старая, сама разметка содержит довольно много дополнительной информации. Например, заглянувший на ваш сайт поисковый робот по элементу может быстро разобраться, где находится содержимое страницы, а по элементу — где заголовок содержимого. Элемент не будет представлять для него интереса.

    В предыдущем примере мы удачно применили элемент . Но кроме этого элемента в HTML5 добавлен еще один элемент для работы с заголовками: . Официальные правила его применения следующие.

    Прежде всего, для обычных отдельных верхних колонтитулов, не имеющих специального содержимого, вполне подойдет один из пронумерованных элементов заголовка —

    и т.д. А заголовок и его подзаголовок можно вместе обернуть в элемент (но в таком случае не пытайтесь втиснуть туда что-либо другое, кроме пронумерованных элементов заголовка).

    Увесистый верхний колонтитул, т.е. включающий кроме заголовка еще какое-то содержимое (например, краткое содержание статьи, дату публикации, имя автора, изображение или ссылки на подтемы), можно обернуть в элемент :

    Это, конечно же, несколько модифицированное содержимое из предыдущего примера: вместо элемента подзаголовок обозначен элементом

    С первого взгляда такая разметка может показаться потенциально сбивающей с толку. С точки зрения структуры она могла бы подразумевать, что все последующее содержимое является частью подраздела, который начинается с заголовка второго уровня, что не имеет особого смысла. В конце концов, кому нужна статья, состоящая целиком из одного большого подраздела? И даже если такая структура не влияет на отображение страницы в браузере, она меняет принцип создания схемы документа браузерами и другими инструментами.

    К счастью, эта проблема решается автоматически элементом . В структурном аспекте он обращает внимание только на заголовки верхнего уровня (в данном случае это

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

    Вставка рисунков с помощью элемента

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

    В общем, рисунки размещаются как плавающие объекты, т.е. их вставляют в первое удобное место в тексте, вместо того чтобы закреплять возле конкретного слова или элемента. Часто рисунки снабжены подписями, которые плавают вместе с ними.

    В следующем листинге показан пример разметки HTML, которая добавляет рисунок к статье с помощью стандартного синтаксиса:

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

    Если вам уже приходилось раньше создавать подобный код для вставки рисунка то, возможно, будет интересно узнать, что HTML5 предоставляет новые семантические элементы, которые идеальным образом подходят для данного типа задач. В частности, вместо использования банального элемента

    Добавление боковой панели с помощью элемента

    Новый элемент представляет содержимое, которое по смыслу связано с окружающим его текстом. Например, его можно использовать как врезку в печатной работе, чтобы ввести связанную тему или развить вопрос, исследуемый в основном документе. Логично применять элемент также в случаях, когда нужно где то примостить блок объявлений, несколько ссылок на связанное содержимое или даже броскую цитату во врезке.

    Этот эффект можно с легкостью создать с помощью хорошо приработанного элемента

    В этот раз таблица стилей врезает плавающую цитату справа:

    Создание навигационных ссылок с помощью элемента

    HTML5 позволяет создавать средства навигации по сайту с помощью семантического элемента . Элемент служит оболочкой для блока ссылок, указывающих на тематические разделы текущей страницы или на другие страницы веб-сайта.

    Большинство страниц имеет несколько блоков . Но не все ссылки требуется помещать в блоки , обычно этот блок резервируется для самых больших и наиболее важных разделов навигации страницы. Ниже показан пример использования этого элемента:

    Создание разворачиваемых блоков с помощью элементов и

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

    В этом отношении представляет интерес то обстоятельство, что HTML5 добавляет два семантических элемента, предназначенных для автоматизации этого поведения. Идея заключается в том, что разворачиваемый блок вставляется в элемент , а заголовок блока — в элемент . Получим разметку наподобие следующей:

    Браузеры, которые поддерживают эти элементы, показывают только заголовок и какую-либо безделицу типа небольшого треугольничка рядом с заголовком. Когда пользователь щелкает по заголовку, блок разворачивается, показывая все свое содержимое. Браузеры без поддержки элементов и покажут все содержимое с самого начала, не предоставляя пользователю никакой возможности свернуть его.

    Отношение веб-разработчиков к элементам и несколько противоречивое. Многие из них считают, что эти элементы не совсем семантические, т.е. они имеют дело больше со стилем, чем с логической структурой.

    Но пока лучше всего избегать использования элементов и из-за низкого уровня их поддержки браузерами. Хотя можно было бы написать обходное JavaScript-решение для браузеров, не поддерживающих этих элементов, но для этого потребуется больше усилий, чем для написания нескольких строк JavaScript для выполнения операций сворачивания/разворачивания самостоятельно и к тому же на любом браузере.

    Что выбрать: div , section , article .

    Заметным отличием HTML5 от предшествующих версий языка разметки гипертекста является претерпевший существенные изменения словарь, включивший в себя ряд совершенно новых и пока еще не слишком привычных разработчикам структурных элементов.

    В частности, авторами перспективного стандарта нам было предложено множество разнообразных элементов секционирования контента — так, абсолютно новыми, не имевшими аналогов в прошлом, элементами этой категории являются: , ,

    • Искать на сайте:
    • Поделиться ссылкой на эту страницу:

    © WebHiTech , 2008—2012 (информация о проекте).

    Проект развивается при поддержке компании RU-CENTER .

    Семантическая структура для HTML5 страницы. Семантика в HTML5

    Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про новые семантические теги в HTML5. Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.

    Семантическая структура для HTML5 страницы

    В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.

    Рисунок — Семантическая структура для HTML5 страницы.

    DOCTYPE и meta теги в заголовке страницы

    Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :


    Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

    Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные

    Заголовок страницы

    Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

    Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

    Замечание по поводу тега H1

    Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

    До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

    Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

    Контент на странице

    Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!

    Оформление статьи

    Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

    На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″ . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

    Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

    Сайдбар или колонка с виджетами

    Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

    Тег section

    Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

    ) для обозначения темы секции.

    В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

    Пример использования тега section в списке с перечислением городов:

    Подвал сайта оформляется тегом

    Заключение

    Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

    В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

    Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

    Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.

    Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.

    Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.

    По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.

    Можно, например, типичную запись:

    Самый сайт

    переписать по-новому так:

    Самый сайт

    И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

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

    header, footer, nav, article

    Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.

    Тэг nav

    nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.

    Тэг aside

    aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

    Тэг section

    section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.

    Тэг article

    article — служит для разбивки страницы на отдельные статьи.

    Оба тэга section и article обладают рядом интересных особенностей.

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

    Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:

    Тэг hgroup

    hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

    Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

    Самый сайт

    Здесь описание Самого сайта

    UPD 24.02.2020: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

    Тэг main


    main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.

    Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main.

    В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!

    Тэг main не является структурным тэгом и никак не влияет на разметку страницы!

    Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности.

    И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:

    HTML5

    Грамматика и ассоциированные API для HTML и XHTML

    Рекомендации W3C от 28 октября 2014 г.

    4.3 Разделы

    4.3.1 Элемент

    My Book

    A sample with not much content

    Published by Dummy Publicorp Ltd.

    My First Chapter

    This is the first of my chapters. It doesn’t say much.

    But it has two paragraphs!

    It Continutes: The Second Chapter

    Bla dee bla, dee bla dee bla. Boom.

    Chapter Three: A Further Example

    It’s not like a battle between brightness and earthtones would go unnoticed.

    But it might ruin my story.

    Appendix A: Overview of Examples

    These are demonstrations.

    Appendix B: Some Closing Remarks

    Hopefully this long example shows that you can style sections, so long as they are used to indicate actual sections.

    4.3.4 Элемент

    Элемент nav представляет раздел страницы, содержащий ссылки на другие страницы или на разделы этой же страницы: раздел со ссылками для навигации.

    В тех случаях, когда содержимое элемента nav представляет список элементов, используйте списочную разметку для облегчения понимания структуры навигации.

    Не все группы ссылок на странице должны быть в элементе nav — этот элемент прежде всего предназначен для разделов, состоящих из больших блоков навигации. Особенно часто он применяется для футеров-сносок для показа краткого списка ссылок на различные страницы сайта, такие как условия сервиса, домашняя страница и страница авторских прав. Элемента footer одного достаточно для таких случаев; хотя элемент nav может быть использован в таких случаях, это обычно не требуется.

    Пользовательские агенты (вроде экранных ридеров), предназначенные для пользователей, которые могут извлечь пользу из навигационной информации, отсутствующей в начальном отображении, или которые могут извлечь пользу из навигационной информации, доступной сразу, могут использовать этот элемент как способ определения того, какое содержимое страницы сначала пропускать или предоставлять при запросе (или то и другое).

    Обратите внимание на элемент main , использованный как оболочка для главного содержимого страницы. В данном случае – всего содержимого, кроме хедэров и футеров.

    В предыдущем примере можно видеть также microdata-аннотации, которые используют словарь schema.org для предоставления даты публикации и др. метаданных об этой статье блога.

    4.3.5 Элемент

    Элемент aside представляет раздел страницы, состоящий из содержимого, которое попутно связано с содержимым элемента aside , и которое может рассматриваться отдельно от этого содержимого. Такие разделы в книгопечатании часто представлены как боковые панели.

    Этот элемент может использоваться для типографских эффектов вроде вставки цитат или боковых панелей, для рекламы, для групп элементов nav и иного содержимого, которое воспринимается отдельно от основного содержимого страницы.

    Не следует использовать элемент aside просто для выделения, поскольку выделения являются частями основного потока документа.

    4.3.6 Элементы , , , , и

    Эти элементы представляют заголовки своих разделов.

    Семантика и значение этих элементов определены в разделе Заголовки и разделы.

    Эти элементы имею ранг, заданный номером в их имени. Элемент h1 имеет высший ранг, элемент h6 – низший, а два элемента с одинаковыми именами имеют равный ранг.

    Элементы h1 – h6 обязаны не использоваться для разметки подзаголовков, субтитров и альтернативных заголовков, если только они не предназначены для заголовков новых разделов или подразделов. Вместо них используйте патэрны разметки раздела Общие идиомы без конкретный выделенных элементов данной спецификации.

    Авторы могут предпочесть первый стиль – из-за его лаконичности, или второй – из-за удобства при длительном редактировании; что лучше – полностью зависит от авторских стилевых предпочтений.

    4.3.7 Элементы

    Элемент header представляет вводное содержимое для ближайшего предка – элемента содержимого раздела или корня раздела. Элемент header обычно содержит группу вводных или навигационных вспомогательных средств.

    Если ближайший предок – элемент содержимого раздела или корня раздела – является элементом body, то header применяется ко всей странице.

    Элемент header обычно предназначен как контейнер заголовков разделов (элементы h1 – h6 ), но это не требуется. Элемент header может также использоваться как оболочка оглавления раздела, форма поиска, или любых уместных логотипов.

    Следующий отрывок показывает, как этот элемент можно использовать для разметки заголовка спецификации:

    Элемент header это не содержимое раздела; он не создаёт новый раздел.

    4.3.8 Элементы

    Элемент footer представляет футер для ближайшего элемента-предка содержимого раздела или корня раздела. Футер обычно содержит следующую информацию о своём разделе: кто написал его, ссылки на документы, авторские права и т. п.

    Когда элемент footer содержит полные разделы, они представляют приложения, индексы, длинные колофоны, подробные лицензионные соглашения и др. подобное содержимое.

    Контактная информация автора или редактора раздела принадлежит элементу address , который, возможно, сам находится внутри footer . Подписи и др. информация, которая может подходить и для header , и для footer , может размещаться в любом из них (или ни в одном). Основное назначение этих элементов – просто помочь автору в написании интуитивно понятной разметки, которую легко обслуживать и стилизовать; они не предназначены для того, чтобы навязать авторам какие-то особые структуры.

    Футеры не обязательно должны идти в конце разделов, хотя обычно это так.

    Когда ближайший элемент-предок содержимого раздела или корня раздела это элемент body, он применяется ко всей странице.

    Элемент footer не является содержимым раздела; он не создаёт новый раздел.

    Этот фрагмент показывает низ страницы на сайте с «толстым футером»:

    4.3.9 Элементы

    Элемент address представляет контактную информацию для ближайшего элемента-предка article или body . Если это элемент body, то контактная информация применяется ко всему документу целиком.

    Элемент address обязан не использоваться для предоставления произвольного адреса (например, почтовых адресов), если эти адреса не являются реальной контактной информацией. (Элемент p это самый подходящий элемент для разметки почтовых адресов.)

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

    Обычно элемент address , наряду с другой информацией, находится в элементе footer .


    ПАгенты могут экспонировать контактную информацию узла пользователю, или использовать её для других целей, таких как разделы индексирования на основе контактной информации разделов.

    4.3.10 Заголовки и разделы

    Элементы h1 – h6 это заголовки разного уровня/ранга.

    Первый элемент заголовочного содержимого в элементе содержимого разделов представляет заголовок этого раздела. Последующие заголовки того же или более высокого ранга (уровня) начинают новые (подразумеваемые) разделы, заголовки более меньшего ранга начинают подразумеваемые подразделы – части предыдущего раздела. В обоих случаях этот элемент представляет заголовок предполагаемого раздела.

    Элементы h1 – h6 не должны использоваться для разметки подзаголовков, субтитров, альтернативных названий и слоганов, если не являются при этом заголовками новых разделов или подразделов. Для таких целей используйте патэрны разметки из раздела Общие идиомы без конкретных выделенных элементов данной спецификации.

    Некоторые элементы называются , в том числе – элементы blockquote и td . Эти элементы могут иметь собственный каркас, но разделы и заголовки внутри этих элементов не влияют на строение их предков.

    Элементы содержимого раздела всегда считаются подразделами своих ближайших предков – корней разделов, или ближайшего элемента-предка содержимого раздела, смотря что ближе, независимо от того, что предполагаемые разделы или заголовки должны создать.

    . структура может быть такая:

    1. Foo (заголовок явного раздела body , содержащего абзац «Grunt»)
      1. Bar (заголовок, начинающий предполагаемый раздел, содержащий выделение-цитату и абзац «Baz»)
      2. Quux (заголовок, начинающий предполагаемый раздел без какого-то содержимого (кроме самог ó заголовка))
      3. Thud (заголовок явного раздела section )

    Обратите внимание, как section заканчивает предыдущий предполагаемый раздел так, что следующий абзац («Grunt») снова оказывается на верхнем уровне.

    Разделы могут содержать заголовки любого ранга, и авторам настоятельно рекомендуется использовать заголовки соответствующего ранга для организации вложения уровней разделов.

    Авторам также рекомендуется явным образом обёртывать разделы элементами содержимого разделов, а не полагаться на неявные разделы, генерируемые несколькими заголовками в одном элементе содержимого разделов.

    Но это же можно выразить точнее:

    Оба эти документа семантически идентичны и дадут одну и ту же структуру в совместимых ПАгентах.

    Третий пример также семантически идентичен и будет проще в обслуживании (например, если разделы часто перемещаются при редактировании):

    Для последнего примера понадобятся явно указанные правила стиля для отображения в устаревших браузерах. Устаревшие браузеры без поддержки CSS будут отображать все заголовки как заголовки верхнего уровня.

    4.3.10.1 Создание каркаса

    В настоящее время нет реализаций алгоритма каркаса/структуры для графических браузеров и ПАгентов с ассистивными технологиями, хотя этот алгоритм реализован в другом программном обеспечении – проверщиках соответствия. Следовательно, на outline-алгоритм не следует полагаться для передачи структуры документа пользователям. Авторам рекомендуется использовать ранг ( h1 — h6 ) для передачи структуры документа.

    Этот раздел определяет алгоритм создания каркаса элемента содержимого разделов или элемента корня раздела. Алгоритм определён в терминах прохода по узлам DOM-дерева, в порядке дерева, когда каждый узел посещается при входе на него и при выходе из него в процессе прохода.

    элемента содержимого разделов или или элемента корня раздела состоит из списка из одного или более потенциально вложенных разделов . Раздел/ это контейнер, который соответствует некоторым узлам оригинального DOM-дерева. Каждый раздел может иметь один заголовок, ассоциированный с ним, и любое количество вложенных разделов. Алгоритм этого каркаса также ассоциирует каждый узел в DOM-дереве с конкретным разделом и (потенциально) с заголовком. (Разделы в каркасе не являются элементами section , хотя некоторые могут соответствовать таким элементам — они просто являются разделами концептуально.)

    . даёт такой каркас для узла body (то есть – для всего документа ):

    Ассоциирован с заголовком «A».

    Также ассоциирован с абзацем «B».

      Предполагаемый раздел для первого элемента h2 .

    Ассоциирован с заголовком «C».

    Также ассоциирован с абзацем «D».

    Нет вложенных разделов.

    Предполагаемый раздел для второго элемента h2 .

    Ассоциирован с заголовком «E».

    Также ассоциирован с абзацем «F».

    Нет вложенных разделов.

    Элемент, из которого сделан выход, это элемент заголовочного содержимого или элемент с атрибутом hidden .

    Вытолкнуть этот элемент из стэка.

    Если верх стэка это элемент заголовочного содержимого или элемент с атрибутом hidden Ничего не делать. При входе в элемент с атрибутом hidden Протолкнуть этот элемент в стэк. (Это заставит алгоритм пропустить этот элемент и всех его потомков.) При входе в элемент содержимого разделов Выполнить эти шаги:

    1. Если current outline target не null, выполнить эти подшаги:
      1. Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section .
      2. Протолкнуть current outline target в стэк.
    2. Пусть current outline target это элемент, в который делается вход.
    3. Пусть current section это вновь создаваемый раздел для элемента current outline target .
    4. Ассоциировать current outline target с current section .
    5. Пусть будет новый каркас для нового current outline target , инициализированный с новым только что созданным current section как единственным разделом в этом каркасе.

    При выходе из элемента содержимого разделов, если стэк не пустой Выполнить эти шаги:

    1. Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section .
    2. Вытолкнуть верхний элемент из стэка, а current outline target сделать этим верхним элементом.
    3. Пусть current section это последний раздел в каркасе элемента current outline target .
    4. Присоединить каркас элемента содержимого разделов, с которого выполняется выход, к current section . (Это не меняет того, какой раздел является последним разделом в каркасе .)

    При входе в элемент корня раздела Выполнить эти шаги:

    1. Если current outline target не null, протолкнуть current outline target в стэк.
    2. Пусть current outline target это элемент, в который делается вход.
    3. Пусть current outline target ‘а parent section это current section .
    4. Пусть current section это вновь создаваемый раздел для элемента current outline target .
    5. Пусть будет новый каркас для нового current outline target , инициализированный с новым только что созданным новым current section как единственным разделом в этом каркасе.

    При выходе из элемента корня раздела, если стэк не пустой Выполнить эти шаги:

    1. Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section .
    2. Пусть current section это current outline target ‘s parent section.
    3. Вытолкнуть верхний элемент из стэка, а current outline target сделать этим верхним элементом.

    При выходе из элемента содержимого разделов или из элемента корня раздела (если стэк пустой)

    Сurrent outline target это элемент, из которого делается выход, и это элемент содержимого раздела или корня раздела в корне поддерева, для которого генерируется каркас.

    Если current section не имеет заголовка, создать предполагаемый заголовок и сделать его заголовком для current section .

    Перескочить на следующий шаг в общем наборе шагов. (Проход завершён.)

    При входе в элемент заголовочного содержимого Если current section не имеет заголовка, пусть элемент, в который делается вход, будет заголовком для current section .

    Иначе, если элемент, в который делается вход, имеет ранг равный или выше, чем у заголовка последнего раздела в каркасе current outline target , или если заголовок последнего раздела в каркасе current outline target это предполагаемый заголовок, то создать новый раздел и присоединить его к каркасу элемента current outline target , чтобы этот новый раздел был новым последним разделом этого каркаса. Пусть current section это новый раздел. Пусть элемент, в который делается вход, будет заголовком для current section .

    Иначе, выполнить эти подшаги:

    1. Пусть candidate section это current section .
    2. Heading loop: Если элемент, в который делается вход, имеет ранг ниже, чем ранг заголовка в candidate section , то создать новый раздел и присоединить его к candidate section . (Это не меняет того, какой раздел является последним разделом в каркасе.) Пусть current section это новый раздел. Пусть , в который делается вход, будет новым заголовком для current section . Прервать выполнение этих подшагов.
    3. Пусть new candidate section это раздел, содержащий candidate section в каркасе current outline target .
    4. Пусть candidate section это new candidate section .
    5. Возвратиться к шагу heading loop.

    Протолкнуть элемент, в который сделан вход, в стэк. (Это заставит алгоритм пропустить всех его потомков этого элемента.)

    Отозваться, что h1 имеет высший уровень, а h6 – низший.

    Иначе Ничего не делать.

    Кроме того, всякий раз, когда проход по узлу завершается и делается выход, после выполнения вышеуказанных шагов, если узел ещё не ассоциирован с разделом, ассоциировать узел с разделом current section .

  • Ассоциировать все узлы с заголовком раздела, с которым они ассоциированы, если имеются.

  • Дерево разделов, созданное этим алгоритмом или его подмножеством, обязано использоваться при генерации каркасов документов, например, при генерации оглавления.

    Каркас, созданный для элемента body Document ‘a это каркас всего документа.

    При создании интерактивного оглавления его элементы должны переводить пользователя на соответствующий элемент содержимого раздела, если раздел был создан для реального элемента в оригинальном документе, или на соответствующий элемент заголовочного содержимого, если раздел в дереве был сгенерирован для заголовка в вышеуказанном процессе.

    Выбор первого раздела документа поэтому всегда приводить пользователя в начало документа, независимо от того, где первый заголовок в body найден.

    элемента заголовочного содержимого, ассоциированного с разделом section это количество разделов-предков section в самом внешнем каркасе, в котором сам section находится, когда каркасы элементов его Document ‘а создаются, плюс 1. Глубина каркаса элемента заголовочного содержимого, не ассоциированного с разделом, равна 1.

    ПАгентам следует предоставлять заголовки по умолчанию для разделов, не имеющих явных заголовков раздела.

    Хотя он не содержит заголовков, в нём имеется три раздела: документ ( body ) с двумя подразделами ( nav и aside ). ПА может показать этот каркас так:

    Эти заголовки по умолчанию («Untitled document», «Navigation», «Sidebar») не специфицированы данной спецификацией и могут отличаться для разных пользовательских языков, языков страниц, пользовательских настроек, настроек изготовителя ПАгента etc.

    4.3.10.2 Примеры каркаса

    Этот раздел не является нормативным.

    Эта книга может сформировать такой каркас:

    1. The Tax Book
      1. Earning money
        1. Getting a job
      2. Spending money
        1. Cheap things
        2. Expensive things
      3. Investing money
      4. Losing money
        1. Poor judgement

    Заметьте, что элемент title не участвует в каркасе.

    Эта книга формирует такой же каркас:

    1. The Tax Book
      1. Earning money
        1. Getting a job
      2. Spending money
        1. Cheap things
        2. Expensive things
      3. Investing money
      4. Losing money
        1. Poor judgement

    Это может сформировать такой же каркас из трёх разделов верхнего уровня:

    Фактически элемент body разделён на три.

    Рассмотрим, например, следующий код – это предыдущий пример, но содержимое (предполагаемого) body обёрнуто в section :

    Результирующий каркас может быть таким:

    Результат описан как unintuitive (неинтуитивный), поскольку даёт три подраздела, хотя имеется только один элемент section . Фактически этот section разделяется на три, точно как body в предыдущем примере.

    (В этом примере » (untitled page)» это предполагаемый заголовок для элемента body , поскольку он не имеет явного заголовка.)

    Результирующий каркас может быть таким:

    1. (untitled page)
      1. A plea from our caretakers
    2. Feathers

    Таким образом, когда элемент article стартует с блока nav и только потом имеет заголовок, результатом станет то, что блок nav не будет частью того же раздела, что остаток article в каркасе. Например, этот документ:

    может дать такой итоговый каркас:

    1. Ray’s blog
      1. Untitled article
        1. Untitled navigation section
      2. We’re adopting a child!

    Кроме того, в это примере следует отметить, что элементы header и main не имеют никакого влияния на каркас документа.

    4.3.11 Резюме об использовании

    Этот раздел не является нормативным.

    Элемент Назначение
    Пример
    body
    article
    section
    nav
    aside
    h1 – h6 Заголовок раздела
    header
    footer
    4.3.11.1 Article или section?

    Этот раздел не является нормативным.

    Раздел section образует часть чего-то ещё. Статья article это нечто самостоятельное. Но как узнать, кто есть кто? Наиболее реальный ответ – «это зависит от намерений автора».

    Например, можно представить себе книгу с главой «Granny Smith», в которой сказано только: «These juicy, green apples make a great filling for apple pies.»; это может быть section , потому что может быть множество других глав о (возможно) других сортах яблок.

    С другой стороны, можно представить твит, reddit-комментарий, tumblr-пост или классифицированную газетную статью, в которой просто сказано: «Granny Smith. These juicy, green apples make a great filling for apple pies.»; это уже может быть article s, так как это некий цельный объект.

    Комментарий или статья не являются частью article , в которой комментируются, следовательно, это его собственный article .

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL