HTML5 является последней и самой лучшей версией наиболее распространенного языка разметки в Интернете. В последней версии языка есть некоторые большие изменения, и, если вы их не используете, вы упускаете действительно классную функциональность.
Я не буду рассказывать о каждом новом элементе в пятой версии HTML, но эти девять являются одними из самых важных.
Введение в семантические элементы
Как и в большинстве интернета, HTML5 переключился на семантику. Теперь теги, которые раньше использовались просто для форматирования, также используются, чтобы сообщать браузеру и поисковым системам о том, что они окружают.
Например, <p> просто сообщает браузеру, что содержит абзац. <article>, который мы обсудим ниже, сообщает браузеру, что он содержит основное содержимое страницы.
Семантическая сеть все еще развивается, и мы только начали изучать поверхность того, что она может сделать. HTML5 помогает принести семантическую разметку в гораздо большей части Интернета, и это может быть полезно для будущего семантической обработки.
1. <article> (Статья)
Тег <article> определяет «независимый, автономный контент». Самый простой пример — это, конечно, статья. В этой статье мы открываем тег перед введением и закрываем его после завершения.
Но есть и другие способы его использования. Например, многие кулинарные блоги включают личные истории о том, как появился рецепт или почему это важно для писателя. Затем следует рецепт. Вы можете сделать аргумент, что каждый из этих элементов может стоять в одиночестве.
На форуме каждый пост или тред можно считать автономным, и каждый из них может быть помечен его собственным тегом <article>. По большей части он будет использоваться в основном содержимом страницы. Но имейте в виду, что вы можете использовать его более творчески.
2. <section> (Раздел)
<section> тесно связан с <article>. Это определяет «тематическую группировку контента, как правило, с заголовком. Таким образом, <section> будет внутри <article> … правильно?
Не обязательно. W3 указывает, что это зависит от структуры вашего сайта. У вас может быть автономный контент в разных разделах вашей страницы (например, на первой странице новостного сайта). Тогда у вас могут быть разделы в этой статье.
Вы можете даже иметь разделы в разделах, если они соответствуют вашей странице. Помните, что раздел — это просто «тематическая группировка контента», и вы найдете множество мест для его использования.
3. <header> (Заголовок)
Этот элемент «должен использоваться как контейнер для вводного контента. Короче говоря, это часть вашей страницы, которая помогает людям понять, что они собираются читать.
Но не обманывайте себя — вы можете использовать этот контейнер более одного раза. Например, вы можете использовать его для определения названия страницы и вводного абзаца вашего сообщения в блоге. Но вы также можете использовать его, чтобы отметить вводный контент для каждого раздела.
Разделы обычно содержат по крайней мере один тег заголовка — H1, H2 и т. д. Это не обязательно, но если вы используете тег <header> хуже не станет.
4. <footer> (Нижний колонтитул)
W3 говорит, что теги нижнего колонтитула обычно содержат «автора документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. д.». Вы можете думать о нем как о «домашнем» материале.
В документации также указано, что на вашей странице может быть более одного нижнего колонтитула. Но, по-моему, всю эту информацию лучше держать в одном месте.
5. <nav> (Навигация)
Этот тег содержит ссылки навигации для данной страницы. Обратите внимание, что только этот раздел содержит этот тег, а не все ссылки на вашей странице. Это для навигационных баров и аналогичных инструментов.
<a href=»//remontka.com/about»> Обо мне </a> </nav>
