Что такое семантика и как это относится к HTML? Удаляем ненужные div теги. Примеры семантической верстки HTML5
Семантической называют верстку, использующую для структурирования html-документов теги, которые разделяют код на логические блоки (явно показывающие их роль и содержание в структуре web-страницы). Этот вид верстки стал доступен с появлением HTML5, его новые элементы играют большую роль в создание явной логической структуры документа.
Для начала, чтобы было понятнее, как используются эти элементы, предлагаем вам изучить один из возможных макетов страницы:
ЗаголовокСемантическая верстка отличается от блочной лишь элементами, используемыми при структуризации страницы, но в отличие от семантических тегов, используемых в семантической верстке, тег div, являющийся основным используемым элементом в блочной верстке, не передает четкий смысл о содержащемся в нем контенте, так как он является лишь контейнером для группировки контента.
Предлагаем немного подробнее рассмотреть элементы, которые были использованы в макете:
К сожалению представленный CSS-код не сможет помочь браузеру Internet Explorer 8 и его более ранним версиям корректно отображать семантические элементы. Для корректной обработки новых семантических элементов во всех старых версиях IE нам придется прибегнуть к помощи JavaScript. Просто добавьте следующий код в элемент , и старые версии IE будут корректно обрабатывать новые элементы:
document.createElement("section"); document.createElement("header"); document.createElement("nav"); document.createElement("article"); document.createElement("aside"); document.createElement("footer");
Семантика (фр. sémantique от др.-греч. σημαντικός - обозначающий) — наука о понимании определенных знаков, последовательностей символов и других условных обозначений. Эта наука используется во многих отраслях: лингвистика, проксемика, прагматика, этимология и т.д. Ума не приложу, что эти слова означают и чем все эти науки занимаются. Да и не важно, меня интересует вопрос применения семантики при верстке сайтов.
ЗаметкаТут не буду затрагивать термин Семантический веб. На первый взгляд, может показаться, что темы Семантический веб и семантический HTML код — это почти одно и тоже. Но на самом деле Семантический веб понятие, довольно философское и с нынешней реальностью имеет не так много общего.
Семантическая верстка — что это?В языке каждое слово имеет определенный смысл, назначение. Когда ты говоришь "колбаса", ты имеешь в виду пищевой продукт, представляющий собой фарш (как правило, мясной) в продолговатой оболочке. Короче говоря имеешь в виду колбасу, а не молоко или зеленый горошек.
HTML — это тоже язык, его "слова", именуемые тегами, тоже имеют определенный логический смысл и назначение. По этому в первую очередь семантический HTML код — это верстка с правильным использованием HTML тегов , использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов.
microformats.org — сообщество, которое работает над воплощением идеалистических идей Семантического веба в жизнь посредством приближения разметки страниц к тем самым семантическим идеалам.
Зачем и кому вообще нужна семантическая верстка?Если у меня на сайте информация отображается так же как на дизайне, зачем себе еще ломать мозг и думать о какой-то семантике?! Это же дополнительная работа! Кому это нужно?! Кто это оценит кроме другого верстальщика?
Мне такие вопросы приходилось частенько слышать. Давай разберемся.
Семантический HTML для веб разработчиков Семантический код для пользователейПовышает доступность информации на сайте. В первую очередь это имеет значение для альтернативных агентов таких как:
- семантический код напрямую влияет на объем HTML кода. Меньше кода —> легче страницы —> быстрей грузятся, меньше требуется оперативной памяти на стороне пользователя, меньше трафика, меньший объем баз данных. Сайт становиться быстрей и менее затратным .
- голосовые браузеры для которых важны теги и их атрибуты, чтобы произнести правильно и с нужной интонацией содержимое, или наоборот не произнести лишнего.
- мобильные устройства которые не на полную мощь поддерживают CSS и поэтому ориентируются в основном на HTML код, отображая его на экране согласно используемым тегам.
- устройства печати даже без дополнительного CSS напечатают информацию качественней (ближе к дизайну), а создание идеальной версии для печати превратится в несколько легких манипуляций с CSS.
- к тому же существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у Opera .
Поисковые системы постоянно совершенствуют методы поиска, чтобы в результатах была та информация, которую действительно ищет пользователь. Семантический HTML способствует этому, т.к. поддается гораздо лучшему анализу — код чище, код логичен (четко видно где заголовки, где навигация, где содержимое).
Хороший контент плюс качественная семантическая верстка — это уже серьезная заявка на хорошие позиции в выдачах поисковиков .
Подготовил: Евгений Рыжков Дата публикации: 22.01.2010
У тебя в распоряжении 6 различных тегов для вставки заголовков — h1, h2, h3, h4, h5, h6 (h сокращенное от англ. heading — заголовок). Каждый из них имеет определенный вес (важность): h1 — имеет наибольшую важность, h6 — наименьшую. А вот как эти заголовки правильно использовать — одна из самых спорных тем. Давай попробуем копнуть глубже в тему и ответить на следующие вопросы:
Во-первых, это дает возможность быстро сориентироваться на странице, на которой зачастую море информации. Это как в журнальной статье, быстро пробегая глазами по заголовкам, ты сразу отмечаешь на чем стоит остановиться. Правильное использование тегов заголовков даст возможность не только визуально ориентироваться на странице (этого можно добиться используя любые теги совместно с таблицами стилей), но и даст возможность так же уверенно находить нужное людям с ограниченными возможностями, которые используют голосовые браузеры и устройства чтения Брайля. Плюс не забываем, что не все устройства хорошо поддерживают каскадные таблицы стилей (например, мобильные устройства). А еще существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у opera .
Во-вторых, поисковым роботам будет проще работать со страницей, проще выделить главное и второстепенное, а значит больше шансов попасть в топ.
В-третих, четкая логическая структура документа — это шаг к повышению качества, понятности, доступности информации, это шаг к новому уровню предоставления информации — Семантический веб.
Спецификации гласят следующее:
Заголовки на странице должны иметь четкую иерархию по уровням, т.е. h2 должен следовать после h1, h3 после h2 и т.д. Пропуск уровней в последовательности заголовков может создать впечатление, что структура документа не была должным образом продумана или что определенные заголовки были выбраны для их визуального исполнения, а не их значения.Google говорит практически тоже самое:
Не советуем:- использовать теги заголовков там, где больше подошли бы теги или
- беспорядочно переключаться от заголовков одного размера к другому
Не разбрасывайтесь заголовками. Используйте заголовки только там, где они действительно необходимы. Слишком большое количество заголовков на странице дезориентирует пользователя и затрудняет понимание того, где заканчивается одна тема и начинается другая.
- засорять страницу лишними заголовками,
- использовать заголовки только для стилизации текста, без определения структуры страницы.
- использовать заголовки только там, где действительно заголовки
- соблюдать четкую иерархию заголовков (h2, следует за h1. h3 после h2 и т.д.). Желательно не нарушать четкую последовательность уровней
- желательно чтобы первый заголовок (по коду) на странице был h1
- не следует неупорядоченно переключаться от заголовков одного размера к другому
соблюдай четкую иерархию вложенности заголовков
Сколько и каких заголовков должно быть на HTML странице?Четких каких-либо правил в спецификациях или рекомендациях от поисковиков нет. Некоторые гуру рекомендуют придерживаться следующей схемы:
- h1 — один на странице
- h2 — 2-3
- h3 — 4-6
- и т.д.
Такой порядок имеет смысл: h1 — это тема страницы (статьи), поэтому должен быть один (это особенно важно при поисковой оптимизации). У статьи может быть несколько подтем, как правило в рамках одной темы их немного, потому заголовков второго уровня немного на странице. И так далее с остальными.
Может возникнуть вопрос: как быть со страницами анонсов новостей (статей), где по иерархии должно быть много заголовков второго уровня? В таких случаях использование заголовков остается на усмотрение верстальщика: сделать много заголовков второго уровня или пропустить один-два уровня. У меня в приоритетах соблюдать иерархию, поэтому у меня будет много заголовков второго уровня.
Рассмотрим несколько примеров использования заголовков на веб страницах:
На главных страницах сайта основной заголовок принято считать название компании или сайта. Поэтому часто можно встретить сайты, где на главной странице логотип является заголовком первого уровня:
Иногда для заголовков дизайнеры используют красивые (нестандартные) шрифты. Если решено было делать их картинками, тогда с помощью CSS прячем изображения в фон. Текст заголовка дублируем текстом (для устройств не поддерживающих CSS, голосовых браузеров и в некоторой степени для поисковых роботов) и прячем его (текст). Такая же техника применяется для логотипа на главной:
Фирма Рога и копыта
H1 { width: 250px; height: 100px; background: url(path-to/logo.png); text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */ overflow: hidden; }
Нужен ли атрибут title заголовку?Атрибут title предназначен, чтобы дать пользователю дополнительную (расширенную) информацию об объекте. Имеет смысл использовать данный атрибут для тех заголовков, когда действительно есть чем дополнить и title даст дополнительную полезную информацию пользователю. Такое использование атрибутов title сделает сайт более удобным и понятным, а на это обращают внимание и поисковые роботы. С другой стороны, повсеместное использование атрибута title, которые не несут дополнительное полезной информации могут негативно сказаться на удобстве и позициях в выдачах поисковиков. Представь себе, ты используешь голосовой браузер, который тебе прочитал заголовок. Тебе показалось этого мало и ты просишь прочитать и title. Что ты подумаешь о разработчиках сайта, если содержимое title окажется идентичным тексту заголовка? Поэтому использовать атрибут title (как и вообще любой другой элемент ли атрибут) нужно обдуманно.
Семантика и доступность - это естественные части HTML по замыслу, однако они не используется в полной мере, если не применяются правильно. Знание, как писать семантический и доступный код правильно начинается с понимания того, как семантика и доступность работают и как пользователи и машины их интерпретируют. Писать семантический и доступный код невероятно сложно и это может занять много времени. Однако в долгосрочной перспективе преимущества побеждают.
Одна из наиболее важных частей, о которой следует помнить при написании семантического и доступного кода - это сделать всё возможное, чтобы использовать стандартный язык разметки. Приложите усилия, чтобы по возможности писать чистый код и гордитесь своей работой. Вообще говоря, не используйте бессмысленный элемент там, где другой элемент может придать более семантический смысл, к примеру, использование там, где подходит лучше. Используйте семантические элементы и атрибуты, а также микроданные и WAI-ARIA, чтобы расширить значение вашего кода.
Кроме того, будьте адвокатом семантики и доступности . Расскажите, почему вы написали определённый код и дайте обоснование, почему некоторые модули содержимого размечены таким образом. Обозначьте цели и задачи в вашем коде и объясните, как эти цели и задачи выполняются. Практика написания семантического и доступного кода растёт, однако внедрение в целом ещё не завершено. Будьте адвокатом для кода, который вы пишете.
Мотивация для семантикиИногда можно спросить, реально ли семантика изменит ситуацию. Вы можете услышать, что она замедляет разработку, плохо поддерживается или даже что она своевольна. Хотя это иногда и так, вам по-прежнему необходимо сохранить целостность и продолжить писать по возможности лучший код, потому что семантика вкладывает больший смысл в написании кода.
Важным фактом является то, что семантика в значительной степени полезна всем . Для начинающих семантика наделяет содержимое однозначным смыслом. Семантика придаёт содержимому устойчивую структуру и значение, а также в угоду доступности предоставляет более качественный пользовательский интерфейс и дополнительную информацию для вспомогательных технологий. Поиск и глобализация в большей степени связаны с семантикой, что позволяет проще обслуживать контент на международном уровне и делает его более дружественным поисковой системе. Если это недостаточно, семантика также способствует совместимости операционных систем, что позволяет обмениваться и пользоваться информацией на различных платформах и устройствах.
Можно с уверенностью сказать, что семантика важна и она здесь надолго. Если кратко подытожить, семантика обеспечивает:
- однозначный смысл для содержимого;
- доступность;
- поиск и глобализацию;
- совместимость.
В руководстве для начинающих мы обсудили использование структурной семантики , в частности, применение элементов , , , , и . Эти элементы обеспечивают дополнительный фоновый контекст для их содержимого, сообщая своё основное значение браузерам и другим устройствам. Это важно, так как они предлагают лучший способ наметить структуру страницы и это более значимое решение чем .
Скрытие содержимогоВремя от времени вы пожелаете скрыть блок содержимого на странице, возможно, показывая или скрывая элемент в зависимости от статуса пользователя. К примеру, сообщение об успешном выполнении скрывается от пользователя, пока он не выполнит желаемое действие. Чаще всего это делается с помощью записи display: none . Хотя это действительно работает, но семантически некорректно.
Лучшим вариантом является применение логического атрибута hidden , который является глобальным атрибутом, доступным для всех элементов. Функционально он выполняется так же, как декларация CSS, но семантически представляет собой элемент, который должен быть скрыт или до поры до времени проигнорирован. Экранные читалки и другие устройства распознают атрибут, временно пропуская элемент, чего они не могут сделать с декларацией CSS.
... ...
Представьте себе, что слепой пользователь пытается заполнить форму, и первая часть содержимого, ещё до заполнения формы - это сообщение об успешном выполнении. Это плохой пользовательский опыт и он может быть легко исправлен с помощью надлежащей семантики.
Текстовая семантикаБольшая часть содержимого в Интернете живет в тексте и мы в первую очередь пролистываем Интернет в поисках этого содержимого. Использование правильной семантической разметки для текста помогает пользователям проще находить то, что им нужно.
Жирный текстЕсть несколько способов, как сделать текст жирным, в том числе несколько элементов и стилевое свойство font-weight . Два основных элементов, используемых в данном случае, включают в себя и . Хотя эти два элемента имеют одинаковое представление, у них совершенно разные семантические значения.
Элемент описывает текст, который имеет важное значение . С другой стороны, элемент определяет текст, который должен быть стилистически выделен без важности. Вообще говоря, элемент следует использовать исключительно в качестве щипцов для завивки, чтобы изменить представление элемента, тогда как элемент должен быть использован для идентификации существенно важного текста.
Внимание: падающие камни. Для этого рецепта понадобятся бекон и майонез.
Демонстрация жирного текстаКурсивный текстКурсивный текст работает в той же области, что и жирный текст, где мы можем использовать несколько элементов или стилевое свойство font-style для достижения желаемого представления. Для курсивного текста наиболее часто используются два элемента - и . Опять же, у них одинаковое представление, но совершенно разные семантические значения.
Элемент акцентирует сильное выделение на тексте, а элемент определяет текст, который будет выражен альтернативным голосом или тоном . Использование элемента действительно ведёт к выделению текста с добавлением важности. С другой стороны, элемент в основном используется в диалоге или прозе, выделяя текст без какого-либо добавления акцента или важности.
Я люблю Чикаго! Имя Шэй означает подарок.
Использование для иконокВ последнее время наблюдается небольшое движение фронтенд-разработчиков к использованию элемента для включения иконок на странице, в частности, как это видно в Bootstrap . Элемент используется в качестве хука, а затем его класс определяет, какую иконку фонового изображения применить к элементу. В зависимости от того, насколько близко вы хотите следовать за семантикой, это может быть приемлемой практикой или нет.
Подчёркивание текстаВ продолжении шаблона, в котором у нескольких элементов одинаковое представление, подчёркнутый текст ничем от них не отличается. Есть разные элементы, которые мы можем использовать, а также стилевое свойство text-decoration . В нашем случае два основных элемента, применяемых для подчёркивание текста - это и .
Элемент используется для идентификации текста, который был недавно добавлен к документу , а элемент просто указывает на невнятное произношение .
Для более семантического кода, элемент может быть использован с атрибутами cite и datetime . Атрибут datetime указывает, когда содержимое было добавлено в документ, а атрибут cite предлагает машиночитаемый исходник, передающий дополнительную ссылку на, возможно, документацию или запрос билета.
Элемент обычно используется в качестве текстовой метки для правильного имени, часто на другом языке или указывает на орфографические ошибки.
Подчёркнутый текст требует внимательности, так как его можно спутать с гиперссылкой. По умолчанию гиперссылки подчёркнуты и это стало стандартной практикой дизайна. Подчёркнутый текст, который не является гиперссылкой, может запутать пользователей и немного разочаровать их. Используйте подчёркивание с осторожностью.
Обновлено: Этот сайт теперь содержит продвинутое руководство. Urushihara Yuuji выиграл Sasuke 27.
Демонстрация подчёркнутого текстаЗачёркнутый текстЗачёркнутый текст следует тому же шаблону, что и раньше, где могут быть использованы различные элементы, так и стилевое свойство text-decoration . Это свойство применяется наиболее часто, а также элементы и .
Элемент используется для указания, что текст удалён или перемещён из документа . Как и в случае с элементом , он может быть использован с атрибутами cite и datetime . Каждый из них сохранил прежнее смысловое значение - cite указывает на ресурс, на котором объясняются изменения, а datetime показывает, когда содержимое было удалено из документа.
Элемент определяет текст, который уже неточный или неактуальный.
Я заядлый велосипедист, скейтбордист и дизайнер. $24.99 $19.99
Демонстрация зачёркнутого текстаВыделенный текстЧтобы выделить текст в справочных целях следует использовать элемент . Добавленный в HTML5 элемент обеспечивает чистый, семантический способ определить текст специально для справочных целей, без необходимости использовать несемантические текстовые элементы.
Результаты поиска для "чикаго".
Демонстрация выделенного текстаАббревиатурыАббревиатуры - это сокращённая форма фразы, может быть семантически размечена в HTML с помощью элемента . Элемент должен использоваться вместе с атрибутом title , который включает в себя полное значение аббревиатуры. Первоначально применялся элемент , чтобы отличать аббревиатуры от сокращений, но с тех пор является устаревшим и не должен использоваться.
HTML CSS
Демонстрация аббревиатурВерхний и нижний индексыВерхние и нижние индексы могут быть размечены с помощью элементов и , соответственно. Важно отметить, что эти элементы должны быть зарезервированы для типографских соглашений, а не для презентационных задач.
H2O 1ое место
Демонстрация верхнего и нижнего индексов иЧтобы оценить масштаб или указать прогресс должны использоваться элементы и Элемент применяется для измерения фиксированного значения, которое не меняется со временем, в то время как элемент Показывает прогресс с увеличением величины.
Элемент может быть использован с атрибутами min , max , low , high , optimum и value . Атрибуты min и max устанавливают нижние и верхние границы диапазона, тогда как атрибут value устанавливает точное измеренное значение. Атрибуты low и high определяют, что следует считать нижней и верхней частью диапазона, в то время как значение optimum определяет наиболее выгодную часть диапазона, которая может находиться в нижней или верхней части.
Элемент Показывает прогресс, а не фиксированную величину. Он, в частности, представляет завершение задачи, либо сколько осталось до завершения или что было завершено до сих пор. Есть два атрибута, которые могут быть применены к элементу - value и max . Атрибут value указывает на то, где в настоящее время находится прогресс, а атрибут max указывает на то, когда прогресс будет достигнут.
7 звёзд Движение автомобиля, миль/час. Завершено на 50%. Держитесь, осталось чуть-чуть.
Демонстрация и Время и адресПредставление времени и адреса в HTML может быть выполнено с помощью элементов и , соответственно. Элемент может быть использован с атрибутом datetime или без него, в зависимости от того, как отформатирован текст внутри элемента. Если содержимое отформатировано с правильной датой и временем, то атрибут datetime может быть опущен. Кроме того, если время представляет собой дату или время публикации, то должен быть задействован логический атрибут pubdate .
Элемент может быть использован для хранения любой контактной информации, в том числе почтового адреса, а также веб-сайта или адреса электронной почты. Он не должен включать в себя любую дополнительную информацию, кроме контактной информации. Другое содержимое должно размещаться за пределами элемента .
2011-08-24
24 августа 2011
15:00
24 августа 2011 в 15:00
Шэй Хоу
http://learn.shayhowe.com
[email protected]
600 W. Chicago Ave.
Suite 620
Chicago, IL 60654
USA
Представление фрагментов кода или примеров на странице может быть выполнено с помощью элементов или Или их комбинации. Элемент обычно используется для представления фрагмента кода и по умолчанию отображается моноширинным шрифтом. Элемент является строчным элементом и может быть использован в абзацах текста или других блочных и строчных элементах.
Для больших блоков кода может быть использован элемент В сочетании с элементом . Элемент Представляет собой предварительно отформатированный текст и будет отображать текст точно так, как он набирался, с учётом пробелов. Вложение элемента в элемент Семантически определяет большие фрагменты кода, отображаемые в виде блока, с учётом пробелов.
Используйте элемент article. body { color: #666; font: 14px/20px Arial, sans-serif; }
Демонстрация И Строки и переносы словВремя от времени вы можете захотеть включить перенос в строке текста, в этом случае может быть использован элемент
. У этого элемента нет закрывающего тега, только открывающий. В XHTML элемент
является самозакрывающимся и включает обратную черту -
.
Переносы строк не должны использоваться для тематической группировки содержимого. Абзацы или другие элементы подходят для этого лучше. Переносы строк специально используются там, где они выступают как часть содержимого, например, в адресах и стихах.
В дополнение к переносу строк, вы можете также воспользоваться возможностью переносить слова через элемент . Применение элемента в середине слова гарантирует, что, если слово нужно разбить на две строки, это будет сделано в разборчивой форме.
600 W. Chicago Ave.
Chicago, IL 60654
USA
http://shayhowe.com
Первоначально элемент использовался для визуализации текста путём уменьшения размера шрифта на единицу, по сравнению со шрифтом по умолчанию, чисто для презентационных целей. Как мы знаем, презентации и стиль должны жить только в CSS, а не в HTML. В HTML5 элемент сохранил отображение меньшим размером шрифта, однако семантически переопределён в качестве побочного замечания или мелкой надписи. Он часто включает в себя информацию об авторских правах или юридические данные.
2012 Шэй Хоу
Демонстрация побочных замечанийЦитатыРуководство для начинающих обсуждает цитаты и когда использовать соответствующие элементы , или . В качестве быстрого напоминания, элемент ссылается на название работы, элемент определяет диалог или прозу, а элемент используется для вывода больших цитат, обычно из внешних источников.
Атрибуты гиперссылокРуководство для начинающих также описывает гиперссылки и их различное поведение. Что, однако, не описано, так это некоторые семантические преимущества гиперссылок, в частности, с помощью атрибутов download и rel .
Атрибут downloadАтрибут download говорит браузеру незамедлительно скачать файл, а не использовать поведение по умолчанию для перехода к файлу. В качестве примера, если ссылка с атрибутом href указывает на изображение, браузер предложит пользователю скачать изображение, вместо того, чтобы открыть изображение в браузере.
Атрибут download может служить в качестве логического атрибута, загружая файл как есть, или он может содержать значение, которое станет именем файла после загрузки. Использование конкретного значения позволяет называть файл на вашем сервере как вы пожелаете, в то же время предоставляя пользователям значимое название.
Twitter Logo Twitter Logo
Демонстрация атрибута downloadАтрибут relДля любых гиперссылок с атрибутом href вы можете также включать атрибут rel . Этот атрибут определяет отношение между текущим документом и документом, на который ведёт ссылка. Например, для ссылки на страницу с авторскими правами значение атрибута rel должно быть copyright .
Правила использования Содержание
Микроданные событийМикроданные событий очень похожи на микроданные человека, однако используют вместо этого библиотеку микроданных Event . Общие свойства похожи между ними и могут быть определены, как некоторые вложенные типы элементов.
Styles Conference Воскресенье, 24 августа 2014 в 9:00 Chicago Theatre 175 N. State St. Chicago, IL 60601
Микроданные событийМикроданные предлагают много способов дальнейшего расширения содержимого страницы. Мы лишь коснулись их поверхностно. Более подробную информацию о микроданных можно найти в книге Погружение в HTML5 и на сайте WHATWG .
WAI-ARIAWAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) является спецификацией, которая помогает сделать веб-страницы и приложения более доступными для людей с ограниченными возможностями. В частности, WAI-ARIA помогает определить роли (что блоки содержимого делают), состояния (как блоки содержимого настроены), а также дополнительные свойства для поддержки вспомогательных технологий.
РолиУстановка ролей WAI-ARIA осуществляется с помощью атрибута role . Эти роли затем указывают, что определённые элементы и блоки содержимого делают на странице.
...
Роли WAI-ARIA делятся на четыре различные категории: абстрактные, виджеты, структура документа и ориентиры. В этом уроке мы сосредоточимся в основном на структуре документа и ориентирах. Роль структуры документа определяет организационную структуру содержимого на странице, в то время как ориентиры определяют регионы страницы. Конкретные значения ролей для каждой из этих категорий показаны ниже.
Роли структуры документа- article
- columnheader
- definition
- directory
- document
- group
- heading
- listitem
- presentation
- region
- rowheader
- separator
- toolbar
- application
- banner
- complementary
- contentinfo
- navigation
- search
HTML5 представил несколько новых структурных элементов, которые обычно соответствуют ролям структуры документа и ориентирам. Как именно эти роли совпадают в отношении конкретных элементов можно увидеть ниже. Пожалуйста, обратите внимание, элементы и не подразумевают роль и допустимые роли для этих элементов могут быть использованы на странице только один раз. Тем не менее, если у вас есть несколько элементов и на странице, должны быть применены роли banner и contentinfo к элементам, непосредственно связанных с документом с точки зрения верхнего уровня, а не к элементам, вложенных в других областях структуры документа.
| article | application, article, document или main | |
| complementary | complementary, note или search | |
| - | contentinfo (один раз на страницу) | |
| - | banner (один раз на страницу) | |
| navigation | navigation | |
| region | alert, alertdialog, application,contentinfo, dialog, document, log, main,marquee, region, search или status |
Комбинация элементов с их согласованными ролями в HTML5 будет выглядеть как в следующем фрагменте кода.
... ... ... ...
Состояния и свойстваВ сочетании с ролями WAI-ARIA существуют также состояния и свойства , которые помогают информировать вспомогательные технологии, как настроено содержимое. Подобно ролям, состояния и свойства разбиты на четыре категории, в том числе атрибуты виджета, атрибуты живого региона, атрибуты drag-and-drop и атрибуты отношений.
Атрибуты виджета поддерживают роли виджетов и являются специфическими для пользовательского интерфейса и там, где от пользователя требуются действия. Атрибуты живого региона
Семантика кода HTML всегда является горячим вопросом. Некоторые разработчики стараются всегда писать семантический код. Другие критикуют догматичных приверженцев. А некоторые даже понятия не имеют о том, что это такое и зачем оно нужно. Семантика определяется в HTML в тегах, классах, ID, и атрибутах, которые описывают назначение, но не задают точно содержание, которое в них заключено. То есть речь идет о разделении содержания и его формата.
Начнем с очевидного примера.
Плохая семантика кодаЗаголовок статьи А автор Инко Гнито.
Хорошая семантика кодаЗаголовок статьи
Текст статьи, который кем-то написан. Инко Гнито - ее автор.
Вне зависимости от того, считаете ли вы, что HTML5 готов к использованию или нет, наверняка использование тега в данном случаем будет более привлекательным, чем обычный с указанием класса. Название статьи становится заголовком, содержание становится параграфом, а выделенный жирным шрифтом текст становится тегом .
Но не все так четко представляется тегами HTML5. Давайте рассмотрим набор имен классов и разберемся с тем, отвечают ли они требованиям семантики.
Не семантический код. Это классический пример. Каждая рабочая среда CSS для модульной сетки использует такого типа имена классов для определения элементов сетки. Будет ли это "yui-b", "grid-4", или "spanHalf" - такие имена ближе к заданию разметки, чем к описанию содержания. Однако их использование в большинстве случаев неизбежно при работе с шаблонами модульных сеток.
Семантический код. Нижний колонтитул (footer ) приобрел устойчивое значение в веб дизайне. Это нижняя часть страницы, которая содержит такие элементы как повторяющаяся навигация, права использования, информацию об авторе и так далее. Данный класс определяет группу для всех этих элементов без их описания.
Если вы перешли к использованию HTML5, то лучше применять элемент в таких случаях. Замечание касается и всех остальных частей веб страницы (верхний колонтитул должен быть , боковая панель - , и так далее). Ну а если вы еще не прониклись силой HTML5 (наверно у вас есть действительно важная причина), то эквивалентные имена классов будут прекрасной заменой тегам.
Не семантический код. Он точно определяет содержание. Но почему текст должен быть большим? Чтобы выделяться среди другого более мелкого текста? "standOut " (выделение) больше подходит в данном случае. Вы можете решить изменить стиль для выделяющего текста, но ничего не делать с его размером, и в таком случаем название класса может привести вас в замешательство.
Семантический код. В данном случае речь идет об определении уровня важности элемента в интерфейсе приложения (например, параграфа или кнопки). Элемент с более высоким уровнем может иметь яркие цвета и больший размер, а элементы с низким уровнем могут содержать больше содержания. Но точного определения стилей в данном случае нет, поэтому код является семантическим. Данная ситуация очень похожа на использование тегов , , , и так далее, но к другим элементам интерфейса.
Семантический код. Если бы каждое имя класса можно было так четко определить! В данном случае мы имеем описание раздела, который имеет содержание, назначение которого легко описать, также как и "tweets", "pagination" или "admin-nav".
Не семантический код. В данном случае речь идет о задании стиля для первого параграфа на странице. Такой прием используется для привлечения внимания читателей к материалу. Лучше использовать имя "intro", в котором отсутствует упоминание элемента. Но еще лучше использовать селектор для таких параграфов, например article p:first-of-type или h1 + p .
Не семантический код. Это очень обобщенное имя класса, которое используется для организации форматирования элементов. Но в нем нет ничего, чтобы касалось описания содержания. Различные теоретики семантики рекомендуют в таких случаях использовать имя класса наподобие "group". Вполне вероятно, что они правы. Так как данный элемент, несомненно, служит для группирования нескольких других элементов, и рекомендуемое название будет лучше описывать его назначение без погружения в детали.
Не семантический код. Слишком детальное описание формата содержания. Лучше подобрать другое имя, которое будет описывать содержание, а не его формат.
Семантический код. Класс очень хорошо описывает статус содержания. Например, сообщение об успешном завершении операции может иметь совершенно другой стиль от сообщения об ошибке.
Не семантический код. В данном примере имеется попытка задать определение формата содержания, а не его назначения. "plain-jane" очень похоже на "normal" или "regular". Идеальный код CSS должен быть написан так, чтобы не возникало необходимости в именах класса наподобие "regular", которые описывают формат содержания.
Не семантический код. Такого типа классы обычно используются для определения элементов сайта, которые не должны включаться в цепочку ссылок. В данном случае лучше использовать что-то наподобие rel=nofollow для ссылок, но не класс для всего содержания.
Не семантический код. Здесь имеется попытка описать формат содержания, а не его назначение.
Но...Допустим, что у вас на сайте есть две статьи. И вы желаете задать им разные стили. "Обзоры фильмов" будут иметь голубой фон, а "Горячие новости" - красный фон и шрифт большего размера.
Один из способов решить задачу такой:
... ...
Другой способ такой:
... ...
Наверняка, если опросить нескольких разработчиков о том, какой код более соответствует требованиям семантики, большинство укажет на первый вариант. Он отлично соответствует материалу данного урока: описание назначение без ссылок на форматирование. А второй вариант указывает на формат ("blueBg" - имя класса, которое сформировано из двух английских слов, означающих "голубой фон"). Если вдруг будет принято решение поменять дизайн обзоров фильмов - например, сделать зеленый фон, то имя класса "blueBg" превратится в кошмар разработчика. А имя "movie-review" позволит абсолютно спокойно изменять стили оформления с сохранением отличного уровня поддержки кода.
Но никто не утверждает, что первый пример лучше во всех без исключения случаях. Допустим, что определённый оттенок синего используется во многих местах на сайте. Например, он является фоном для некоторой части нижнего колонтитула и областей в боковой панели. Вы можете воспользоваться следующим селектором:
Movie-review, footer > div:nth-of-type(2), aside > div:nth-of-type(4) { background: #c2fbff; }
Эффективное решение, так как цвет определяется только в одном месте. Но такой код становится сложным для поддержки, так как имеет длинный селектор, сложный для визуального восприятия. Также потребуются другие селекторы для определения уникальных стилей, что приведет к повторению кода. Или вы можете использовать другой подход и оставить их разделёнными:
Movie-review { background: #c2fbff; /* Определение цвета */ } footer > div:nth-of-type(2) { background: #c2fbff; /* И еще одно */ } aside > div:nth-of-type(4) { background: #c2fbff; /* И еще одно */ }
Такой стиль помогает сохранять CSS файл более организованным (разные области определяются в разных разделах). Но платой является повторение определений. Для больших сайтов определение одного и того же цвета может доходить до нескольких тысяч раз. Ужасно! Вариантом решения может быть использование класса по типу "blueBg" для определения цвета один раз и вставки его в HTML коде, когда требуется использовать данный дизайн. Конечно, его лучше назвать "mainBrandColor" или "secondaryFont", чтобы отвязаться от описания форматирования. Можно пожертвовать семантикой кода в пользу сохранения ресурсов.
Загрузка...
