Per koci ru ad astra!

Курс HTML :: HTML5 - новые семантические теги. Урок 38.

Настройка сайта

Проверка javascript.

Светофор, свет красный

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

Вероятные причины проблемы: в настройках браузера отключена возможность выполнения javascript и/или в данный момент имеются проблемы подключения к Интернету.

Решение проблемы: устраните причины, указанные выше и нажмите CTRL-F5 для перезагрузки софта и контента этой странички.

Должно помочь.


Рекомендую курсы
Рекомендаций не видно по причине отключенного javascript.


Домен inumo.ru


Урок 38. HTML5 - новые семантические теги.
HTML - основа основ Интернета. Базовый курс. HTML5 - новые семантические теги. Урок 38. Семантические теги - это такие теги, из названия которых сразу понятно, какого типа информация в них содержится. Тег <header> - блок хидер, в котором содержится шапка странички или секции. Тег <nav> - блок нав, в котором содержится меню навигации. Тег <section> - блок секция, тематическая группа контента, обычно имеющая заголовок. Тег <article> - блок статья. <aside> - блок "в сторонке". Тег <figcaption> - тег "заголовок фигуры" содержит заголовок для блока "фигура". Тег <figure> - блок "фигура" содержит самодостаточный контент, такой как иллюстрация, диаграмма, фото, текст программы и т.п. Тег <mark> - тег "маркировка". Тег <time> - тег "время", содержит дату и время. Тег <footer> - блок футер, в котором содержится итоговая информация по страничке.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
38. HTML5 - новые семантические теги.
Умные люди из w3.org заметили, что многие вебмастера часто создают дивы, наподобие следующих:
  • <div id="header"> - див, в котором содержится шапка странички.
  • <div id="nav"> - див, в котором содержится меню навигации.
  • <div id="footer"> - див, в котором содержится итоговая информация по страничке (дата, автор, копирайт и пр.).
Ну, и тому подобные дивы.

Появилась идея, создать блочные теги, наподобие дивов (<div>), но так, чтобы уже из названия тега сразу было понятно, какого типа информация в нем содержится (семантические теги).

В результате в стандарт HTML5 были введены новые семантические теги:
  • <header> - блок хидер, в котором содержится шапка странички или секции. Содержит первоначальную вводную информацию. На одной страничке может быть несколько хидеров.
  • <nav> - блок нав, в котором содержится меню навигации. Элемент предназначен для для больших блоков с навигационными линками. Но не все линки обязательно должны быть внутри <nav>.
  • <section> - блок секция, тематическая группа контента, обычно имеющая заголовок.
  • <article> - блок статья. Этот элемент содержит независимый контент, имеющий ценность сам по себе, независимо от другого контента на страничке. Примеры: посты блога или форума можно трактовать как статьи.
  • <aside> - блок "в сторонке", содержит контент, имеющий отношение к предмету, упомянутому в основном блоке контента.
  • <figcaption> - тег "заголовок фигуры" содержит заголовок для блока "фигура". Можно размещать как первым, так и последним дочерним элементом блока "фигура".
  • <figure> - блок "фигура" содержит самодостаточный контент, такой как иллюстрация, диаграмма, фото, текст программы и т.п. Удаление блока "фигура" должно быть безболезненным для остального контента странички.
  • <mark> - тег "маркировка", определяет отмеченный (выделенный) текст.
  • <time> - тег "время", содержит дату и время.
  • <footer> - блок футер, в котором содержится итоговая информация по страничке или по секции (дата, автор, копирайт и пр.). На одной страничке может быть несколько футеров.
Попробуем отобразить примерную схему расположения семантических элементов с помощью тега Канвас.

Теперь попробуем отобразить данную теорию на нашем практическом тестовом примере.

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

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


*** Машина-Функционал для передвижения по страничкам курса HTML ***
:: :: /

Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.

Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок_18 :: Урок_19 :: Урок_20 :: Урок_21 :: Урок_22 :: Урок_23 :: Урок_24 :: Урок_25 :: Урок_26 :: Урок_27 :: Урок_28 :: Урок_29 :: Урок_30 :: Урок_31 :: Урок_32 :: Лаба_2 :: Урок_33 :: Урок_34 :: Урок_35 :: Урок_36 :: Урок_37 :: Урок_38

Следующие странички, рекомендуемые для посещения и изучения:
Лаба 3

Страничка сделана на основе контента курса HTML сайта kocby.ru

© KOCI.INUMO.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCI.INUMO.RU ©