Обзор HTML 5. Что нового?

Вы сейчас здесь: Главная > Videos > Обзор HTML 5. Что нового?

В этом видеоуроке будут рассмотрены такие вопросы:

  • Что нового в HTML 5?
  • Какие теги добавили в HTML 5 и для чего они предназначены?
  • Какие теги убрали из HTML 5?
  • 2 новых и очень интересных тега - audio и video.

Скачать материалы:
Скачать 2-ой бонусный видеоурок по HTML Размер: 6.61 MB, скачали: 436 раз.
Скачать исходники ко 2 бонусному видеоуроку по HTML Размер: 10.58 MB, скачали: 386 раз. 
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Добро пожаловать во второй бонусный урок к видеокурсу по HTML! В этом видеоуроке я решил поговорить о новой версии языка разметки HTML – HTML 5. На сегодняшний день она активно развивается. Помимо новых тегов, в ней появилась и масса возможностей. Я не ставлю целью охватить все нововведения в этом видеоуроке, но я вам обещаю, что самые главные теги, которые появились в HTML 5, мы рассмотрим и разберем.

Отличия HTML 5 от HTML 4

Два самых главных отличия HTML 5 от HTML 4:

  • Появилось много новых тегов (header, footer, section), благодаря чему структура документа стала более простой.
  • Убраны старые теги, которые с появлением CSS3 и HTML5 становятся совсем невостребованными.

Обзор HTML 5. Что нового?

Давайте разберем HTML5 на примере создания новой веб-страницы. Я создал эту страницу и добавил структуру документа.

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Страница на HTML 5</title>
 </head>
 <body>
 <p>Привет, мир!</p>
 </body>
 </html>

Уже с первого взгляда заметно, что структура на HTML5 стала значительно меньше в объеме. Начнем с первой строчки. Элемент !DOCTYPE:  теперь вместо длинной строки кода нам нужно написать лишь html. Далее идет уже знакомый нам тег html, после него идет тег head — голова документа. Потом идет объявление кодировки. Опять же значительно короче. Затем заголовок нашей страницы. Закрываем голову документа. Тег body. Закрываем тег body. И закрываем html. На этом этапе мы заметили лишь то, что текста стало меньше только в элементах !DOCTYPE и head. Но, в течение этого видеоурока, пока мы будем изучать все новые и новые теги, вы заметите, что они позволяют сделать код меньше и проще.

Давайте приступим к изучению. Первый тег — тег header. Когда я начинал записывать курс по html, я вам немного рассказывал, что тег header в HTML5 означает место для шапки нашего сайта. Если вы начнете изучать CSS вместе с HTML4, то там вместо тега header будут использоваться теги divdiv. Отличия как такового нет, однако, согласитесь, что структура документа становится более понятной.

 <body>
 <header>
 <h1> Страница на <strong>HTML5</strong> </h1>
 </header>
 <p> Привет, мир!</p>
 </body>

Следующие два тега в HTML5 – это теги section и article. Тег section — это раздел нашего документа, в котором находятся теги article. В переводе article – это статья. То есть в разделе section у нас будут находиться статьи. Они имеют свой заголовок и свой текст.

 <body>
 <header>
 <h1> Страница на <strong>HTML5</strong> </h1>
 </header>
 <section>
 <article>
 <h3> Моя первая статья по <strong>HTML5</strong></h3>
 <p> Привет, мир!</p>
 </article>
 <article>
 <h3> Моя вторая статья по <strong>HTML5</strong></h3>
 <p> Пока, мир!</p>
 </article>
 </section>
 </body>

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

 <body>
 <header>
 <h1> Страница на <strong>HTML5</strong> </h1>
 </header>
 <section>
 <article>
 <h3> Моя первая статья по <strong>HTML5</strong></h3>
 <p> Привет, мир!</p>
 </article>
 <article>
 <h3> Моя вторая статья по <strong>HTML5</strong></h3>
 <p> Пока, мир!</p>
 </article>
 </section>
 <footer>
 <p>&#169; Спасибо за внимание! С уважением, <a href="<a href="http://info-line.net/">http://info-line.net</a>"Олег Зубцов</a>.</p>
 </footer>
 </body>

Давайте теперь сохраним наш документ, но прежде переведем его в кодировку UTF-8 без BOM. Теперь проверяем в браузере (скачать браузеры можно отсюда).

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

Следующий тег — тег навигации nav. Он используется, в основном, для создания меню сайта.

 <nav>
 <a href = "#" Главная </a>
 <a href = "#" Обо мне </a>
 <a href = "#" Контакты </a>
 </nav>

Давайте посмотрим, что у нас получается. Получилось горизонтальное меню.

