Пояснения по валидности HTML разметки

Некоторые пояснения по валидности HTML разметки.

Оглавление

1. Какой тег использовать для кнопок?
2. Оборачивать ли главное меню в тег <nav>?
3. Что именно оборачивать в тег <header>?
4. Нужен ли заголовок внутри контейнера <footer>, чтобы вёрстка считалась валидной?
5. Сколько заголовков <h> может быть внутри <section>?
6. Я вижу текстовый блок в макете, состоящий из одной-двух-трёх строк. Каким тегом мне его сверстать?
7. Использовать ли в вёрстке тег <hgroup>?
8. Где можно использовать тег<main>?
9. Какой разделитель использовать в наименовании классов и айди: «минус» или «нижнее подчёркивание»?
10. Если при вёрстке макета имеется повторяющийся элемент на странице, то лучше использовать <ul> или обычные контейнеры <div>?
11. Когда использовать тег <section>, а когда <article> ?
12. Тег<section>может быть внутри<article>и наоборот?
13. Тегом <p>можно верстать не только параграфы?
Дополнительные ссылки:

1. Какой тег использовать для кнопок?

Для обычных ссылок целесообразнее использовать тег <a>. Для кнопок, функционал которых определяет скриптами JavaScript, можно использовать теги <a>, <button>, <div>, <span> и др.

2. Оборачивать ли главное меню в тег <nav>?

Да, оборачивать, получая структуру: nav > ul > li

3. Что именно оборачивать в тег <header>?

Нужно оборачивать весь первый экран сайта, лендинга. Внутри <header> могут находиться заголовки, параграфы, меню и прочее.

Нет, не обязателен.

5. Сколько заголовков <h> может быть внутри <section>?

Спецификация точно не описывает разрешенное количество заголовков внутри секции. Это тот момент, когда вы можете свободно использовать для заголовка, как теги <h>, так и обычные <div> (или <p>).

Многие разработчики описывают менее значимые заголовки на странице обычными <div> тегами или <p>. Это также не является ошибкой. Самыми важными являются теги <h1> и <h2>, так как именно они имеют наибольший вес для SEO.

6. Я вижу текстовый блок в макете, состоящий из одной-двух-трёх строк. Каким тегом мне его сверстать?

Можно использовать теги <p>, <div> , <h> (если блок можно квалифицировать как заголовок).

7. Использовать ли в вёрстке тег <hgroup>?

Нет, данный тег был упразднён.:)

8. Где можно использовать тег<main>?

Данный тег можно использовать для обозначения главного контента на странице. Не должен содержать в себе тегов <header>, <footer>, <nav>, <aside>, <form>. По причине того, что в большинстве современных сайтов, по сути, весь контент страницы является главным, кроме шапки и футера, он используется редко. Вёрстка без тега <main> также считается валидной.

9. Какой разделитель использовать в наименовании классов и айди: «минус» или «нижнее подчёркивание»?

Зависит полностью от предпочтений разработчика. Подойдя к разбору методологии БЭМ мы увидим некоторые правила общего рекомендательного характера в отношении этого вопроса. Рекомендуется делать классы и айди со знаком «минус»

<div class="class-name">

10. Если при вёрстке макета имеется повторяющийся элемент на странице, то лучше использовать <ul> или обычные контейнеры <div>?

С семантической точки зрения, данный повторяющийся элемент, например как: перечисление преимуществ на странице в виде равных иконок и заголовков, похож больше на список. Однако, валидным считается как вёрстка данного блока с использованием <ul>, так и при помощи <div>.

11. Когда использовать тег <section>, а когда <article> ?

Это одна из больных тем с приходом стандарта HTML5. Тег <section> должен оборачивать семантически единый блок контента.

Может иметь внутри заголовки и неограниченное количество блоков. Тег <article> имеет тоже самое назначение, однако с одной поправкой: его можно вывести за пределы страницы и смысл страницы не пострадает. Секцию <section> можно лишь переместить на любое место внутри страницы (если убрать секцию совсем, предполагается, что страница потеряет смысл).

12. Тег<section> может быть внутри<article>и наоборот?

Да. Тег <section> не обязательно должен оборачивать лишь главные разделы на страницы, как это обычно делается. К примеру, у статьи в блоге может быть основной текст и блок под текстом, в котором есть информация об авторе, дате, кнопки «поделиться». Рационально, оба этих блока (блок основного контента и блок с доп. информацией) оформить в <section> .

13. Тегом <p>можно верстать не только параграфы?

Да, и это не считается семантически неверным и невалидным. Обычно, в <p> , как мы определяли в пункте 6, могут находиться либо параграфы текста, либо немногострочные блоки с текстом. Например, телефон в шапке с небольшой подписью «Звонить с 8 до 22». Кто-то верстает подобные блоки с использованием <p> . Я предпочитаю, к примеру, тег <div>.