HTML5

HTML5 является последней и самой лучшей версией наиболее распространенного языка разметки в Интернете. В последней версии языка есть некоторые большие изменения, и, если вы их не используете, вы упускаете действительно классную функциональность.

Я не буду рассказывать о каждом новом элементе в пятой версии HTML, но эти девять являются одними из самых важных.

 

Введение в семантические элементы

Как и в большинстве интернета, HTML5 переключился на семантику. Теперь теги, которые раньше использовались просто для форматирования, также используются, чтобы сообщать браузеру и поисковым системам о том, что они окружают.

Например, <p> просто сообщает браузеру, что содержит абзац. <article>, который мы обсудим ниже, сообщает браузеру, что он содержит основное содержимое страницы.

Семантическая сеть все еще развивается, и мы только начали изучать поверхность того, что она может сделать. HTML5 помогает принести семантическую разметку в гораздо большей части Интернета, и это может быть полезно для будущего семантической обработки.

 

1. <article> (Статья)

Тег <article> определяет «независимый, автономный контент». Самый простой пример - это, конечно, статья. В этой статье мы открываем тег перед введением и закрываем его после завершения.

<article> Весь текст в вашем автономном разделе. </article>

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

На форуме каждый пост или тред можно считать автономным, и каждый из них может быть помечен его собственным тегом <article>. По большей части он будет использоваться в основном содержимом страницы. Но имейте в виду, что вы можете использовать его более творчески.

 

2. <section> (Раздел)

<section> тесно связан с <article>. Это определяет «тематическую группировку контента, как правило, с заголовком. Таким образом, <section> будет внутри <article> ... правильно?

Не обязательно. W3 указывает, что это зависит от структуры вашего сайта. У вас может быть автономный контент в разных разделах вашей страницы (например, на первой странице новостного сайта). Тогда у вас могут быть разделы в этой статье.

<article> <section> <h2> Почему вам нужен ЦАП </h2> <p> Все звучит лучше. </p> </section> <section> <h2> Как настроить ЦАП </h2> <p> Вот что вам нужно сделать. . . </p> </section>

Вы можете даже иметь разделы в разделах, если они соответствуют вашей странице. Помните, что раздел - это просто «тематическая группировка контента», и вы найдете множество мест для его использования.

 

3. <header> (Заголовок)

Этот элемент «должен использоваться как контейнер для вводного контента. Короче говоря, это часть вашей страницы, которая помогает людям понять, что они собираются читать.

Но не обманывайте себя - вы можете использовать этот контейнер более одного раза. Например, вы можете использовать его для определения названия страницы и вводного абзаца вашего сообщения в блоге. Но вы также можете использовать его, чтобы отметить вводный контент для каждого раздела.

<article> <header> <h1> Все, что вам нужно знать о ЦАП </h1> <p> Вот полезное введение в ЦАП ... </p> </header> Остальная часть статьи идет здесь.

Разделы обычно содержат по крайней мере один тег заголовка - H1, H2 и т. д. Это не обязательно, но если вы используете тег <header> хуже не станет.

 

4. <footer> (Нижний колонтитул)

W3 говорит, что теги нижнего колонтитула обычно содержат «автора документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. д.». Вы можете думать о нем как о «домашнем» материале.

<footer> Авторские права: Блог Веб Программиста, 2017. <a href="//juice-health.ru/contact/">Контакты</a> </footer>

В документации также указано, что на вашей странице может быть более одного нижнего колонтитула. Но, по-моему, всю эту информацию лучше держать в одном месте.

 

5. <nav> (Навигация)

Этот тег содержит ссылки навигации для данной страницы. Обратите внимание, что только этот раздел содержит этот тег, а не все ссылки на вашей странице. Это для навигационных баров и аналогичных инструментов.

<nav> <a href="//juice-health.ru/> Главная страница </a>

<a href="//juice-health.ru/about"> Обо мне </a> </nav>

 

Это очень простой тег - вот и все. Используйте его для определения раздела навигации и не используйте его снова на своей странице.

 

6. <aside> (Дополнительная «побочная» информация)

Один из самых интересных новых элементов в HTML5 - это aside. W3 дает ему несколько бесполезное определение «некоторое содержание, кроме содержания, в которое оно помещено».

Короче говоря, aside есть все, что связано с (но отдельно от) окружающей информацией. Это может быть боковая панель, которая добавляет детали к вашему контенту. Когда он используется в теге <article>, он предоставляет дополнительную информацию, которая не является необходимой для понимания основного контента.

Например, если бы я включил боковую панель в этой статье, дающую информацию об истории HTML5, это было бы «Дополнительной информацией».

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

<article> Основная статья здесь. <aside> Этот блог ориентирован на создании связи между пользователями, компьютерами, устройствами и Интернетом через образование. </ aside> Статья продолжается здесь.

Поскольку для этого тега используется несколько применений, это может сбить с толку. Если вы помните, что это «вторичный контент» и что он не всегда должен быть боковой панелью, у вас будет лучшее представление о том, как его использовать.

 

7. <details> (Детали)

На многих веб-сайтах есть информация, которая должна отображаться, но не заметно. Возможно, это информация об авторских правах для фотографии. Или мелкий шрифт перед или после статьи. Эта информация является именно тем, для чего предназначен тег деталей.

Когда вы используете тег details, вы создаете скрытый текст, который можно легко отобразить. Вот пример:

Нажмите здесь, чтобы просмотреть информацию.

Просто нажмите стрелку, чтобы получить детали. Вот код, используемый для приведенного выше примера:

<details> <summary> Нажмите здесь, чтобы просмотреть информацию. </summary> Вот более подробная информация, которая вам нужна. </details>

Тег <summary> определяет предложение, которое будет показано, а другое содержимое скрыто. Обратите внимание, что вы можете использовать другие теги в разделе сведений: заголовки, разделы и т. д.

Есть и другие интересные вещи, которые вы можете сделать с HTML, даже если вы не владеете CSS или JSON.

 

8-9. <figure> и <figcaption> (Рисунок и его описание)

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

Если фигура удалена со страницы, она не повлияет на поток содержимого.

<figcaption> входит в тег рисунка и указывает подпись для изображения. Это может выглядеть примерно так:

<figure> <img src = "juice-health.png" width = "800px"> <figcaption> Это мой логотип! </figcaption> </figure>

Это дает вам встроенный способ добавления надписи к изображениям. Не нужно больше искать это в вашей CMS.

 

Воспользуйтесь преимуществами HTML5

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

Но если вы сможете освоить эти девять, вы будете на пути к правильному использованию HTML5.

 

Вы начали использовать HTML5? Какие новые элементы вы считаете наиболее полезными? Поделитесь своими мыслями в комментариях ниже!


Читайте также

 

 

 

Добавить комментарий