Структурная семантика: важность элементов секционирования HTML5

  1. Дальнейшее чтение на SmashingMag:
  2. Создание сайтов
  3. Веб Стандарты
  4. Проблема с <div>
  5. Почему это так?
  6. Уровни заголовка не помогают
  7. Чей это нижний колонтитул?
  8. секционирование
  9. Заголовки и доступность
  10. Много суеты ни за что
  11. ARIA Enhancement
  12. Являются ли разделы новыми <div>?
  13. Разделы и семантика
  14. Microdata
  15. Заключение

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

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

Поскольку мы можем выглядеть как <div>, но не вести себя как разделы, опыт пользователей вспомогательных технологий (AT) и программного обеспечения для интеллектуального анализа данных сильно отличается от опыта, которым пользуются те, кто одарен зрением.

Дальнейшее чтение на SmashingMag:

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

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

Создание сайтов

Я познакомился с веб-дизайном через модуль университетского курса, который назывался что-то вроде «2.1: Dreamweaver», и я хорошо помню свой первый веб-сайт. Я помню мой сознательно броский выбор Веб-сейф цвета. Я помню, это выглядело правильно только в Netscape Navigator , Больше всего я помню многочасовое разочарование от перетаскивания по периметру визуального инструмента макета под названием «таблица». В то время я понятия не имел, что этот инструмент макета представляет собой тип аннотации, называемой HTML-тегом. Кроме того, никто не сказал мне, что эта аннотация предложила мою пэчворк из основных цветов и сжатых JPEG-файлов для своего рода безумной электронной таблицы Excel. Другими словами, я понятия не имел, что делаю это неправильно .

Другими словами, я понятия не имел, что делаю это неправильно

* Укусы языка *
Фундаментальный недостаток большинства графических, продуктовых, архитектурных и даже городских проектов заключается в том, что они настаивают на том, чтобы служить Богу Красивого, а не Богу Бытия-Доброго. Dreamweaver от Macromedia не делала невозможным создание действительных документов, но это был один из новых редакторов графического интерфейса, которые потворствовали нашему стремлению к визуальному выражению больше, чем поощряли информационную ясность. Dreamweaver и другие редакторы, классифицированные под неправильным названием «WYSIWYG», помогли превратить стандартизированную информационную систему в дом для графического дизайна и позволили легиону невыносимых Натанов Барлис расклеить Всемирную паутину с помощью их безвкусного глазного леденца. Я был одним из многих.

Веб Стандарты

К тому времени, когда я сделал свой первый веб-сайт, движение веб-стандартов, продвигающее соответствие, единообразие и включение, росло. Я просто не знал об этом намного позже. Мне не нужно было этого делать: веб-дизайн агентства по-прежнему был главным образом графическим дизайном с неохотно работающим отделом программирования. Если вы сомневаетесь в влиянии этой культуры на Всемирную паутину, не смущайтесь тем фактом, что нам потребовалось до 2010 года ( 2010 года! ), Чтобы мы согласились с этим Веб-браузеры на самом деле не сделаны из бумаги , Когда я наконец-то познакомился с веб-стандартами и практикой «делать все правильно», это был человек, который до сих пор работал в основном визуальным дизайнером. Неизбежно, мои первые поиски основанного на стандартах дизайна были связаны с освоением «CSS-макета», практики визуальной компоновки контента без использования семантически неверного элемента <table>. Уже несколько лет мы поддерживаем макет на основе <div> как знак качества. Вы могли бы даже сказать, что это стало проверенным временем обрядом для графических дизайнеров, которые переходят на «правильное» кодирование HTML. Как я покажу, <div> является основным инструментом графического дизайна. Влияет только на внешний вид, он лицензирует плохую структуру документа и чрезмерно улучшенные интерфейсы; все, не делая ваш документ технически недействительным. Как таковой, он санкционирует худший вид хаков .

Проблема с <div>

Каждый день тысячи веб-разработчиков призывают всемогущего <div> делить, разделять и ограждать контент своих веб-страниц. Мы используем <div> для контроля содержимого, чтобы предотвратить попадание разрозненных фрагментов информации друг в друга. По правде говоря, у <div> такой силы нет. Рассмотрим следующий пример: Каждый день тысячи веб-разработчиков призывают всемогущего <div> делить, разделять и ограждать контент своих веб-страниц В этот базовый макет я включил текст и смежную «боковую панель». Чтобы читателю было абсолютно ясно, что боковая панель является тангенциальной и не относится к основному контенту, я обвел ее жирной линией. используя свойство border. Для тех из вас, кто кричит: «Этот заголовок боковой панели должен быть <h3>!», Я скоро к этому вернусь. Все мои дизайнерские решения (соседняя позиция, граница и уменьшенный размер шрифта) облегчаются одним только CSS. Итак, когда я убираю CSS, я получаю это: Выключение CSS не только самый быстрый способ сделать веб-страницу отзывчивый , но это отличный способ увидеть, как на самом деле вычисляются документы HTML4 (в которых отсутствуют элементы секционирования). В этом случае наша так называемая «боковая панель» оказалась еще одним источником информации в линейный поток документа.

