что такое семантическая верстка

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа

Ну и представьте, насколько проще читать вместо

Основные семантические теги HTML

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег

, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Значение: побочный, косвенный для страницы контент.

Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.

Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.

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

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

Особенности: этих элементов может быть несколько на странице.

Типовые ошибки: использовать только как шапку сайта.

Значение: основное, не повторяющееся на других страницах, содержание страницы.

Особенности: должен быть один на странице, исходя из определения.

Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

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

Особенности: этих элементов может быть несколько на странице. Тег не обязан находиться в конце раздела.

Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

Заголовок всего документа и заголовки смысловых разделов. Теги:

Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.

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

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

Получилось найти самый подходящий смысловой тег — использовать его.

Для потоковых контейнеров —

Можете дать имя разделу и вынести этот раздел на другой сайт? —

Можете дать имя разделу, но вынести на другой сайт не можете? —

Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —

Как точно не нужно делать

Не используйте семантические теги для украшательств. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

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

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

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и курсах HTML Academy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена станет ещё приятнее.

Источник

Семантический HTML — Основы современной вёрстки

При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

Основная цель любой HTML-вёрстки — передача смысла блоков. Часто, помимо пользователей, по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы. К примеру, поисковые роботы просматривают всю страницу и определяют её полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу вёрстку и не может «глазами» отделить части макета.

Вторая важная причина необходимости создания семантической вёрстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».

Запомните: минимальная доступность лучше, чем её отсутствие.

Для решения этих вопросов в стандарте HTML5 появилось множество семантических тегов, которыми вы можете пользоваться. В этом уроке изучим базовые семантические теги и разметим целую HTML-страницу.

Шапка сайта

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

Чтобы создать шапку сайта, используется парный тег header, внутри которого мы и располагаем необходимую информацию.

Один из примеров шапки сайта:

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

Навигация

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

Если вы ещё не сверстали пару своих макетов, то по такому набору можете и не понять, что набор ссылок не что иное, как основное меню сайта. Вот и роботам не всегда просто это сделать. Конечно, они уже достаточно обучены, чтобы в таком простом наборе найти меню, но меню обычно может быть не одно и быть контекстно-зависимым. Тогда робот может принять за основное меню не то, что бы мы хотели.

Как же нам ему помочь? Для этого в стандарте HTML5 появился тег nav. Он обозначает навигационную область. Причём помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдёт ниже.

Заменим простой блочный элемент div на его семантичного брата nav:

Главной особенностью использования nav является то, что не обязательно оборачивать все меню на странице. Обычно достаточно обернуть только главное меню и, например, не оборачивать меню в футере. При этом не запрещается иметь сразу несколько элементов nav на странице. Выделяйте ими главные меню на странице.

Уникальный контент

Основной смысл каждой страницы — уникальный контент. Это самое главное, что должно быть на вашей странице. Пользователь вполне справится без меню или футера, но если на странице нет своего уникального контента, то страница бесполезна.

Для разметки уникального контента в стандарте HTML5 появился специальный тег main. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Добавим такую область в нашу вёрстку:

Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.

Так как внутри main содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.

Секции

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

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

Заметьте, как легко стало искать преимущества в коде, ведь они находятся в отдельной секции. Также вы могли обратить внимание на заголовок внутри секции. Так как секция — это самостоятельная единица, то почти всегда она имеет свой заголовок. Хоть это и не всегда так, и стандарт не обязывает нас включать заголовок в секцию, но старайтесь придерживаться этого правила.

Как быстро определить, стоит ли включать участок контента в отдельную секцию? Всё очень просто: если вы можете описать участок контента в одном или двух словах (преимущества, цены, форма заказа, каталог, контакты и так далее), то с большой вероятностью этот участок является самостоятельной секцией.

Независимые секции

Другим способом выделить логический участок текста является использование тега article. Может показаться, что какой смысл иметь два различных тега для выделения одного и того же?

Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.

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

Дополняющие секции

Ещё одним крупным контейнером для нашего контента служит тег aside. Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень. Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.

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

Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в nav, так как оно не является основным.

Самостоятельная работа

Создайте файл index.html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

Об обучении на Хекслете

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

Наши выпускники работают в компаниях:

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Источник

