HTML5 rules

АВТОР АНТОН ГОНЧАРОВ (ITVDN.COM/RU/)
ТРЕНЕР-КОНСУЛЬТАНТ УЧЕБНОГО ЦЕНТРА CYBERBIONIC SYSTEAMTICS

Введение

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

html5

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

  1. Новые элементы: header, footer, section, article, video, audio, progress, nav, meter, time, aside, canvas;
  2. Новые значения для атрибута type тега <input>;
  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>. Также не стоит помещать сам элемент <main> внутрь элементов <article>, <aside>, <header>, <footer> или<nav>.

Элемент article

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

Элемент header

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

Элемент footer

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

Элемент aside

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

Элемент address

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

Элемент nsfw

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

nsfw {display: none ;}

Элемент video

Элемент <video> предназначен для размещения видео контента на странице. Для корректного отображения контента стоит прописать дополнительно атрибуты 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

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

Также в HTML5:

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

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

Статья на ITVDN.

Реклама

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s