Почему это так?

Причина этого заключается в том, что <div> является и всегда был содержание потока элемент. Независимо от толщины границ <div> или темного цвета фона, он не выделяется в структуре документа. Таким образом, ни его содержание. После удаления CSS заголовок «Ресурсы» на боковой панели искусственного оператора теперь выглядит не как отдельный компонент страницы, а как часть основного контента. Для парсера или программы чтения с экрана это казалось бы так всегда. Для ясности давайте рассмотрим еще один пример с использованием фрагмента HTML: <div class = "parent"> <h2> Heading </ h2> <p> Некоторый контент ... </ p> <div class = " child "> <h2> Другой заголовок </ h2> <p> Некоторое другое содержимое ... </ p> </ div> </ div> Я сделал здесь немного другое, введя два элемента <div> в отношения родитель-потомок: тег div.child принадлежит div.parent. В любом случае, мы можем сделать так, чтобы CSS выглядел именно так. Тем не менее, <div> s, чтобы процитировать спецификацию, «не имеют особого значения». Они не только ничего не значат семантически, но и не влияют на вычислимую структуру страницы (иногда называемую « схема документа «). <Div>, которые мы использовали, также могут быть невидимыми; Итак, чтобы получить содержательную карту созданной нами структуры, мы должны полностью удалить их . Это оставляет только четыре элемента и показывает, что отношения родитель-ребенок являются иллюзией: <h2> Заголовок </ h2> <p> Некоторый контент ... </ p> <h2> Другой заголовок </ h2> <p> Некоторые другой контент ... </ p> Как HTML-кодеры, заинтересованные в звуковой структуре, мы должны быть заинтересованы в том, что приведенное выше сокращение - которое пропускает все бессмысленные элементы - это то, что мы на самом деле сделали , а не то, что мы намеревались сделать: В действительности не принадлежащий «родителю», «ребенок» имеет контекстный статус в документе, отличный от предполагаемого.

Уровни заголовка не помогают

Распространено мнение, что замена второго <h2> на <h3> решит нашу проблему. Если бы мы сделали это, мы получили бы следующий, более динамичный план: это решение, конечно, кажется более целенаправленным, но правильное ли это решение? Должен ли второй заголовок быть подзаголовком в той же теме (<h3>) или представлять собой совершенно новую тему (<h2>, как у нас было в первую очередь)? Только заголовки могут показывать только то, где начинается фрагмент контента, а не где он заканчивается, что затрудняет определение того, что и к чему относится . Мы должны смоделировать принадлежность, выбрав правильный уровень заголовка для контекста. Подумайте об этом на секунду: мы определяем структурный статус контента, помечая его задним числом. Просто прошу пойти не так. Давайте посмотрим на домашнюю страницу экспертов по доступности The Paciello Group. Естественно, это очень доступный и довольно хорошо организованный сайт, но можно ли улучшить структуру с помощью разделов HTML5 ? Вы заметите, что они используют <div>, чтобы совместно обернуть трех <h2>, разработчиков программного обеспечения , владельцев веб-сайтов и Майка Пачелло . Поскольку <div> не может вычислимо содержать эти три блока, последнему <h2> и последующему <h3> разрешается спариваться в этом отношении: Подождите ... так что «Свяжитесь с нами сейчас» - это подтема, принадлежащая большему тема «Майк Пачелло». Это может быть правильно? Это, конечно, не выглядит таким образом в визуальном макете. Стоит отметить, что <div>, который не может тематически сгруппировать эти три блока <h2>, имеет класс class = "region". По иронии судьбы, если бы этот <div> был <section>, некоторые программы чтения с экрана считали бы его «регионом». Если бы <section> использовался вместо <div>, наблюдаемое отношение не возникло бы: «регион» был бы автономным. Класс «регион», однако, не принимается во внимание каким-либо значимым образом и не влияет на структуру. Хорошо, это странно, но ситуация становится еще более запутанной, когда мы начинаем включать элементы, для которых заголовки на самом деле даже не подходят . Возьмем следующий пример: Распространено мнение, что замена второго <h2> на <h3> решит нашу проблему На моей HTML4-странице у меня есть <h1> для представления документа, <h2> для основного содержимого и <h3> для обозначения начала моей «боковой панели» (которая является всего лишь <font> как в предыдущих примерах). Эта страница следует давним соглашениям, поскольку безымянный нижний колонтитул div # лежит у основания документа для получения информации об авторских правах и других подобных злых дел. (Это должен быть <div> в HTML4, потому что тег <footer> еще не существует.) Вопрос в том, к какому заголовку относится нижний колонтитул?

