Секции для контента в HTML5 — div или section или article? Как использовать секционные элементы HTML5 Section html5 описание.
). Каждый тэг {section} должен иметь пару {/section} . Обязательными параметрами являются name и loop . Имя цикла {section} может быть любым, состоящим из букв, цифр и знаков подчеркивания. Циклы {section} могут быть вложенными и имена вложенных {section} должны быть уникакльными между собой. Переменная loop (обычно - массив значений) определяет количество итераций цикла. При печати переменных внутри секции, имя секции должно быть указано рядом с именем переменной внутри квадратных скобок . {sectionelse} выполняется в том случае, если параметр loop не содержит значений.
Имя атрибута | Тип | Обязателен | По умолчанию | Описание |
---|---|---|---|---|
name | string | Да | n/a | Название секции |
loop | mixed | Да | n/a | Значение, определяющее количество итераций цикла. |
start | integer | Нет | 0 | Индекс позиции, с которой будет начинаться цикл. Если значение отрицательное, то начальная позиция вычисляется от конца массива. Например, если в переменной цикла 7 элементов и значение атрибута start равно -2, то начальный индекс будет 5. Неверные значения (значения, вне массива) автоматически обрезаются до ближайшего верного значения. |
step | integer | Нет | 1 | Значение шага, которое используется для прохода по массиву. Например, step=2 указывает обход массива по элементам 0,2,4... Если шаг отрицателен, то обход массива будет производится в обратном направлении. |
max | integer | Нет | 1 | Максимальное количество итераций цикла. |
show | boolean | Нет | true | Указывает, показывать или нет эту секцию |
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 - остаток от деления).
Name> | Home | Cell | ||
---|---|---|---|---|
view | {$contacts.name} | {$contacts.home} | {$contacts.cell} | {$contacts.email} |
Всем привет! В этой статье мы рассмотрим, как правильно использовать теги div, section и article в HTML5 .
Помимо всем известного и очень часто используемого тега div , в HTML5 появились новые, семантические теги, которые позволяют более четко разделить контент на вашем сайте и тем самым помочь поисковым роботам в их нелегкой работе. Однако, к сожалению, многие верстальщики еще не научились их использовать правильно, особенно те, которые обозначены в начале статьи. Надеюсь, что после прочтения данной статьи вопросы по этому поводу, если и не пропадут совсем, то их станет, как минимум, меньше. Итак, приступим.
Div
Если вы откроете сайт W3C , то можете найти там рекомендацию, смысл которой заключается в том, что использовать данный тег нужно для семантически несвязанного между собой контента. Очень часто div используют для того, чтобы сгруппировать какой-нибудь контент, который затем нужно спозиционировать или как-то оформить с помощью css .
Section
Данный элемент используется, наоборот, для семантически связанного между собой контента. Содержимое такого тега должно обладать общей темой. К примеру, новости на новостном сайте:
Последние новости
...
Article
Этот элемент также должен обладать общей темой и содержать семантически связанный между собой контент, однако этот самый контент должен быть автономен, т.е. вы можете взять отдельный article , убрать его со страницы, но при этом смысл содержимого внутри него не потеряется. Все на том же примере новостного сайта можно сказать, что каждая отдельная новость будет выделена тегом article , т.к., если изолировать ее со страницы, она не потеряет смысл, но все новости вместе будут обрамлены тегом section , т.к. это отдельный большой блок с общей темой, и он не может быть изолирован. Согласитесь, если мы оставим на странице просто блок с новостями, он будет "не к месту", а если оставим одну конкретную новость, то все будет вполне логично.
Конечно, все зависит от конкретной ситуации, но чаще всего вы можете разметить свою страницу правильно, используя следующее правило: если контент семантически связан между собой и может быть изолирован со страницы без потери смысла, то используйте article . Если не может быть изолирован со страницы без потери смысла, используйте section . В остальных случаях – div .
Итак, на этом все. Надеюсь, что данная тема вам ясна и теперь вы будете размечать ваши интернет-странички грамотно. Спасибо за внимание и удачи!
Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент
Категории контента:
потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов
Site description
Элемент
2. Элемент
Категории контента:
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри
В качестве элементов панели навигации можно использовать не только элементы списков:
...
Также можно добавлять заголовки внутрь элемента:
...
3. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы
...
4. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент
...
...
...
внутри
Можно создавать родительские элементы
Заметки о природе
...
...
Исторические заметки
...
...
5. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого)
. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов:
6. Элемент
Категории контента:
потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов
7. Элемент
Категории контента:
потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента
8. Элемент
Категории контента:
потоковое содержимое.
Элемент
Элемент
Пудель
О породе
9. Элемент
Категории контента:
потоковое содержимое, корневое секционное содержимое.
Элемент
Элемент
10. Элемент
Элемент
11. Элемент
Категории контента:
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
12. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента:
потоковое содержимое, текстовое содержимое.
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов
— один и более элементов
Элементы
Элемент
Элемент
Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.
HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму.
Давайте начнем.
Элемент main
Элемент должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента.
Ниже приводится пример представления главного содержимого страницы.
Гитары
Величайшие гитары современности
Gibson SG
Fender Telecaster
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент на странице, который нельзя помещать внутри элементов, или.
Элемент article
Элемент должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Это могут быть: новость, статья в блоге, комментарии пользователя.
Название статьи
Вы можете вкладывать элементы один в другой. Это будет означать, что вложенные элементы связаны с внешним элементом.
Это была интересная статья Как ты связываешь это с мировым превосходством? Название статьи
Комментарии
В этом примере мы использовали элемент, чтобы выделить саму статью и каждый комментарий к ней. Такая схема вложенности позволяет отнести комментарии к тексту статьи.
Элемент section
Элемент используется для представления секции (группы) связанного контента. Его применение похоже на с главным отличием, что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы.Рекомендуется использовать теги (
– )
для обозначения темы секции.
В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег.
Как использовать секционные элементы HTML5
Элемент main
Элемент article
Элемент section
...
Если вы хотите сгруппировать контент для последующей стилизации, в этом случае нужно использовать элемент вместо.
Элемент nav
Элемент используется для разметки группы ссылок на внешние страницы или разделы внутри текущей страницы. Он хорошо подходит как для основной навигации по сайту, так и по оглавлению или постам.
Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента.
Элемент aside
Элемент используется для выделения содержания, непосредственно связанного с окружающим контентом, но которое может рассматриваться и отдельно. Это могут быть боковые сноски (как в книгах), группы элементов, цифры или цитаты.
Компания Google покупает Nest
В этом примере мы использовали элемент, чтобы выделить информацию о компании Google в новостной статье. Эта информация может быть полезна читателю, но не связана напрямую с новостью.
Элемент header
Элемент используется для представления вводной части к статье или веб-странице. Обычно он содержит заглавие или какие-либо метаданные, относящиеся к данному контенту, например, дата публикации статьи или оглавление (внутри элемента) для более длинного документа.Элемент будет связан с ближайшим секционным элементом, обычно это прямой родитель в структуре страницы.
Компания Google покупает Nest
В этом примере элемент содержит заголовок и дату публикации новостной статьи.
Элемент footer
Элемент используется для представления такой информации о разделе, как автор, авторские права, ссылки на связанные веб-страницы.
Так же как, элемент связан с ближайшим секционным элементом.
Элемент address
Элемент один из самых неправильно используемых элементов в HTML. Этот элемент предназначен не для разметки почтового адреса, а для представления контактной информации по статье или веб-странице. Это могут быть ссылки на сайт автора или его электронный адрес.Контакты Matt West
Этот элемент часто используется внутри элемента, который в свою очередь располагается внутри элемента.
Copyright Matt West 2014Компания Google покупает Nest
Заключение
В этом посте вы узнали как использовать секционные элементы HTML5 для разметки веб-страниц. Использование таких элементов имеет ряд преимуществ.Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.
Примечание: Пока еще не все скринридеры имеют поддержку семантических элементов. Чтобы обезопасить себя, вы можете продолжать использовать роли
Из данной статьи вы узнаете как можно построить навигационную цепочку зная один лишь символьный код раздела.
Как по символьному коду раздела построить хлебные крошки в Битриксе
Перед прочтением данной статьи советую почитать Как добавить в хлебные крошки название . Прочитали? Тогда идем дальше.
В старых компонентах бывали случаи, когда в массиве хранится только символьный код раздела. Данная переменная называлась .
Если на вашем сайте символьные коды разделов уникальны (что рекомендуется всегда выставлять в настройках инфоблока), то проблем не будет. Для начала находим файл section.php вашего компонента.
$rsSect = CIBlockSection::GetList(array(), array("IBLOCK_ID" => $arParams["IBLOCK_ID"], "=CODE" => $arResult["VARIABLES"]["SECTION_CODE"]), false, array("ID", "NAME", "UF_TEXT_TOP", "DEPTH_LEVEL", "SECTION_PAGE_URL")); if ($arSect = $rsSect->GetNext()) { $SEC_LVL = $arSect["DEPTH_LEVEL"]; $SEC_NAME = $arSect["NAME"]; $SEC_URL = $arSect["SECTION_PAGE_URL"]; }
Обратите внимание на строчку ‘=CODE’ => $arResult[‘VARIABLES’][‘SECTION_CODE’] . Также, мы используем if , вместо привычного цикла while, т.к. нам нужны данные только по одному разделу.
Записываем 3 переменные, которые нам понадобятся:
— уровень вложенности, DEPTH_LEVEL
— имя, NAME
— ссылка на раздел, SECTION_PAGE_URL
ВАЖНО . Перед следующим этапом отключите в своем компоненте настройку «добавлять раздел\инфоблок в цепочку навигации»
В самом конце файла section.php добавляем код:
if ($SEC_LVL >= 2) { $rsSect = CIBlockSection::GetList(array(), array("IBLOCK_ID" => $arParams["IBLOCK_ID"], "=CODE" => $arResult["VARIABLES"]["SECTION_CODE"]), false, array("ID", "NAME", "SECTION_PAGE_URL")); while ($arSect2 = $rsSect->GetNext()) { if (strstr($curSectionURL, $arSect2["SECTION_PAGE_URL"])) { $SEC_NAME = $arSect2["NAME"]; $SEC_URL = $arSect2["SECTION_PAGE_URL"]; break; } } $result = array(); $ibsTreeResource = CIBlockSection::GetNavChain(false, $arSect2["ID"], array("ID", "NAME")); $c = 0; while($sectionItem = $ibsTreeResource->Fetch()){ $result[$c]["NAME"] = $sectionItem["NAME"]; $res = CIBlockSection::GetByID($sectionItem["ID"]); if($ar_res = $res->GetNext()) { $url = $ar_res["SECTION_PAGE_URL"]; } $result[$c]["URL"] = $url; $c++; } foreach ($result as $arItem) { $APPLICATION->AddChainItem($arItem["NAME"], $arItem["URL"]); } } else { $APPLICATION->AddChainItem($SEC_NAME, $SEC_URL); } ?>
При помощи CIBlockSection::GetNavChain выстраиваем полный путь до родительского раздела (если это подраздел), и добавляем через цикл в цепочку навигации Название и Ссылку . Если эже это раздел 1-го уровня, то просто добавляем его Название и Ссылку .
Например, наш код равен armstrong
. Полученный результат выглядит приблизительно следующим образом:
Каталог
/ Офисные светодиодные светильники
/ Светильники Армстронг
URL при этом имеет вид:
/catalog/ofisnye-svetilniki/armstrong/
Ссылка на Каталог проставляется сама.
Офисные светодиодные светильники — это главный раздел.
Светильники Армстронг — раздел, в котором мы сейчас находимся. Компонент хлебных крошек не ставит ссылку на него.
Вот и всё, надеюсь у вас всё получилось:). ПС код не идеален и применялся для старых проектов, его можно улучшить.