Правила применения основных тегов HTML5
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно

Выбери свою IT специальность

Начать бесплатно

Правила применения основных тегов HTML5

Live Online Java .NET Live Online

Введение

Все мы уже знаем (ну или что-то слышали об) основных правила применения элементов разметки HTML5. Появилось много "плюшек" и “вкусностей” в новой спецификации HTML. Вместе с тем, появились новые элементы разметки. Но не все помнят/знают, как их использовать правильно.

html5


Коротко остановлюсь на главных нововведениях HTML5:

  1. Новые элементы: header, footer, section, article, video, audio, progress, nav, meter, time, aside, canvas;
  2. Новые значения для атрибута type тега ;
  3. Новые атрибуты HTML5 для элементов, такие как: dragable, contenteditable, hidden, contextmenu, data-*, dropzone, role, spellcheck[8] и т.д.;
  4. Атрибуты class, dir, id, lang, style, tabindex, title, существовавшие в HTML4, теперь можно применять ко всем елементам HTML разметки;
  5. Устаревшие элементы HTML страницы, которые частично поддерживаются и не рекомендуются к ипользованию: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u.

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

Элемент

Элемент <main>содержит главную информацию вашего сайта. Такие повторяющиеся элементы как логотип, окно поиска, меню навигации не рекомендуется вкладывать в <main>. Также не стоит помещать сам элемент <main> внутрь элементов <article>, <aside>, <header>, <footer> или <nav>.

Элемент

В элемент <article> следует помещать тот контент, который может быть удален без ущерба для всего сайта. К примеру, краткое описание новостей, рекламный баннер, статья, комментарии. Можно вкладывать <article> в <article>, что будет связывать вложенные элементы <article> с родительским.

Элемент

Элемент <header>, как  понятно из названия, используется для оглавления отдельного контента или всей страницы. Должен содержать  заглавие, дату статьи и т.д.

Элемент

Элемент <footer> служит для предоставления информации об авторе статьи/страницы, ссылки на авторские права и т.д. Обычно является прямым потоком тега <body> (помещается сразу за элемент <body>).

Элемент

Этот элемент содержит информацию об окружающем контенте, дополнительную информацию пользователю. Может содержать такой элемент, как <nav>, сноски, ссылки и т.д.

Элемент

 

Предназначен для предоставления контактной информации о статье или всей странице. Стоит отметить, что этот элемент часто помещают в

, для размещения ссылок для связи с авторами страницы.

Элемент

Элемент <nsfw> (англ. - Not Safe For Work – небезопасно для отработки) используется для размещения на странице контента сомнительного характера. Часто этот тег используют для размещения порнографии. Чтобы браузер не отображал такой контент, используют CSS код 

nsfw {display: none ;}

Элемент

Элемент предназначен для размещения видео контента на странице. Для корректного отображения контента стоит прописать дополнительно атрибуты width, height, src, controls. Ваш код будет выглядеть примерно так:

 

<video width="840" height="480" src="../video/myVideo.mp4" controls> video>

 

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

  1. Вам стоит зайти на страницу c видео, правой кнопкой мыши нажать на видео, и из выпадающего меню выбрать “Получить код для встраивания”.
  2. Копировать код из “попап” окошка.
  3. В разметке вашего сайта, в нужном вам месте, кликнуть правой кнопкой мыши и выбрать “Вставить”.

У вас получится примерно такой код:

 

<iframe width="854" height="510" src="https://www.youtube.com/embed/_giinWWrNlQ" frameborder="0" allowfullscreen>iframe>

 

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

Элемент

Элемент <audio> позволяет добавить на страницу аудио дорожки.

Также в HTML5:

  • Реализована возможность добавления на станицу геолокационных карт, а также определения местоположения пользователя в данный момент.
  • Теперь мы можем рисовать с помощью технологии canvas. А также использовать 3D графику.
  • Стало возможным просто перетягивать документы и прикреплять к письму.
  • И еще много новых "плюшек", которые вы можете узнать и научиться их использовать, пройдя наши курсы в учебном центре CyberBionic Systematics.

Всем удачи и хорошего кода)

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
Live Online Java .NET Live Online

Пакеты подписки с доступом ко всем курсам и сервисам

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
Премиум
  • Все видеокурсы на 12 месяцев
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
Notification success