Глава 2.4. Часто используемые теги и типовые ошибки

Структурные:

<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>:

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

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

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

Фразовые:

<img>

· Значение: контентное изображение.

· Особенности: есть обязательные атрибуты (src). Хороший тон — задавать атрибут alt, который описывает содержание картинки.

· Типовые ошибки: Использовать контентные изображения вместо фоновых. Использовать фоновые изображения вместо контентных.

<a>

· Значение: ссылка.

· Особенности: если атрибута href нет, то это заглушка («здесь будет ссылка при других обстоятельствах»). Ссылка без href используется, чтобы не делать ссылку на саму себя.

· Типовые ошибки: использовать вместо ссылок другие элементы, например кнопки.

<button>

· Значение: кнопка.

· Особенности: Лучше явно указывать атрибут type. Его значение по умолчанию — submit, но часто нужно значение button. Кнопка не обязательно должна находиться в пределах формы. Часто это просто интерактивный элемент, который «оживляется» с помощью JavaScript. Например, кнопка закрытия всплывающего окна.

· Типовые ошибки: использовать вместо кнопок другие элементы, например ссылки или спаны.

<strong>, <em>, <b> и <i>

· Значение: различное выделение текста.

· Типовые ошибки: слишком частое неуместное использование.

<i> — дополнительное выделение (иностранные слова, термины) или просто курсив.

<b> — стилистическое усиление текста (ключевые слова) или просто жирное начертание.

<em> — эмоциональное выделение, слово или фраза, произнесённые иначе.

<strong> — высокая важность.

<br>

· Значение: перенос строки.

· Типовые ошибки: слишком частое использование. Использование вместо параграфов или отступов.

<span>

· Значение: универсальный фразовый элемент без собственного значения.

· Особенности: смысл этому элементу придаётся с помощью атрибута class.

·

Методика~ 54 минуты