HTMHeaven — 19 советов и приёмов вёрстки

Представляю вашему вниманию перевод заметок с сайта HTMHell (раздела Heaven) — коллекции полезных советов и примеров HTML-кода

Ранее была опубликована коллекция заметок с плохими примерами кода с того же ресурса в статье HTMHell — адовая разметка (25 плохих примеров)

Темы статьи:

0. Ссылки — атрибут download

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

Значение атрибута задаёт название файла при скачивании

1. Доступность элементов iframe

2. Gif-анимации и «reduce-motion»

Gif-анимации следует отображать только в том случае, если пользователь не предпочитает обратного. В случае, если данная настройка активирована, следует с помощью тега

и опции prefers-reduced-motion вместо анимации подставлять картинку.

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

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

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

В итоге, в зависимости от предпочтений, пользователь должен увидеть либо jpg-картинку, либо gif-анимацию

Настройка анимирования в разных ОС:

3. Метатеги с описанием страницы

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

Общее

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

Убедитесь, что описание краткое и информативное

Напишите уникальное описание для каждой страницы и попытайтесь вставить уникальные ключевые слова

Длина описания должна быть от 50 до 155 символов (после этого Google обрезает текст в результатах поисковой выдачи)

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

Соцсети

Данные парсеры позволяют проверить, как описания вашей страницы будут выглядеть в разных соцсетях:

В моём случае все они работали корректно, но в обсуждении в Twitter Kilian Valkhof отметил, что официальные парсеры устарели, так что результат стоит перепроверять

4. Текущая страница в панели навигации

Вот небольшая демонстрация в TalkBack на Android (Внимание! Громкость записи звука достаточно большая. Извините)

5. Автозаполнение полей с паролями

Давайте начнём с того самого «кое-чего ещё». Когда я готовил пример для данной публикации, я хотел продемонстрировать, что с атрибутом autocomplete=»new-password» браузер предложит сгенерировать пароль.

Браузер Firefox распознаёт это поле как поле для ввода нового пароля и предлагает сгенерировать его

Для начала я создал простую форму.

Если, например, перевести подписи на немецкий, Firefox больше не предлагает подставить пароль. Мне понадобилось всего лишь 2 часа, чтобы понять это.

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

Используйте правильный атрибут type для каждого поля ввода

Убедитесь, что значения атрибутов id и name не генерируются произвольно

Для атрибутов name и id задавайте значения, являющиеся одинаковыми или похожими на значение атрибута autocomplete

Добавьте атрибут autocomplete и используйте значение current-password для поля с текущим паролем и значение new-password для поля с новым паролем

В формах «регистрации» и «авторизации/входа» используйте разные значения для атрибутов name и id как у самого элемента формы, так и у элементов input, select, textarea

Тщательно тестируйте в браузерах с разными менеджерами паролей

6. Структура заголовков страницы

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

Правильная структура заголовков важна по нескольким причинам:

Заголовки формируют структуру документа, которую могут учитывать сторонние инструменты. При проверке страницы в валидаторе в блоке «More options» можно выбрать опцию «Show outline», чтобы проверить и отобразить структуру заголовков проверяемой страницы.

Заголовки отражают организацию содержимого страницы. Заголовок

сообщает пользователям, о чём эта страница. Заголовок

разделяет страницу на большие разделы,

ещё больше структурируют эти большие разделы.