Чей это нижний колонтитул?

Большинство из нас, основываясь на внешнем виде, согласились бы, что нижний колонтитул должен принадлежать документу. Это то, что мы научились ожидать. Для незрячих это другая история: поскольку между боковой панелью <h3> и содержимым нижнего колонтитула нет нового вводного заголовка, можно экстраполировать, что эти два компонента едины (см. Изображение слева внизу). Кроме того, можно также утверждать, что мы включили «боковую панель» в качестве простого «отрыва» от потока основного контента, прежде чем вернуться к этому потоку при появлении нижнего колонтитула (см. Изображение справа внизу). Это сделало бы <h2> заголовок нижнего колонтитула. Большинство из нас, основываясь на внешнем виде, согласились бы, что нижний колонтитул должен принадлежать документу Единственный достойный шанс понять предполагаемую структуру страницы - это вывести ее из чтения содержимого. Помня о том, что весь смысл «языка разметки» состоит в том, чтобы упростить структуру информации, я, возможно, также скинул HTML и написал свою веб-страницу на обратной стороне салфетки . Некоторые гуру доступности предложили бы использовать исправление <h2> для заголовка #footer и вернуть его в соответствие, отмечая конец боковой панели следующим образом: Этот вид работает как хак, но это не совсем правильно. Вы действительно хотите сделать большое объявление о нижнем колонтитуле - объявление такое же большое и жирное, как и то, которое использовалось для вызова основного контента, не говоря уже о более смелом, чем боковая панель? Нет Если бы наша веб-страница была фильмом, нижний колонтитул не был бы заголовками - это были бы титры. В HTML5 элемент <footer> «Содержит информацию о своем разделе». Это семантически лучше: мы не используем нижние колонтитулы для представления тем; мы используем их, чтобы заключить их. Соответственно, нижние колонтитулы - в отличие от их родительских разделов в HTML5 - не требуют заголовков. То, что уровень вложенности заголовков правильный, не обязательно делает страницу удобной для чтения. Самая близкая вещь к «системе» для правильного структурирования документов в HTML4 - это пронумерованные заголовки. Как объясняется, это не только приводит к неоднозначности, но на практике мы даже не используем заголовки для определения структуры. Мы используем <div> для определения структуры и добавляем некоторые извиняющиеся заголовки для доступности. Что еще хуже, совет относительно размещения пронумерованных заголовков даже не ясно, должны ли мы использовать их по порядку (h1-h6) или нет. Слабая связь между заголовками и <div> неадекватна. Теперь, с введением элементов секционирования, мы все еще используем коробки, своего рода, но коробки, которые на самом деле что-то говорят сами по себе. Мы делаем шаг от простого намека на разделы (обозначая их), чтобы позволить им определять себя . Одновременно зрячие читатели и незрячие парсеры могут испытывать контент, который легко делится на четкие, управляемые части. Спецификация HTML4 очень неточна в том, что такое раздел и как определяется его область действия. Важное значение имеет автоматическая генерация контуров, особенно для вспомогательных технологий, которые могут адаптировать способ представления информации пользователям в соответствии со структурой документа. HTML5 устраняет необходимость в элементах <div> из алгоритма выделения, вводя новый элемент <section>, элемент HTML section.

секционирование

Осознавая наше желание использовать легитимные элементы для создания вычислимых разделов, HTML5 предлагает <section>, <article>, <aside> и <nav>. Как какой-то отвратительный праздничный представитель, я расскажу о практическом разделении с использованием этих элементов в краткой викторине. Изучите следующую диаграмму. Сколько разделов вы считаете? Осознавая наше желание использовать легитимные элементы для создания вычислимых разделов, HTML5 предлагает <section>, <article>, <aside> и <nav>

Ответы с множественным выбором:

  1. 1
  2. 2
  3. 3
  4. 4

Правильный ответ (б), 2. Мы включили только один из новых элементов секционирования HTML5 в виде <aside> , Поскольку <footer> и <header> s не являются элементами секционирования, с чем это нас оставляет? Тег <body> - это самый внешний элемент, делающий сам документ своего рода разделом (точнее, суперсекцией ). Итак, у вас есть это: мы использовали «секционирование» начиная с HTML 1.0, просто не было никаких подразделов, о которых можно было бы говорить.

