Избегаем популярных ошибок в HTML5
Опубликовано: 27.09.2017
Разбирая сайты для Галереи HTML5 и отвечая на вопросы читателей на сайте Доктор HTML5 , я вынужден просматривать целую кучу страниц на HTML5 и, конечно же, их исходный код. В этой статье я расскажу вам об ошибках и сомнительной разметке, которые мне частенько приходится видеть, и объясню, как их избежать.
Не используйте <section> как обёртку для оформления
Одна из самых распространённых проблем, которую я часто вижу в разметке сайтов — это произвольная замена элементов <div> структурными элементами из HTML5, особенно замена оформительской обёртки на <section>. В XHTML или HTML4 я бы увидел что-нибудь такое:
<!-- Не копируйте этот код! Он неправильный! --> <div id="wrapper"> <div id="header"> <h1>Моя супер-пупер страница</h1> <!-- Содержимое шапки --> </div> <div id="main"> <!-- Содержимое страницы --> </div> <div id="secondary"> <!-- Вторичное содержимое --> </div> <div id="footer"> <!-- Содержимое подвала --> </div> </div>Вместо этого я вижу следующее:
<!-- Не копируйте этот код! Он неправильный! --> <section id="wrapper"> <header> <h1>Моя супер-пупер страница</h1> <!-- Содержимое шапки --> </header> <div id="main"> <!-- Содержимое страницы --> </div> <section id="secondary"> <!-- Вторичное содержимое --> </section> <footer> <!-- Содержимое подвала --> </footer> </section>Честно говоря, это неправильно: <section> — это не обёртка. Элемент <section> определяет смысловую секцию содержимого для создания структуры документа . Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу <body>, как описано у Крока Кеймена . Если же вам всё ещё нужна дополнительная обёртка, используйте <div>. Раз уж Доктор Майк объясняет, что <div> не мёртв , а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.
