Комплексная Образовательная Система
"Интернет"
~~~ KOCI.INUMO.RU ~~~

Умные люди из 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 ← скачайте пример, чтобы установить на свой сайт...

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