Создание и продвижение сайтов, материалы веб-мастеру!
Способы заработка, свой бизнес в интернете!

Подписка на получение новых публикаций сайта с помощью RSS

Подписка с помощью RSS
(читателей: 3271)

Мой LiveJournal Мой Я.ру Мой FaceBook Мой Twitter

Читать в соц. сетях:

Куда вложить деньги - инвестирование в ПАММ-счетаПассивный доход за счёт инвестирования Куда сегодня можно вложить деньги

Инструкции и методы решения различных задач

Раздел "Инструкции и методы"

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

Рейтинг инструкций по оценкам пользователей | Все инструкции и методы одним списком

Семантическая разметка в HTML5 с помощью ARIA Role

HTML5

Одинаковая структура блоков характерна для большинства сайтов. В основном этим блокам присваивают общепринятые имена классов или просто ID. Как правило, сайт включает в себя такие основные элементы как шапка (header), контент (content), в сайтбаре могут быть разновидности ¬– sidebar, leftbar, rightbar, навигацию (nav) и, естественно, подвал (footer).

Что касается HTML5, то здесь уже появляются специальные атрибуты, с помощью которых можно более чётко определить назначение элементов. Например, такими атрибутами являются role, которые предназначены для назначения ролей соответствующим блокам, показывая их значение и важность. Все атрибуты описаны в спецификации ARIA Role (WIA-ARIA specification).

Сейчас же рассмотрим самые применяемые роли:

  • banner – по логике вещей эта роль отводится шапке сайта. Традиционно в данном блоке размещается название сайта и по возможности логотип и поиск. role=«banner» может использоваться на странице только один раз;
  • search – данная роль на странице обозначает область поиска, обычно такая форма используется для отправления поисковых запросов;
  • navigation – определяет набор элементов навигации (обычно ссылки), что служит для возможности переходов по документу или других связанных документов;
  • main – это основное содержание определённого документа, в рамках которого автор может отметить только один элемент с главной ролью;
  • contentinfo – в основном эта роль применяется к footer, и тоже может быть определена только один раз на странице;
  • complementary – не основная, но всё же важная часть контента, которая в основном содержит информационные блоки, находящиеся в боковых колонках, например, погода или мини-фотогалерея.

С применением ролей простая html-разметка может иметь такой вид:



<header id="header" role="banner">
<h1>Название блога</h1>
</header>
<nav id="nav" role="navigation">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/news">Новости</a>>/li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
<section id="content" role="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Maecenas iaculis, elit at tempor imperdiet, purus orci sollicitudin ipsum, nec elementum justo diam non metus.</p>
</section>
<aside id="sidebar" role="complementary">
<nav>
<h3>Подменю</h3>
<ul>
<li><a href="#">Раз</a></li>
<li><a href="#">Два</a></li>
<li><a href="#">Три</a></li>
</ul>
</nav>
</aside>
<footer id="footer" role="contentinfo">
<p>©</p>
</footer>

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


Агенство по защите прав потребителей www.agentstvo-zpp.ru предоставит грамотных юристов, готовых помочь вам в случае возникновения проблем при покупке любых товаров и услуг.

 

Инвестируй выгодно...

Инвестиции в ПАММ-счета на рынке Форекс

Если Вам понравился данный материал, подпишитесь на получение новых публикаций сайта с помощью RSS-ленты или E-mail-рассылки:

Подписка на обновления сайта с помощью RSS

Введите свой e-mail:

RSS-подписчиков: 3271 | E-mail-подписчиков: 3007


Спасибо Вам за добавление данной страницы в социальные сервисы:


Ещё инструкции и методы...


Задать вопрос или оставить комментарий

Вы можете поделиться своим мнением по теме или задать возникшие вопросы в комментариях. Спасибо!

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


Отправить комментарий
Содержание этого поля является приватным и не предназначено к показу.
You can change the default for this field in "Comment follow-up notification settings" on your account edit page.
КАПЧА
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
6 + 1 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.
Инвестиции на Форекс

Copyright © 2007-2018, Николай Мурашкин | Хостинг сайта

Копирование, а также любое другое подобное использование материалов без ссылки на сайт NikMurashkin.RU строго запрещено!

тИЦ и Page Rank сайта