Перейдем в код и выучим еще три новых тега.

 <dialog>
 <dt> Олег
 <dd> Привет! Как дела?
 <dt> Дима
 <dd> Привет. Отлично! А у тебя?
 <dt> Олег
 <dd> У меня тоже. Что нового?
 <dt>Дима
 <dd>Да вот, <strong>HTML5</strong> изучаю, а ты как?
 <dt>Олег
 <dd>Да я уже изучил 🙂 Ну что ж, желаю удачи тебе с ним!
 <dt>Дима
 <dd>Спасибо
 </dialog>

Думаю, тут объяснять ничего не надо. Разве что, различие dt и dd: dd — записывается имя человека, участвующего в диалоге, а dd — его текст, сообщение. Сохраняем. Проверим в браузере. Видим, что структура диалога построена за счет тех тегов, которые мы написали.

Тег figure — это тег, позволяющий связать медиа-контент (изображения, аудио, видео) с подписью или заголовком.

 <figure>
 <legend> Логотип сайта Info-line.net </legend>
 <img src="img/info-line.png" alt="Info-line.net">
 </figure>

Подпись получилась под изображением. Потом это все можно оформить с помощью CSS.

Следующий тег — aside. Применяется для создания цитат.

 <aside>
 <p>цитата</p>
 </aside>

Поправка: спецификация HTML5 потерпела изменения и теперь тег aside может также использоваться и для блоков связанных с содержимым сайта (пример: блок ссылок на похожие сайты).
Прошу Вас, обязательно прочитать подробный диалог в комментариях на счет данного тега. Это действительно важно! 

Тег time служит для выделения даты или времени.

 <aside>
 <p>цитата</p>
 </aside>
 <time> 21 октября 2011 года </time>

Пожалуй, на этом с тегами, которые относятся к тексту, мы закончим.

Самый главный «БУМ» HTML5 – это теги audio и video.  Они позволяют запустить файлы аудио и видео средствами браузера. Также в HTML5 есть специальные API, которыми можно воспользоваться.

<audio src = audio/depeche_mode.mp3" autoplay = "autoplay" loop = "2"> Depeche mode</audio>
<video src = video/1_urok_po_css.mp4" autoplay = "autoplay" loop = "1"> 1-ый урок по CSS</video>

В этом видеоуроке я не буду рассказывать, как создать плеер на HTML5, а просто покажу, как работают теги audio и video. Итак, тег audio: атрибут src указывает путь к файлу; autoplay означает, что файл нужно запустить сразу же, как будет открыта страница в браузере; loop указывает на то, сколько раз проигрывать этот файл. Таким образом, при открытии нашей страницы в браузере, у нас должен одновременно запуститься и видеоурок, и песня группы Depeche mode. Давайте сохраним и обновим браузер.

Браузер Opera у меня старой версии и, видимо, не поддерживает теги audio и video. Поэтому давайте запустим нашу страницу в браузере Google Chrome. Мы слышим и видим, что у нас запустились файлы аудио и видео. Это значит, что теги audio и video работают нормально.

Спасибо за внимание. До встречи в следующем видеокурсе под названием CSS! Приступайте к его изучению, я вас уже жду 🙂

Приступить к изучению видеокурса по CSS немедленно!

Похожее видео

Подпишись на info-line:

Получать новые уроки на e-mail:

21 комментарий на “Обзор HTML 5. Что нового?”

  1. Надежда 8 декабря 2011 в 12:23 #

    Добрый день, Олег!

    Прослушала все уроки HTML и хочу поблагодарить Вас за столь кропотливо м добросовестно проделанный Вами труд. Вы все очень замечательно и наглядно представили, понятно комментируете и поясняете. Большим плюсом для неискушенного пользователя (как и для тех, кто «мыслит руками», для кого главный вопрос — что и в какой последовательности нажимать), кмк, является наглядный набор тегов «ручками» и наблюдение in real time, как Вы пользуетесь функциональностью используемых программ. Такой вид обучения стимулирует желание учиться и усваивать новое намного больше, чем изучение тегов «с листа» — в чем я убедилась на себе.

    Еще раз благодарю Вас!

    Ответить
  2. Рахим 15 февраля 2012 в 12:06 #

    Привет Олег! Можно я тебе кое-что спрашу? Уменя проблема! я вот хочу чтоб тег стоял в сайте в правом углу сайта и чтоб был горизантально стоял объясни? какие мне теги добываить?

    Ответить
  3. Рахим 15 февраля 2012 в 12:07 #

    чтоб слово на пример чтоб они стояли на правом углу сайта ?

    Ответить
  4. rahim 18 февраля 2012 в 4:12 #

    спасибо помогло а не подскажите а можно мне учить с++ я уже выучил html и css а ещё буду учить php я хочу главное освоить язык С++

    Ответить
  5. rahim 19 февраля 2012 в 9:27 #

    не подскажите где я могу изучить с++

    Ответить
    • Олег Зубцов 19 февраля 2012 в 13:21 #

      К сожалению, я не владею знаниями языка C++. Поэтому и совета вам дельного не дам. В будущем сам хочу изучать C#. Воспользуйтесь поиском в Google.

      Ответить
  6. rahim 20 февраля 2012 в 14:21 #

    а вы неподскажите примерно скоко надо учить один язык программирование !

    Ответить
    • Олег Зубцов 20 февраля 2012 в 14:39 #

      Чем больше учите — тем лучше знаете. Естественно важно еще качество обучения. Здесь слишком много переменных, чтобы можно было сказать однозначно.

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

      Я думаю как-то так *CRAZY*

      Ответить
  7. rahim 20 февраля 2012 в 15:14 #

    спасибо

    Ответить
  8. rahim 24 февраля 2012 в 13:16 #

    Почему не появляються новые уроки ?

    Ответить
    • Олег Зубцов 24 февраля 2012 в 21:42 #

      По нескольким причинам:

      1. Я немного обленился

      2. Создавался новый дизайн оформления для видеоуроков

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

      Завтра на сайте появится видеоурок. Обещаю. Ну а так как первый блин всегда комом, то теперь редактирование и подготовка слайдов для видео будет занимать значительно меньше времени. А то получилось, что 1 видеоурок готовился неделю 🙂

      С этого дня, обещаю изо всех сил стараться выкладывать 2-3 видеоурока в неделю. Спасибо, что остаетесь на связи)

      Ответить
  9. Александр€ 27 апреля 2012 в 21:23 #

    Немогу скачать дополнительные материалы, пишет-Download path is invalid!

    Ответить
    • Олег Зубцов 28 апреля 2012 в 0:40 #

      Большое спасибо, что сообщили! Ошибка исправлена. Теперь все материалы и видеоуроки можно скачать.

      Ответить
  10. Алексей 24 августа 2012 в 21:42 #

    А будут ли добавлены уроки по РНР ?

    Ответить
  11. SjAlan 27 ноября 2012 в 13:02 #

    Доброго времени суток Олег.

    Исправьте ошибки пожалуйста в перовм бонусном уроке:

    — глобальный элемент <aside></aside> используется далеко не для цитат, для них есть свой элемент <q>Цитата</q>;

    — а вот элемент <aside></aside> определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель».

    Ссылка на официальный драфт HTML5 — www.w3.org/TR/2012/WD-htm...ction-index.html

    P.S. Да, надпись — оповещать о новых комментариях по почте — съехала у Вас, поправьте. Мой браузер Pale Moon.

    Ответить
    • Олег Зубцов 27 ноября 2012 в 16:05 #

      И Вам доброго 🙂

      Благодарю Вас за внимательность и сообщение. Я обязательно внесу поправки в статью.

      Однако, это не ошибка. Тег <aside></aside> используется для цитат до сих пор, и нет в этом ничего ошибочного 🙂

      Поясню, в чем дело. Все дело в изменении спецификации HTML5.

      Изначально тег <aside></aside> разрешено было использовать только в рамках тега <article></article>. И предназначался данный тег для выделения информации, связанной со статьей, но не являющейся частью этой статьи.

      Например: цитаты, сноски, списки ссылок на источники, какая-либо дополнительная информация.

      С конца 2009 года в спецификации произошли изменения и появилась возможность использовать тег <aside></aside> вне тега <article></article>. А это повлекло и изменения в общей сфере веб-мастеринга.

      С того момента, как тег <aside></aside> можно использовать отдельно от тега <article></article>, данный тег получил популярность и стал использоваться для задания структуры документа, а именно, как Вы сказали — для «сайдбаров» или боковой панели (не стоит путать с навигационной панелью, для навигации в HTML5 есть тег <nav></nav>).

      Несмотря, на все эти изменения, тег <aside></aside> можно и даже полезно использовать для цитат в статье (в теге <article></article>)!

      Как работает данный тег? — вот самый главный вопрос.

      А вот работать он может по-разному. В первом — случае, он может быть цитатой (как я и сказал в уроке). Во втором случае — он может быть сайдбаром, как отметил SjAlan.

      1. Если тег используется в теге <article></article>, то он должен содержать в себе контент, касающийся содержимого статьи (пример: цитата).

      2. Если тег используется за пределами тега <article></article>, то в таком случае, содержимое данного тега должно являться второстепенным к сайту в целом (пример: блок ссылок на похожие сайты).

      Следует помнить, что стандарт HTML5 до сих пор не «устоялся» в интернете и может принимать различные изменения, поэтому следует время от времени следить за изменениями данного стандарта.

      Или, подписываться на RSS комментариев моего сайта и следить за новыми комментариями, потому что нас таких много 🙂

      P.S. Спасибо еще раз SjAlan, за вашу внимательность, но пока еще не дошли руки поправить надпись оповещения о новых комментариях по почте (сайт находится в стадии доработки) 🙂

      Ответить

Оставить ответ