Когда в последний раз мы получили новый элемент? HTML5 представил всего девять новых структурных тегов, и они были стабильны в течение нескольких лет: section , article , в aside , hgroup , header , footer , nav , figure и figcaption . Есть еще около 20 элементов контента, включая video , audio , canvas , progress и т. Д.
Сегодня у нас есть новый структурный элемент для изучения: <main> Согласно последней спецификации W3C :
Основной элемент представляет основное содержание тела документа или приложения. Основная область содержимого состоит из содержимого, которое напрямую связано с центральной темой документа или основными функциями приложения или расширяет их.
Авторы не должны включать в документ более одного основного элемента.
Авторы не должны включать основной элемент как дочерний элемент статьи, aside, footer, header или nav.
main помечает содержательный контент на вашей странице, то есть цель ссылки «перейти к» . Вы, вероятно, будете использовать main там, где у вас была оболочка контента; он заменит такие теги, как <div id="main"> , <div id="page"> или <div id="wrapper"> . Если вы используете ARIA, вы бы использовали его для элемента, где определен role="main" …
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Using main</title> </head> <body> <header>My page</header> <nav> <a href="#">Home</a> </nav> <main> <article> <h1>My article</h1> <p>Content</p> </article> <aside> <p>More information</p> </aside> </main> <footer>Copyright 2013</footer> </body> </html>в<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Using main</title> </head> <body> <header>My page</header> <nav> <a href="#">Home</a> </nav> <main> <article> <h1>My article</h1> <p>Content</p> </article> <aside> <p>More information</p> </aside> </main> <footer>Copyright 2013</footer> </body> </html>в<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Using main</title> </head> <body> <header>My page</header> <nav> <a href="#">Home</a> </nav> <main> <article> <h1>My article</h1> <p>Content</p> </article> <aside> <p>More information</p> </aside> </main> <footer>Copyright 2013</footer> </body> </html>
Поддержка браузера
Хотя main является новым, большинство браузеров поддерживают нераспознанные теги. Тем не менее, вам нужно будет применить стиль блока в вашем CSS, т.е.
main { display: block }
Это может стать ненужным по мере развития браузеров ( main поддерживается в ночных сборках Chrome и Firefox), но удерживать его мало вредно.
Элемент также был добавлен в html5shiv, поэтому он будет работать в IE6, 7 и 8. Возможно, вам потребуется загрузить новую версию, если вы используете локально размещенный файл.
Можете ли вы использовать <main> сегодня?
Элемент был на удивление спорным. Утверждалось, что это не нужно, и на страницах должно быть разрешено более одного main тега. Но это здесь, чтобы остаться, и я думаю, что это будет полезно. Просто убедитесь, что вы тщательно протестировали свой новый сайт, прежде чем начать работу!
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о HTML5? Почему бы не спросить об этом на наших форумах ?