Некоторые из вас, возможно, пропустили подсказку ранее в этой статье и подумали, что <header> и <footer> были элементами секционирования. Не волнуйтесь; это не твоя вина. Всякий раз, когда разработчики, подобные мне, пытаются объяснить структуру страницы HTML5, они обычно размахивают диаграммой, подобной той, которую я использовал выше. На этих диаграммах поля с пометкой «верхний колонтитул», «в сторону» и «нижний колонтитул» существуют в одной визуальной парадигме и занимают аналогичную область. Похоже, они похожи друг на друга. Другим виновником этой путаницы является способ написания спецификации. Верьте или нет, структура документа некоторых страниц в спецификации, которые ссылаются на структуру документа, структурно неясна ! Такие вещи иногда случаются, когда стандарт постоянно развивается. Дерево навигации для «4.4 разделов» найдено в этот проект выложен так:

  • 4.4 Разделы
    • 4.4.1 тело
    • 4.4.2 nav
    • 4.4.3 статья
    • 4.4.4 в сторону
    • 4.4.5 h1, h2, h3, h4, h5 и h6
    • 4.4.6 hgroup
    • 4.4.7 заголовок
    • 4.4.8 нижний колонтитул
    • 4.4.9 адрес

Вам будет прощено думать, что все в этом списке квалифицируется как элемент секционирования, абсурдно, как могут звучать некоторые из них (&lt;адрес>?). Только когда вы переходите к разделу 4.4 Разделы> 4.4.8 Нижнего колонтитула, вам говорят, что «элемент нижнего колонтитула не разбивает содержимое на части; это не вводит новый раздел. ”Спасибо!

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

  1. <body> - первый раздел;
  2. <article>, <section>, <nav> и <aside> создают подразделы;
  3. Подразделы могут содержать больше разделов (подразделов)

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

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

Схема для этого примера выглядит следующим образом:

Теперь, когда мы реализовали разделы, границы ясны. Наш документ содержит статью, которая, в свою очередь, содержит в стороне. Есть три раздела, каждый из которых принадлежит последнему, и глубина каждого раздела отражена в схеме. Важно отметить, что поскольку элементы секционирования обертывают свое содержимое, мы прекрасно знаем, где они заканчиваются , а также где они начинаются. И да - программы чтения с экрана, такие как JAWS, фактически объявляют об окончании таких разделов ! Мы знаем, к какому контенту относится , что значительно упрощает определение цели нижнего колонтитула. Поскольку он существует за пределами <article> и <aside>, он должен быть нижним колонтитулом документа. Вот та же самая диаграмма снова, с подсвеченными частями:

Вот та же самая диаграмма снова, с подсвеченными частями:

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

Заголовки и доступность

Когда сэр Тим Бернерс-Ли задумал элемент <section> вплоть до 1991 года Он предвидел устаревание ранжированных уровней заголовков. Идея заключалась в том, что заголовки должны выступать в качестве простых меток для блоков контента, а характер (то есть важность, область и т. Д.) Контента будет автоматически рассчитываться на основе положения контента в документе.

На самом деле, я бы предпочел вместо <h1>, <h2> и т. Д. Для заголовков [те, которые приходят из AAP DTD] иметь вложенный элемент <section> .. </ section> и универсальный <h> .. < / h> который на любом уровне внутри разделов будет производить требуемый уровень заголовка.

Почему это предпочтительнее? Системное определение уровня заголовка, основанное на уровне вложенности, гораздо более надежно, поскольку устраняет уровень принятия решений : «автоматически» создавая необходимый уровень заголовка, нам больше не нужно отдельно решать, какой нумерованный заголовок следует включить. Это эффективно мешает нам выбрать неправильный уровень заголовка, что было бы плохо для разбираемой структуры. Подраздел должен подчиняться своему родительскому разделу. Поскольку эта взаимосвязь между разделами определяет «уровень», пронумерованные заголовки делаются избыточными - следовательно, предлагаемый <h>.

Много суеты ни за что

Теперь, это предположительно сложная часть; часть, которая вызывает все испуг и скрежет зубов . Это та часть, которая заставила Люка Стивенса написать эта диатриба и привел Роджера Йоханссона в состояние нехарактерной апоплексии, спрашивая: « ты тоже запутался? ». Готовы?

В спецификации WHATWG (там же, где <footer> якобы были классифицированы как элементы секционирования!), Нам «настоятельно рекомендуется либо использовать только элементы h1, либо использовать элементы соответствующего ранга для уровня вложенности раздела» . На первый взгляд это кажется наоборот. Конечно, только один из этих способов действий может быть правильным? Чем ты занимаешься? Я думаю, может быть, первый вариант. Или второй. Кто я?

Это, безусловно, смутило меня, поэтому я поговорил с редактором HTML Ианом Хиксоном. Он подробно объяснил мне схему, и я убежден, что она абсолютно надежна. Я сделаю все возможное, чтобы объяснить это здесь.

Хорошо. Как оказалось, мы не получили общий элемент <h>. Это не будет обратно совместимо, потому что старые браузеры не распознают его. Тем не менее, заголовки, которые вводят разделы - независимо от их пронумерованного уровня - рассматриваются как общие <h>. Совершенно правильно, что именно раздел в этом случае берет на себя ответственность за вложенность, а не за заголовок, и всякий раз, когда вы вводите новый раздел, вы в обязательном порядке вводите новый уровень вложенности. Что это значит на практике? Это означает, что мы можем представить и извлечь пользу из структурного уточнения, предлагаемого разделами, не отказываясь от уровней заголовков. Возьмите следующий пример:

