Заголовок секции

Содержимое секции…

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

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

Таким образом, элемент section стоит применять для некоторого контента только в том случае, если он имеет заголовок и является частью чего-то другого.

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

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

Название статьи Комментарии Заголовок комментария Заголовок комментария

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

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

Название книги Первая глава Вторая глава Третья глава Приложение A Приложение B

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

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

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

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

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

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

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

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

Div

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

Section

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

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

Article

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

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

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

). Каждый тэг {section} должен иметь пару {/section} . Обязательными параметрами являются name и loop . Имя цикла {section} может быть любым, состоящим из букв, цифр и знаков подчеркивания. Циклы {section} могут быть вложенными и имена вложенных {section} должны быть уникакльными между собой. Переменная loop (обычно - массив значений) определяет количество итераций цикла. При печати переменных внутри секции, имя секции должно быть указано рядом с именем переменной внутри квадратных скобок . {sectionelse} выполняется в том случае, если параметр loop не содержит значений.

Note

Начиная с версии Smarty 1.5.0, синтаксис переменных свойств сессий был изменен с {%sectionname.varname%} на {$smarty.section.sectionname.varname}. Старый синтаксис всё ещё поддерживается, но вы увидите лишь примеры нового синтаксиса.

index используется для отображения текущего индекса массива, начиная с нуля (или с атрибута start, если он был указан) и увеличиваясь на единицу (или на значение атрибута step, если он был указан).

Техническое Замечание

Если атрибуты step и start не указаны, то index аналогичен атрибуту секции iteration, кроме того, что начинается с 0, а не с 1.

iteration используется для отображения текущего номера итерации цикла.

Note

Это значение не зависит от свойств start, step и max, в отличие от свойства index . Кроме того, итерации начинаются с единицы, а не с нуля, как индексы. rownum - это синоним к свойству iteration, они работают одинаково.

Example 7.38. свойство {section} iteration

assign("custid",$id); ?> {section name=cu loop=$custid start=5 step=2} iteration={$smarty.section.cu.iteration} index={$smarty.section.cu.index} id={$custid}
{/section}

Результат выполнения данного примера:

Iteration=1 index=5 id=3005
iteration=2 index=7 id=3007
iteration=3 index=9 id=3009
iteration=4 index=11 id=3011
iteration=5 index=13 id=3013
iteration=6 index=15 id=3015

Этот пример использует свойство iteration для вывода заголовка таблицы через каждые пять строчек (использует {if} с оператором mod - остаток от деления).

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

Как по символьному коду раздела построить хлебные крошки в Битриксе

Перед прочтением данной статьи советую почитать Как добавить в хлебные крошки название . Прочитали? Тогда идем дальше.