Правильное использование заголовков помогает поисковым движкам понимать, о чём ваша страница и как она структурирована.

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

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

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

). Также обычно присутствует несколько основных глав (

), а иногда есть и подглавы (

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

7. Формат изображений AVIF

AVIF — это достаточно новый формат изображений и для меня это одно из самых захватывающих из недавних нововведений в сфере веб-разработки. Почему? На одном из вебсайтов, который я недавно разрабатывал, была возможность сократить размер изображений с 1.72МБ до 172КБ просто сконвертировав их в формат AVIF.

Звучит слишком хорошо, чтобы быть правдой, поэтому давайте начнём с плохой новости: немногочисленными браузерами, поддерживающими данный формат, являются Chrome, Chrome for Android, Opera, Opera Mobile и Samsung Internet. Firefox поддерживает за флагом (на момент перевода — уже по умолчанию).



Прогрессивное улучшение

Хорошая новость заключается в том, что мы можем использовать встроенный механизм прогрессивного улучшения HTML, чтобы обеспечить фолбэк для тех, чей браузер ещё не поддерживает формат AVIF.

Расположенный выше скриншот имеет следующую разметку (на сайте оригинала статьи):

Браузерная поддержка WebP

Вы даже можете полностью отказаться от варианта с JPG-изображением, потому что в наши дни формат WebP уже довольно хорошо поддерживается всеми современными браузерами, включая Safari.



Сравнение размера изображений

Я сделал скриншот сайта HTMHell, сжал его с помощью OxiPNG и сконвертировал в форматы WebP и AVIF.

Существует несколько инструментов сжатия, работающих с AVIF. Я точно могу рекомендовать приложение Squoosh.

8. Элемент «section»

Используйте элемент для разметки набора логически связанного контента, обычно имеющего заголовок.

Выдержка из кода страницы gov.uk

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

Неявный регион и открытая роль

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

DIV или SECTION

Элемент не является заменой для

В HTML-спецификации есть полезное практическое правило:

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

Ориентир «region»

Структура документа

Если на странице содержится несколько заголовков

Заключение

9. Составление адреса в «mailto:»

При нажатии на ссылку, содержащую email-адрес, можно предварительно заполнять поля заголовка и тела создаваемого сообщения.

При нажатии на составленную таким образом ссылку, стандартный email-браузер должен открыть окно с новым email-сообщением, содержащим тему «HTMHell issue 9 was fantastic» и сообщение «Thanks, Manuel».

При создании ссылки на email-адрес вы можете предоставить тему, получателя и тело сообщения. Делается это путём написания email-адреса, за которым следует символ «?», название заголовка, символ «=», и значение заголовка.

Получатели

При создании таких ссылок есть возможность не указывать ни одного адреса, указать только один или несколько адресов

mailto: без значения

mailto: с одним адресом

Добавит в поле «Кому» указанный адрес

mailto: с несколькими адресами

Если адресов несколько, их необходимо разделить запятой без пробелов

mailto + параметр «to»

Задать нескольких получателей также можно с помощью параметра to

mailto + параметр «cc»

Поля «Кому» (To) и «Копия» (Cc) заполнятся разными адресами

mailto + параметр «bcc»

Поля «Кому» и «Скрытая копия» заполнятся разными адресами

Тело сообщения

Определить тело сообщения можно с помощью параметра body

Специальные символы, переносы строк и пробелы должны быть закодированы

В тело сообщения нельзя добавлять HTML, только простой текст

Дополнительные уточнения

Пробелы должны быть закодированы как %20

Переносы строк должны быть закодированы как %0D%0A

10. Последовательность упорядоченных списков

Упорядоченные списки

8.Curly Sue (1991)
7. Uncle Buck (1989)
6. She’s Having a Baby (1988)
5. Planes, Trains & Automobiles (1987)
4. Ferris Bueller’s Day Off (1986)
3. Weird Science (1985)
2. The Breakfast Club (1985)
1. Sixteen Candles (1984)

При использовании атрибута reversed порядок элементов списка остаётся прежним, меняется только нумерация от большего к меньшему.

Можно комбинировать атрибуты reversed и start для изменения числа, с которого начинается отсчёт.

Неупорядоченные списки

На неупорядоченные списки (

) данный атрибут не влияет, даже если с помощью атрибута попытаться изменить тип списка

11. Таблицы стилей для печати (print)

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

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

Да, я знаю, сейчас 2021 год, но у людей по-прежнему есть принтеры и они всё ещё время от времени что-то распечатывают. Печатная версия страниц не должна быть идеальной, но мы должны быть уверены, что главное содержимое страницы хотя бы доступно пользователю после печати на бумаге. Мы можем сделать это, предоставив соответствующие стили и включив их в HTML.

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

Отладка стилей для печати

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

Firefox

В панели разработчика браузера в блоке «Rules» есть специальная кнопка с иконкой, похожей на документ или распечатанную страницу.



Chrome/Edge

В панели разработчика браузеров Chrome/Edge можно нажать на кнопку с тремя точками, перейти в «More tools», далее «Rendering» и наконец в разделе «Emulate CSS media type» выбрать «print».



Safari

На панели инструментов браузера в разделе «Elements» есть кнопка с иконкой в виде принтера.



12. Зачёркнутый текст

Элемент

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



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



Данный фрагмент кода без описательного текста скринридеры могут озвучить как «19 евро точка 99 9 евро точка 99», что может запутать пользователя.

Если нужно отобразить только цену, описательный текст можно скрыть визуально

Данная разметка будет и корректно озвучиваться скринридерами и корректно отображаться визуально



Steve Faulkner и Adrian Roselli представили способы использования псевдоэлементов, чтобы сделать элемент доступным в статьях Short note on making your mark (more accessible) и Tweaking Text Level Styles.

Элемент del



Talkback в операционной системе Android озвучит предложение как «The nose flute is the mots deletion most insertion beautiful instrument in the world«, но VoiceOver и другие скринридеры озвучат как «The nose flute is the mots most beautiful instrument in the world«. Чтобы заставить скринридеры озвучивать факт редактирования, Адриан и Стив рекомендуют использовать псевдоэлементы.

С использованием этой техники VoiceOver озвучит «The nose flute is the deletion start mots deletion end insertion start most insertion end beautiful instrument in the world«.

13. Семантическая вёрстка: ol или ul или div

Разница между использованием

,
и

Недавно в Twitter кто-то спросил: «Действительно ли семантический HTML так полезен?». Это хороший вопрос, поскольку немало людей знают, КАК писать HTML, но не знают, ПОЧЕМУ. В данной статье я постараюсь объяснить, в чём польза семантического HTML. Начнём с элементов

и
.

Скринридеры могут озвучить их как список элементов

Скринридеры могут озвучить количество элементов в списке

Скринридеры могут озвучить номер каждого элемента

Пользователи скринридеров могут с помощью сочетания клавиш быстро переходить от списка к списку элементов страницы

Данные элементы группируют содержимое визуально

Данные элементы предоставляют селектор для стилизации (не)упорядоченных списков в CSS

Неупорядоченные списки

Элемент неупорядоченного списка

мы используем для группировки некоторого количества логически связанных элементов, перечисленных в произвольном порядке.

NVDA в браузере Firefox озвучит данную разметку следующим образом: «List with 3 items, Bullet Jay and Silent Bob Strike Back, Bullet Mallrats, Bullet Clerks, Out of list»

Упорядоченные списки

Элемент упорядоченного списка

мы используем для группировки некоторого количества логически связанных элементов, перечисленных в определённом порядке.

NVDA в браузере Firefox озвучит данную разметку следующим образом: «List with 3 items, 1 Clerks, 2 Mallrats, 3 Jay and Silent Bob Strike Back, Out of list»

Элементы DIV

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

NVDA в браузере Firefox озвучит данную разметку следующим образом: «Clerks, Mallrats, Jay and Silent Bob Strike Back»

14. Автоматические заглавные буквы

Существует возможность управлять тем, как виртуальные клавиатуры используют заглавные буквы при написании слов и символов.



Данный атрибут поддерживается браузером Safari на iOS и браузерами Chrome, Edge и Samsung Internet на Android. Firefox поддерживает его только за флагом. Также нужно уточнить, что он никак не влияет на ввод с помощью физической клавиатуры.

Помимо none есть ещё три значения:

none — переключение на ввод заглавных букв должно быть отключено

characters — все буквы должны быть заглавными

sentences — первая буква каждого предложения по умолчанию заглавная; все остальные буквы вводятся строчными

words — первая буква каждого слова должна быть заглавной; все остальные буквы вводятся строчными

15. Проверка орфографии

Если, например, в браузере Firefox нажать на одно из полей приведённой выше разметки, вы увидите волнистую красную линию, указывающую на неправильное написание. Обратите внимание, что в зависимости от браузера и выбранного языка поведение может отличаться. Факт присутствия атрибута является больше подсказкой и не принуждает браузера выполнять проверку.

А в этом поле подчёркивания быть не должно, поскольку атрибут spellcheck установлен в значение false

16. Доступные ориентиры

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

Ориентиры в HTML

Элемент

ARIA-роль

Условия

Источник

• ← Омез простыми словами для чего
• как узнать какой размер джинс у меня →