<h4> Заголовок страницы </ h4> <p> Вводный абзац ... </ p> <section> <h3> Заголовок раздела </ h3> <p> некоторый контент ... </ p> <h2> Подзаголовок < / h2> <p> содержание после подзаголовка ... </ p> <section> <h1> подзаголовок </ h1> <p> содержание двухуровневое ... </ p> </ section> </ section > <h5> Другой заголовок </ h5> <p> Продолжение содержания ... </ p>

Наши уровни заголовков повсюду. Это не рекомендуется в спецификации, но помогает продемонстрировать, насколько надежным является алгоритм HTML5. Если мы заменим все заголовки, открывающие разделы, на общий («подстановочный знак», если хотите) <h>, все станет яснее:

<h> Заголовок страницы </ h> <p> Вводный абзац ... </ p> <section> <h> Заголовок раздела </ h> <p> некоторый контент ... </ p> <h2> Подзаголовок < / h2> <p> содержание после подзаголовка ... </ p> <section> <h> подзаголовок </ h> <p> содержание двухуровневое ... </ p> </ section> </ section > <h5> Другой заголовок </ h5> <p> Продолжение содержания ... </ p>

Важно отметить, что единственными ошибками, обнаруженными в вычисленном наброске, являются ошибки, связанные с неправильно упорядоченными пронумерованными заголовками в том же разделе . В исходном примере вы увидите, что я следовал за <h3> с <h2>. Поскольку они находятся в неправильном порядке, схема интерпретирует их как находящиеся на одном уровне. Если бы я инкапсулировал <h2> в <section>, эта ошибка была бы подавлена.

Ну как на счет этого? Если вы не уверены, вставьте мой пример в планировщик испытаний и поиграть. Работает просто отлично. На самом деле, это действительно трудно сломать.

Если вы считаете, что пользователи программ чтения с экрана выигрывают, вы можете придерживаться второго из двух пунктов спецификации и включать пронумерованные заголовки, отражающие уровень вложенности. Как было показано, это не повлияет на схему, но поскольку объявлен уровень заголовка («Уровень заголовка 2 - Важность разделов»), он дает более четкое представление о структуре тем, кто не может видеть прямоугольники внутри блоков.

Утверждение о том, что уровни заголовков постоянно необходимы для пользователей программ чтения с экрана, оказывается под давлением, если учесть улучшения, достигнутые поставщиками программ чтения с экрана. Программы чтения с экрана, такие как JAWS, отмечают территорию разделов более четко, чем заголовки, объявляя начало и конец разделов и тематические области, которые они представляют («Конец статьи!»). С этой точки зрения использование более одного <h1> в вашем документе иногда может быть применимо. Вы столкнетесь с некоторыми экспертами по доступности, которые заинтересованы в своей мантре «может быть только одна [h1]!», Но исследование показывает что даже в HTML4 или XHTML это не обязательно так.

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

ARIA Enhancement

Переход к структуре документа HTML5 сделан более плавным благодаря включению ARIA основные роли , которые оба относительно хорошо поддерживается и несколько аналогично навигации на основе секций, которую мы должны ожидать позже. ARIA предлагает гораздо больше специфических возможностей, чем когда-либо мог выдержать базовый HTML5; Таким образом, в том числе ARIA "на болтах" является конечно вежливый , Однако расценивать роли ARIA как замену семантического HTML было бы серьезным заблуждением.

Роли ориентира, такие как role = «contentinfo» и role = «banner», только адресная доступность - не интеллектуальный анализ данных - и каждая из них может использоваться только один раз для каждого документа. Они по сути являются ярлыками для частей страницы. Элементы HTML больше похожи на строительные блоки, которые используются многократно и модульно. Таким образом, хотя вы можете помочь доступности, поместив role = ”banner” в элемент <header>, ближайший к корню документа, это не мешает вам использовать <header> для введения других разделов:

Являются ли разделы новыми <div>?

Это распространенное заблуждение.

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

Например, если новый элемент <section> был просто <div> с новым именем, принятие его было бы простым вопросом поиска и замены. Хотя это точно не будет прогрессом. Правда в том, что <div> все еще занимает достойное место в спецификации '; мы только что дали свои организационные обязанности команде элементов, которые более квалифицированы. Извините, <div>, старый приятель. Тогда для чего мы используем <div>? Именно то, что они были хороши с самого начала: как инструмент для « стилистические приложения… когда существующие значимые элементы исчерпали свое назначение «.

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

<section class = "external"> <section class = "inner"> <h1> Заголовок раздела </ h1> </ section> </ section>

... потому что внешний раздел ничего не делает, а внутренний - нет. Мы создали два раздела для одного фрагмента контента. Быстрый пробег через наш автор выдает предупреждение «Untitled Section»:

Блеск <div> в этом контексте заключается в том, что он отказывается влиять на схему, поэтому мы можем использовать его, не опасаясь репрессий. Это…

<section> <div> <h1 & gtSection title </ h1> </ div> </ section>

... предотвращает катастрофа и приводит к этой незапятнанной, хотя и упрощенной схеме:

Разделы и семантика

Многие разработчики испытывают проблемы со словом «семантический». Вы можете даже сказать, что они не знают, что означает это слово, что (если вы знакомы с этим термином) создает интересный парадокс. Например, когда Джеффри Зельдман выступает за для «семантического» применения атрибута id он как бы упускает суть. Основное назначение семантического HTML - автоматическое извлечение значения из контента. Применение частного нестандартного идентификатора к <div> не улучшило бы семантику элемента на йоту: посетители не смогут его увидеть, а парсеры его проигнорируют. Так много для семантическая паутина !

Разделы часто характеризуются как «семантический» эквивалент <div>. В лучшем случае это полуправда, и я прошу прощения за то, что так часто употреблял термин «семантический» - это стало чем-то вроде сокращения. Некоторые элементы HTML по своей сути семантические, поскольку они предписывают конкретное значение своему содержанию. Элемент <address> является хорошим примером: когда анализатор достигает <address>, он знает, что содержимое, вероятно, следует интерпретировать как контактную информацию. Другое дело, что он решит сделать с этими знаниями, но вполне вероятно, что программа чтения с экрана могла бы предоставить ярлык для адреса или поисковая система могла бы использовать его для уточнения своих страниц результатов.

Элементы секционирования не столько семантические, сколько синтаксические. Все <section> говорит нам, что это часть целого. Однако синтаксический вклад элементов секционирования в структуру документа не является несущественным. Примите во внимание следующее предложение: если разделы не являются веб-сайтами, то вы используете устаревшие . Там много узнаваемых слов, но отсутствие разумного синтаксиса затрудняет распаковку предложения. Так же и с секционированием: вы не столько создаете смысл, сколько собираете его. Значение не всегда о «вещи»; иногда о том, что роль этой вещи среди других вещей.

Microdata

Эффективные, синтаксически надежные структуры данных бесполезны, если они семантически отсутствуют. К счастью, HTML5 покрывает оба угла и предоставляет механизм для прикрепления семантики. метаданные , называется " микроданных »К нашему структурированному контенту. Использование микроданных и консультации schema.org Вы можете определить содержание страницы как что-либо от научной статьи до режима упражнений . В отличие от классов и идентификаторов, эта информация действительно может быть полезна для интерпретации.

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

Эти микроданные были найдены Google и отображены в «Структурированной панели данных» для темы WordPress. типичный ,

Заключение

HTML - это не просто SDK или палитра графического дизайнера. Это метаязык, язык, который сообщает вам особую информацию. Иногда мы - или, точнее, анализаторы, которые мы используем, - получаем выгоду от дополнительной информации о предмете, времени, происхождении или популярности контента. Для этого и нужны такие API, как микроданные и RDFa. В других случаях необходимо определить контекст, иерархию, относительную важность и взаимозависимость информации. Именно здесь может использоваться соответствующий синтаксис, облегчаемый элементами секционирования.

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

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

  1. Они будут указывать на плохие реализации определенных поставщиков: это ошибки, и ошибки исправляются!
  2. Они будут ссылаться на действия крупных веб-сайтов, которые не используют элементы секционирования: если большие сайты не имеют разделов, это не означает, что они этого не хотят. С каких это пор большое значение означает «правильно»?
  3. Они наводнят вас примерами разработчиков, плохо реализующих разделы: некоторые разработчики делают глупости, и их неправильное использование HTML не останавливается на разделах. Я, кстати, сюда себя включаю.
  4. Они предоставят вам неподтвержденные данные о поведении пользователей в определенных группах: решение проблем в каждом конкретном случае обходится дорого и нецелесообразно. Фрагментация и сложность также были бы неизбежны: потеря для большинства пользователей.

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

Похожие

