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

HTML-5

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

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


Дополнительные ссылки:

  • validator.w3.org — Проверка кода на валидность.
  • web-standards.ru — Полезная информация о семантике.
  • front-end.su — Полезная информация о семантике.
Адаптивная, SEO подготовленная WordPress тема
Артём/ автор статьи
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: