1. 6. Часто используемые теги и типовые ошибки
Структурные:
<article>
Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами
<section>и<div>.
<section>
Значение: смысловой раздел документа. Неотделяемый, в отличие от
<article>.Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами
<article>и<div>.
<aside>
Значение: побочный, косвенный для страницы контент.
Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
Типовые ошибки: считать
<aside>тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.
<nav>
Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в
<nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен<footer>сам по себе.Типовые ошибки: многие считают, что в
<nav>может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.
<h1>…<h6>
Значение: заголовки смысловых разделов.
Особенности: желательно один
<h1>на странице. Нежелательны пропуски в уровнях заголовков на странице. Внутри<article>заголовки можно начинать с<h1>. На макетах главных страниц не всегда рисуют заголовок первого уровня.Типовые ошибки: Определение уровня заголовка по размеру текста на макете. Не весь крупный текст — заголовки. Использование несемантичного выделения вместо заголовка, например, тегов
<b>,<strong>или<span>.
<header>
Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице.
Типовые ошибки: использовать только как шапку сайта.
<main>
Значение: основное, не повторяющееся на других страницах, содержание страницы.
Особенности: должен быть один на странице, исходя из определения.
Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).
<footer>
Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице. Тег
<footer>не обязан находиться в конце раздела.Типовые ошибки: использовать только как подвал сайта.
<ul> и <ol>
Значение: неупорядоченный и упорядоченный списки.
Особенности: если существует набор однородных элементов, порядок которых не важен (пункты меню), то используем
<ul>. Если порядок элементов важен (топ популярных товаров, последовательные шаги в рецепте), то используем<ol>.Типовые ошибки: объединять в список неоднородные элементы. Использовать что-то, кроме
<li>, в качестве дочерних элементов списка. Неправильная разметка вложенных списков.
<p>
Значение: параграф (как структурный элемент, а не как смысловой).
Типовые ошибки: использовать внутри параграфов не фразовые элементы, например списки.
<table>
Значение: многомерные связанные данные (табличные данные).
Особенности: простейший, двумерный, вид связанных данных — «параметр-значение». Его можно описать как таблицей, так и списком определений (тег
<dl>). Когда измерений больше (параметр-значение1-значение2-…), подходят только таблицы. Пример: тарифы сотового оператора, расписание поездов.Типовые ошибки: использовать таблицы для сеток (так уже не делают). Не использовать таблицы там, где они нужны.
<div>
Значение: универсальный контейнер без собственного значения.
Особенности: смысл этому элементу придаётся с помощью атрибута
class.Типовые ошибки: «диватоз» — когда в разметке используются только дивы.
Правило для определения <article>, <section> и <div>:
Можете дать имя разделу и вынести этот раздел на другой сайт? —
<article>Можете дать имя разделу, но вынести на другой сайт не можете? —
<section>Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —
<div>
Фразовые:
<img>
Значение: контентное изображение.
Особенности: есть обязательные атрибуты (
src). Хороший тон — задавать атрибутalt, который описывает содержание картинки.Типовые ошибки: Использовать контентные изображения вместо фоновых. Использовать фоновые изображения вместо контентных.
<a>
Значение: ссылка.
Особенности: если атрибута
hrefнет, то это заглушка («здесь будет ссылка при других обстоятельствах»). Ссылка безhrefиспользуется, чтобы не делать ссылку на саму себя.Типовые ошибки: использовать вместо ссылок другие элементы, например кнопки.
<button>
Значение: кнопка.
Особенности: Лучше явно указывать атрибут
type. Его значение по умолчанию —submit, но часто нужно значениеbutton. Кнопка не обязательно должна находиться в пределах формы. Часто это просто интерактивный элемент, который «оживляется» с помощью JavaScript. Например, кнопка закрытия всплывающего окна.Типовые ошибки: использовать вместо кнопок другие элементы, например ссылки или спаны.
<strong>, <em>, <b> и <i>
Значение: различное выделение текста.
Типовые ошибки: слишком частое неуместное использование.
<i> — дополнительное выделение (иностранные слова, термины) или просто курсив.
<b> — стилистическое усиление текста (ключевые слова) или просто жирное начертание.
<em> — эмоциональное выделение, слово или фраза, произнесённые иначе.
<strong> — высокая важность.
<br>
Значение: перенос строки.
Типовые ошибки: слишком частое использование. Использование вместо параграфов или отступов.
<span>
Значение: универсальный фразовый элемент без собственного значения.
Особенности: смысл этому элементу придаётся с помощью атрибута
class.
<time>
Значение: элемент предназначен для представления дат и времени в машиночитаемом формате. Например, это облегчает приложениям добавление событий в календарь пользователя.
Особенности: элемент поддерживает атрибут
datetime. Этот атрибут определяет время и дату, а также он должен быть допустимой датой с возможным дополнительным указанием времени. Если значение элемента не может быть распознано как дата с возможным дополнительным указанием времени, элементу не будет сопоставлен временной срез. Пример:
Last updated