IIS SEO Toolkit Что это?
IIS SEO Toolkit предназначен для веб-разработчиков, администраторов веб-серверов и хостинг-провайдеров, чтобы улучшить их веб-сайты в поисковых системах. Я не буду вдаваться в подробности всех функций, скорее всего, я расскажу совсем немного о том, что предлагает набор, вместо этого сосредоточившись на преимуществах SEO или нет. Как его установить Бинг предлагает
SEO Австрия-Германия
В Австрии проживает примерно одна десятая часть населения Германии. Конечно, у нас также меньше веб-сайтов, чем у наших соседей. кто Google .at использует, что, безусловно, однажды замечено, что в результатах поиска часто встречается больше .de страниц,
Техника SEO в White Hat: что это такое?
White hat SEO - это этическая поисковая оптимизация, и это то, что вы должны использовать для улучшения вашего сайта . Когда вы разрабатываете отличный сайт и позволяете ему развиваться естественным образом, он будет получать и поддерживать
Что такое SEO? Нужно ли это моему сайту?
... это процесс, направляющий трафик с веб-сайта на поисковые системы, такие как Google, например, на веб-сайт, который отвечает потребностям конкретного клиента в случае, если человек находится на другой стороне, выполняя поиск. SEO позволяет вам улучшить рассматриваемый сайт органически, то есть бесплатно (где вам не нужно платить за Google, например, появляться в первых результатах поиска
Увеличьте трафик в своем магазине с Yoast WooCommerce SEO
После запуска нашей новой темы WooCommerce Captiva (узнать больше об этом в нашем Введение в пост Captiva ) мы запускаем новую мини-серию постов в блоге, в которой рассматриваются лучшие плагины для турбонаддува вашего магазина WooCommerce. Одной из самых больших проблем для любого сайта электронной коммерции является трафик. Интернет
Джона Мюллера из Google спросили о том, как GoogleBot управляет сканированием, индексацией и ранжиров...
Джона Мюллера из Google спросили о том, как GoogleBot управляет сканированием, индексацией и ранжированием SPA, одностраничных приложений в Интернете. Джон сказал на
SEM (поисковый маркетинг) | Что это такое и почему это важно? | Платный поиск
... lting.dk/digital-online-marketing/"> Важная часть онлайн-маркетинга так как это хороший способ привлечь покупательский трафик на ваш сайт или в интернет-магазин. Как уже упоминалось, SEM (Платный поиск) охватывает весь платный маркетинг в поисковых системах, который в Дании обычно будет Google, затем они сидят на 95% датского рынка поисковых систем , Вы также можете покупать трафик
Что такое локальный SEO и зачем он нам нужен?
SEO меняется, меняется поиск людей и даже взгляды пользователей значительно изменились за последние годы. Тем из нас, кто посвящает себя этому или тем, кто хочет максимально использовать наш веб-сайт или компанию в интернет-секторе, мы всегда должны обновляться. В вопросах SEO это обновление может прийти, чтобы оптимизировать наш сайт с местным SEO . Это то, что мы сделаем в нашей статье сегодня, так как это позволит нам
Базового SEO не существует
... это кусок выдумки или недобросовестности. В любом случае, он просто не существует. Что было основным SEO, на который он ссылался Наполовину заинтригованный вопросом о таком SEO Basic , я попросил его объяснить, кем он был в конце концов, и он ответил, что цель состояла в том, чтобы быстро оптимизировать страницы виртуальных магазинов клиентов. Это не работает таким образом. Процесс оптимизации сайта состоит из набора методов, которые
SEO: что такое поисковая оптимизация
С ростом Google и других поисковых систем, практика SEO стал очень популярным среди компаний. В этой теме мы рассмотрим ваше значение для вашей компании. В настоящее время одним из самых больших желаний
Что такое цепи перенаправления? Как они влияют на SEO?
Этот пост является первым из двух частей серии о цепях перенаправления. В первой части будет рассказано о том, что такое цепочки перенаправления и какое значение они имеют для SEO. Вторая часть покажет вам, как их найти. Что такое цепь перенаправления? Цепочка перенаправления возникает, когда существует более одного перенаправления между начальным URL и целевым URL. Когда URL-адрес перенаправлен, он должен иметь одно перенаправление 301. Большинство

Комментарии

И если вы регулярно пишете блоги, вы бы не хотели, чтобы ваши читатели и подписчики теряли интерес, потому что ваш сайт / блог не подходит для мобильных устройств, не так ли?
И если вы регулярно пишете блоги, вы бы не хотели, чтобы ваши читатели и подписчики теряли интерес, потому что ваш сайт / блог не подходит для мобильных устройств, не так ли? Итак, действуй сейчас! Кнопки социальных сетей Кнопки «Поделиться» в социальных сетях помогают читателям легко делиться своими публикациями в своих профилях в социальных сетях. Для этого вам нужно установить плагин, который будет включать кнопки социальных сетей. Вы можете свободно выбирать платформы социальных
Также рассматривается вопрос о том, добавляются ли новые темы, участвует ли много людей и являются ли разговоры углубленными?
Также рассматривается вопрос о том, добавляются ли новые темы, участвует ли много людей и являются ли разговоры углубленными? В то время как многие из нас считают сайты вопросов и ответов низкокачественными с дрянным контентом, есть некоторые жемчужины, поэтому Google предупреждает, что не все сайты вопросов и ответов имеют низкое качество. Q & A без ответа Мы все оказались на странице вопросов и ответов только для того, чтобы узнать, что еще
Так, что это делает и почему я должен купить это?
Так, что это делает и почему я должен купить это? Он улучшит усовершенствования OpenGraph и Twitter Card, которые вам понравились благодаря плагину SEO, что позволит вам регистрироваться для получения карточек продуктов в Twitter. Он позаботится о том, чтобы материал, который не входит в карту сайта XML, не входил в карту сайта XML, и материал, который должен быть там, действительно входил в него. Это позволяет вам использовать настраиваемые панировочные сухари
Это имеет смысл, мы все знали, что не так ли?
Это имеет смысл, мы все знали, что не так ли? Еще раз он предложил соответствующую рекомендацию. Страница была исключена атрибутом nofollow. Ааааааааааааааааааааааааааааааааааааааааоаооооооооооооооооооооожняет мне » Приветствия для этого. Все еще идет сильный. Основное внимание уделяется категориям нарушений; SEO содержание Спектакль стандарты Этот IIS SEO Toolkit на самом деле делает аудит
Это как чтение мыслей, не так ли?
Это как чтение мыслей, не так ли? RankBrain Согласно Google, RankBrain является одним из самые мощные ранжирующие сигналы в алгоритме поиска. Это система искусственного интеллекта с машинным обучением, которая
Теперь, когда вы поняли, вы, должно быть, поняли, почему ваш фрагмент так важен, не так ли?
Теперь, когда вы поняли, вы, должно быть, поняли, почему ваш фрагмент так важен, не так ли? Фрагмент важен, потому что пропорция кликов по результату может помочь (и многое) странице лучше позиционироваться. Если вы хотите смоделировать и создать свой сниппет, вы можете сделать это в плагине Yoast SEO для WordPress. Если вы не используете Yoast, есть бесплатный инструмент под названием SERP Preview Tool
Но это означает, что вам нужно ПОНИМАТЬ то, что вы собираетесь сказать - потому что, если вы не понимаете себя, как кто-то еще поймет вас?
Но это означает, что вам нужно ПОНИМАТЬ то, что вы собираетесь сказать - потому что, если вы не понимаете себя, как кто-то еще поймет вас? Это ОСОБЕННО важно, если вы пишете все, что использует технический жаргон любого рода, потому что эксперт будет знать, что у вас НЕТ ИДЕИ, о которой вы говорили. Следствие? Вы потеряете клиента, если будете фрилансом, и потеряете потенциальных клиентов / посетителей, если будете писать для своего сайта! Что
Gt; добавить, ваша, домашняя страница, ключевые слова, что, вы, хотите, здесь, как и так <?
gt; добавить, ваша, домашняя страница, ключевые слова, что, вы, хотите, здесь, как и так <? php} echo "$ tags4meta"; } [/ PHP] Этот второй фрагмент кода будет генерировать пользовательский фрагмент, который мы можем контролировать длину, в настоящее время я использую это для моего WordPress показанный пост-слайдер на моей домашней странице, а также для мета-описания моего поста. Я
Это то, что они хотят, или это то, что вы хотите?
Это то, что они хотят, или это то, что вы хотите? Анализ данных работает совместно с творческими элементами, чтобы помочь практикующему специалисту в навигации по процессу принятия решений. Маркетинг роста и SEO как профессия не могут и не должны быть масштабируемыми, поскольку они не могут применяться в целом. Существуют универсальные концепции и методы тестирования, которые можно применять к большинству сайтов, но каждый случай уникален. Например, запуск аудита инструментов разработчика
И это наш интерес, не так ли?
И это наш интерес, не так ли? Теперь давайте посмотрим на первое из доступных и лучших сервисов проверки ключевых слов (прямо на наших глазах): сама поисковая система Google! 1. Инструменты Google для веб-мастеров - Сервис проверки ключевых слов Если вы опытный веб-мастер и умеете читать между строк, вы поймете, о чем я говорю. Для этого достаточно войти в свою учетную запись Google Webmaster, и вы сразу сможете увидеть свой поисковый трафик и поисковые
Они могут сказать вам, что читают много отраслевых блогов и смотрят видео от Google, но что это на самом деле говорит вам?
Они могут сказать вам, что читают много отраслевых блогов и смотрят видео от Google, но что это на самом деле говорит вам? Но этот вопрос все еще чрезвычайно важен, потому что он дает вам возможность оценить три вещи: Знает ли агентство конкретные имена и сроки важных изменений Google в поиске? Могут ли они объяснить, как эти изменения повлияли на способ SEO? Могут ли они объяснить все это на простом английском языке? Если агентство

Зачем?
Почему это так?
Должен ли второй заголовок быть подзаголовком в той же теме (<h3>) или представлять собой совершенно новую тему (<h2>, как у нас было в первую очередь)?
Это может быть правильно?
Вопрос в том, к какому заголовку относится нижний колонтитул?
Чей это нижний колонтитул?
Сколько разделов вы считаете?
Lt;адрес>?
Почему это предпочтительнее?