Семантика HTML5 и хорошая практика кодирования

Замените свой

<div id="footer">

с простым тегом нижнего колонтитула. Вы можете использовать его столько раз, сколько захотите!

навигационный

Вы можете сгруппировать ваши ссылки в элементе nav .

Это способ, которым мы кодируем на данный момент —

<div id="main-nav" class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</div>

Измените свой примитивный код на это —

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

Статья и раздел

Спецификация определяет раздел как —

Элемент section представляет общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.

Авторам рекомендуется использовать элемент article вместо элемента section, когда было бы целесообразно объединить содержимое этого элемента.

Следующая строка проясняет использование раздела.

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

Not: элемент section не должен использоваться для стилизации. Див должен быть предпочтительным.

Отличный пост Луиса Лазариса ( Impressive Webs ) о том, когда использовать HTML5-элемент «section» .

Вы можете прочитать об элементе статьи из HTML5 Doctor.

В стороне

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

Например, если внутри статьи содержится отступ, это означает, что содержимое отступа относится к статье, а не к странице.
Принимая во внимание, что если сторонняя сторона находится за пределами статьи, то это означает, что она не так тесно связана со статьей, но связана со страницей.

Адрес

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

пример

Вот пример.

• Простой пост в вашем блоге. Поместите заголовок поста и информацию о посте в шапку.
• Перейдите к фактическому посту и поместите в статью. Поместите теги и, возможно, ссылку «твитнуть мой пост» в нижний колонтитул.
• Эти простые теги делают вещи более логичными, в отличие от более раннего метода использования идентификаторов, таких как «header» и «footer» для выполнения работы.

группировки

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

<figure>
<!-- Your image here -->
<figcaption></figcaption>
</figure>

Смотрите эту скрипку , я сделал, чтобы продемонстрировать использование!

формы

Элементы формы были изменены больше всего в HTML5.

У нас есть заполнители! Да, там есть заполнители, которые мы использовали в JavaScript.
Теперь, как использовать заполнители. Ну, это так же просто, как есть сыр!

Просто включите заполнители и текст, который вам нужен внутри ваших элементов ввода.

<input name="user-name" type="email" placeholder="Your username is your email address">

Помимо этого у нас есть кейген.

В проекте говорится —

Элемент keygen представляет элемент управления генератора пар ключей. При отправке формы элемента управления закрытый ключ сохраняется в локальном хранилище ключей, а открытый ключ упаковывается и отправляется на сервер.

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

Смотрите следующий код —

<form name="main">
Result: <output name="result"></output>
<script>
document.forms.main.elements.result.value = 'Hello World';
</script>
</form>

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

Помимо вышеупомянутых элементов, у нас есть прогресс и метр.

Элемент прогресса может быть использован для создания индикатора выполнения. Значение может быть легко изменено и обновлено с использованием javascript и может использоваться для отображения индикаторов в формах и других пошаговых процессах.

Элемент Meter не имеет большого значения с точки зрения того, что он делает, но он привносит логику в ваш код.

Плохой код

<section>
My height is 5 feet and 10 inches.
</section>

ХОРОШИЙ КОД

<section>
My height is
<dl>
<dt>Feet: <dd> <meter min=0 max=7 value=5>5ft</meter>
<dt>Inches: <dd> <meter min=0 max=12 value=11>11in</meter>
</dl>
</section>

Вы можете легко понять, что все это значит. Лучше, чем раньше, верно?

Интерактивные элементы

Элементы в этой категории … ждите этого …

• подробности
• Резюме
• команда
• Меню

Честно говоря, я не использовал элемент details, но некоторое время назад я видел пример, и он довольно крутой!
Это как мини-аккордеон.

На данный момент вы можете использовать его в браузерах webkit. Не будет работать на Mozilla. И это скоро будет доступно в Опере.
Итак, что делает деталь, так это то, что вы можете легко складывать элементы.

Код для этого так —

<details>
<summary>Show/Hide me</summary>
<p>Hello! I am a paragraph element inside a details tag.</p>
</details>

Это будет выглядеть так: простая стрелка перед текстом резюме, а когда вы щелкнете по стрелке, вы увидите текст абзаца.
Демо для деталей элемента.

Еще один хороший пример со складным оглавлением.

Элемент меню кажется очень интересным.

Тип контекстного меню позволяет элементу представлять команды контекстного меню. Пользователь сможет взаимодействовать с командами, только если это контекстное меню активировано.

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

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

Встраиваемые элементы

Только что из духовки, у нас есть эти 6 вещей.
Холст, площадь, карта, аудио, видео и трек.

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

Что все, что вы можете сделать с изящным полотном?

• Рисовать фигуры
• Заполните цвета
• Создавайте красивые градиенты и узоры
• Визуализировать текст
• Получить кадры с других полотен
• Играть с пикселями
• Экспортируйте ваш холст в файл

Уже есть много демонстраций и других статей о том, как взаимодействовать с холстом. Это одно из самых любимых введений в HTML5.

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

Хороший пример из HTML5 Doctor это —

<h1>Clothing</h1>
 <img src="/images/menu.gif" alt="Select a department to go to its page." usemap="#nav">
</section>
<footer>
 <map name="nav">
  <p>
   <a href="/women/">Women</a>
   <area alt="Women" coords="0,0,100,50" href="/women/"> |
   <a href="/men/">Men</a>
   <area ALT="Men" coords="0,0,100,50" href="/men/"> |
   <a href="/kids/">Kids</a>
   <area alt="Food" coords="0,0,100,50" href="/kids/"> |
  </p>
 </map>
</footer>

Кажется полезным!

Это лучшие.

Взгляните на этот ужасный HTML-код, используемый для встраивания видео с YouTube!

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Даже не хочется читать то, что он говорит.

Давайте сделаем это способом HTML5.

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
 <p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>
</video>

О, это так здорово! (Это то, что вы сказали, верно?)
Вы даже можете добавить автоигру к тегу видео, и вы знаете, что это значит.

Элемент track можно использовать с видео, и вы сможете связывать внешние файлы с вашим видео.
Код для него довольно прост для понимания.

Пример:

<track kind=subtitles src=abc.vtt srclang=en label="English">

Есть и другие «добрые» слова, такие как субтитры, подписи, описания, главы и метаданные.

Видео сделано, время для аудио.

Аудио тег определяет 5 атрибутов.

• ЦСИ
• Автовоспроизведение
• петля
• управления
• предварительная нагрузка

Пример:

<audio controls preload="auto" autobuffer>
 <source src="track.mp3" />
 <source src="track.ogg" />
</audio>

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

На данный момент поддержка типов файлов отличается от браузеров.

Native Audio в браузере — HTML5 Доктор

Читайте больше на HTML5 Doctor — Native Audio в браузере

Последнее слово

Новые элементы эффективны по сравнению с тем, что мы имели ранее. По крайней мере, это то, что я чувствую как парень, который любит кодировать.

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

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

Ресурсы

1. Холст градиенты
2. Загрузка Демо
3. Вы можете пройти демонстрацию HTML5, чтобы увидеть больше демонстраций с использованием великолепных технологий.
4. HTML5 Doctor отлично подходит для определений и хороших объяснений различных элементов.

кредиты

Некоторые примеры, упомянутые выше, вдохновлены и взяты из проекта HTML5 Doctor .

Краткое примечание

Я включил только те изменения, которые, по моему мнению, принесли больше ясности и сделали код семантическим.

Если вы находитесь на HN, пожалуйста, проголосуйте. Ссылка на обсуждение.

Источник: http://www.aniketpant.com/article/html5-semantics-and-good-coding-practices