Сразу дам разъяснение, почему лучше использовать новые теги и не забить на них и делать все, как раньше. В принципе, с точки зрения правильности, не будет ошибочным неиспользование ниже описанных тегов в HTML разметке страницы.
Самый большой плюс HTML5 заключается в следующем: Использование новых тегов помогает поисковым системам разделять вашу страницу на части и определять где, например, находится меню, шапка сайта, футер сайта или основной контент (информация).
Тег <header>
Используется для обозначения шапки сайта, в которой обычно размещаются логотип, телефоны, графическое изображение. Пример:
<header> <div id=”logo”><img src=”images/logo.png” alt=”Логотип” /></div> <div id=”tel”>8 900 909-90-90</div> </header>
Тег <nav>
Служит для обозначения навигации на сайте (обычно главное меню). Пример:
<nav> <a href=”home.php” title=”Главная”>Главная</a> <a href=”uslugi.php” title=”Услуги”>Услуги</h2> <a href=”kontakty.php” title=”Контакты”>Контакты</a> </nav>
Тег <main>
Внутри данного тега размещается основной контент страницы. Пример:
<main> <article> <h3> <a href="http://it-is-web.ru/prodvizhenie-sajtov/poiskovaya-optimizaciya-sajta-seo/" title="Поисковая оптимизация сайта (SEO)" > Поисковая оптимизация сайта (SEO)</a></h3> <p>Основные определения в оптимизации сайта под поисковые системы…</p> </article> <article> <h3> <a href="http://it-is-web.ru/prodvizhenie-sajtov/poiskovaya-optimizaciya-sajta-seo/" title="Поисковая оптимизация сайта (SEO)" > Поисковая оптимизация сайта (SEO)</a></h3> <p>Основные определения в оптимизации сайта под поисковые системы…</p> </article> </main>
Тег <article>
Обычно внутри данного тега размещается независимый от основного содержания страницы, но схожий по тематике текст: новость, статьи с блога, комментарии и т.п. Пример:
<article> <h3> <a href="http://it-is-web.ru/prodvizhenie-sajtov/poiskovaya-optimizaciya-sajta-seo/" title="Поисковая оптимизация сайта (SEO)" > Поисковая оптимизация сайта (SEO)</a></h3> <p>Основные определения в оптимизации сайта под поисковые системы…</p> </article>
Тег <aside>
Данным тегом выделяются блоки, не относящиеся к основному контенту страницы: текстовые блоки, рубрики, метки, модули и т.д. Обычно располагаются по бокам страницы. Пример:
<aside> <h3> Расчет стоимости</h3> <div id=”module”>скрипт модуля</div> </aside>
Тег <hgroup>
Используют при добавлении нескольких уровней заголовков: Заголовок, подзаголовок и т.д. Пример:
<hgroup> <h1>Создание сайтов</h1> <h2>HTML</h2> <h3>Основные теги</h3> </hgroup> <p>Текст статьи…</p>
Теги <figure> и <figcaption>
Используются в основном в паре для публикации изображения и подписи к нему. Если описание к изображению не нужно можете без проблем использовать просто тег <img>. Пример:
<figure> <img src=”1.jpg” alt=”1” /> <figcaption>Описание (название) изображения</figcaption > </figure>
Тег <section>
Используется для разделения контента страницы на секции (разделы). Не используется для разделения элементов сайта на блоки (блочная верстка), для этого используется тег <div>. Пример:
<section> <h1>HTML</h1> <p>HTML – это язык описания структуры документа…</p> </section> <section> <h1>CSS</h1> <p>CSS – это язык описания внешнего вида (стиля) документа…</p> </section>
Тег <time>
Используется для обозначения даты добавления материала, статьи, новости, комментария и т.д.
Пример:
<article> <p>Дата добавления: <time datetime="2014-2-03">2014-2-03</time> </p> <p>Как создать свой собственный блог с нуля <a href=”/”>читать далее..</p> </article>
Тег <footer>
Используется для выделения нижней части сайта (футер, подвал), в которой обычно размещаются: контакты, автор, дата создания, права, ссылки, счетчик и т.д. Пример:
<footer> <div id="menu2">навигация</div> <div id="counter">счетчик</div> <div id="cont-info">Общество с ограниченной ответственностью...</div> <div id="optiweb">All Rights Reserved 2014 | <span>by </span><a href="http://razrabotaemsayt.ru" title="Создание сайтов и продвижение" target="_blank">Создание сайтов и продвижение</a></div> </footer>
Данные теги HTML5 помогут увеличить скорость индексации вашего сайта поисковыми системами в разы, так что не советую ими пренебрегать! Успехов…
it-is-web.ru
Главнокомандующий разметкой сайтов, знаменитый html
После прочтения предыдущих моих публикаций, а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!
Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.
Итак, для начала стоит запомнить, что html – это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.
Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?
Тег – это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).
Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.
Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.
Атрибуты нужны для расширения спектра возможностей отдельного тега, а также для более гибкого управления внешним видом контейнеров. Безусловно, элементы языка разметки спокойно могут существовать и без определения атрибутов. Тогда браузер будет задавать им форматирование по умолчанию.
Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.
| Одиночные теги | |
| <meta charset=»utf-8″ name = «GENERATOR» content = «Microsoft FrontPage 4.0»> | В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени. |
| <img src=»image/cars.jpeg» width=»200″ height=»450″ alt=»BMW»> | Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение. |
| Парные теги | |
| <a href= «tip.html» target=»_blank» title=» Нажмите на ссылку и она откроется в новой вкладке»> Как правильно приготовить запеканку?</a> | Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор. |
Близкий родственник языка html
Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.
Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.
Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как <video> и <audio>, отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: <bgsound>, <dir>, <rb>, <applet> и другие.
А теперь я хочу перечислить основные теги спецификации, к которым относятся article, aside и другие, а также описать для чего они были созданы.
| Тег | Описание |
| <article> | Задает наименование статьи, объявления, страницы сайта и т.д. Атрибутов не имеет. |
| <aside> | Определяет боковой блок для размещения в нем карты сайта, рекламы, ссылок на ресурсы и т.д. Можно использовать универсальные атрибуты. |
| <canvas> | Полезный элемент для создания при помощи JavaScript анимаций, рисунков, а также редактирования имеющихся картинок. Поддерживает как уникальные атрибуты, так и события. |
| <figure>
|
Основная задача тега: группировать разные элементы в единое целое. Это может быть, например, текст и рисунок. |
Семантические теги
С появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.
Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.
Может это и было удобно с одной стороны для девелоперов, однако поисковым системам, а также браузерам приходилось туго. Поэтому было найдено решение в виде семантических тегов.
Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся <header>, <footer> и <nav>. <header> отвечает за определение на сайте его заголовка или заголовка текста, <footer> – за «подвал» внизу интернет-страницы, а <nav> – за навигацию сайта.
Для усвоения материала хочу, чтоб вы опробовали практический пример:
Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с сайтом, а также оптимизируют работу поисковых роботов.
Ну что ж. Я рассказал все, что вам нужно знать на начальных стадиях изучения языка html. Если вы узнали что-то новое для себя, то подписывайтесь на обновления моего блога и делитесь ссылочкой с друзьями. Пока-пока!
С уважением, Роман Чуешов
romanchueshov.ru
В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Хотя кажется, что особой разницы между тегами <div class="header"> и <header> нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают <div class="header">, для них это типовой тег разметки — замени его на <div class="abrakadabra"> и смысл не поменяется. Другое дело <header>, робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.
Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.
Давайте для начала сделаем шапку сайта с помощью тега <header> (пример 6.2).
Пример 6.2. Использование <header>
<header> <div class="header-bg"> <img src="images/header-title.png" alt="Как поймать льва в пустыне" /> </div> </header>Попытка добавить в стилях фон к тегу <header> ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display, тогда они начнут корректно выводиться (пример 6.3).
Пример 6.3. Шапка сайта
HTML5CSS 2.1IE 7+IE 9+CrOpSaFx
<style> header { display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; } </style>Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в <head> такой код.
<script> document.createElement("header"); </script>Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).
Пример 6.4. Скрипт для IE
<!--[if lt IE 9]> <script> var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]-->Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.
Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.
Пример 6.5. Скрипт для IE
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->Все указанные скрипты должны располагаться в коде перед CSS.
Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:
- установить доктайп <!DOCTYPE html>;
- включить скрипт из примера 6.4 или 6.5;
- в стилях для новых тегов установить display: block.
Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.
<article>
Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др. В примере 6.6 показано добавление тега <article>.
Пример 6.6. Использование тега <article>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>article</title> </head> <body> <header><h1>Следы невиданных зверей</h1></header> <article> История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось. </article> </body> </html><aside>
Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».
Пример 6.7. Использование <aside>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>aside</title> <script> document.createElement('aside'); document.createElement('article'); </script> <style> aside { background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */ width: 200px; /* Ширина сайдбара */ float: right; /* Обтекание слева */ } article { margin-right: 240px; /* Отступ справа */ display: block; /* Блочный элемент */ } </style> </head> <body> <aside> <p>Экономьте электричество</p> <p>Хороший язык</p> <p>Чья палка больше</p> </aside> <article> История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило. </article> </body> </html><figure>
Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).
Пример 6.8. Использование <figure>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>figure</title> <script> document.createElement('figure'); document.createElement('figcaption'); </script> <style> figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ } </style> </head> <body> <article> <figure> <p><img src="images/thumb1.jpg" alt=""></p> <figcaption>Софийский собор</figcaption> </figure> <figure> <p><img src="images/thumb2.jpg" alt=""></p> <figcaption>Польский костёл</figcaption> </figure> </article> </body> </html><figcaption>
Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.
<footer>
Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).
Пример 6.9. Использование <footer>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>footer</title> </head> <body> <header> <h1>Персональный сайт Кристины Ветровой</h1> </header> <article> <h2>Добро пожаловать!</h2> <p>Рада приветствовать вас на своем сайте.</p> </article> <footer> Copyright Кристина Ветрова </footer> </body> </html><header>
Определяет «шапку» сайта или раздела.
<hgroup>
Используется для группирования заголовков веб-страницы или раздела (пример 6.10).
Пример 6.10. Использование <hgroup>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hgroup</title> </head> <body> <hgroup> <h1>Кристина Ветрова</h1> <h2>Персональный сайт</h2> </hgroup> </body> </html><nav>
Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.
Пример 6.11. Использование <nav>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nav</title> </head> <body> <header> <h1>Чебурашка и крокодил Гена</h1> </header> <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> | <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav> <article> <h2>Добро пожаловать!</h2> </article> </body> </html><section>
Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег <section> внутрь другого.
Пример 6.12. Использование <section>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>section</title> </head> <body> <section> <h2>Съёмки фильма Полипропилен</h2> <p>История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.</p> </section> <section> <h2>Хороший язык</h2> <p>История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.</p> </section> </body> </html><time>
Помечает текст внутри тега <time> как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime (пример 6.13).
Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.
| Значение | Формат | Пример |
|---|---|---|
| Год | ГГГГ | 2012 |
| Месяц и год | ГГГГ-ММ | 2012-12 |
| Полная дата | ГГГГ-ММ-ДД | 2012-12-23 |
| Дата и время с минутами | ГГГГ-ММ-ДДTчч:мм | 2004-07-24T18:18 |
| Дата и время с секундами | ГГГГ-ММ-ДДTчч:мм:сс | 2004-07-24T18:18:18 |
| Дата и время с часовым поясом | ГГГГ-ММ-ДДTчч:мм:сс±чч:мм | 2004-07-24T18:18:18+04:00 |
Для каждой единицы существует своя заданная форма и ограничения.
- Год — задается четырьмя цифрами (1860).
- Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
- День — две цифры от 01 до 31.
- Час — две цифры от 00 до 23.
- Минуты — две цифры от 00 до 59.
- Секунды — две цифры от 00 до 59.
- Часовой пояс — часы и минуты с указанием знака плюс или минус.
Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.
Пример 6.13. Использование <time>
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>time</title> </head> <body> <article> <p>Опубликовано: <time datetime="2012-12-23T08:23:11+07:00">сегодня</time></p> <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p> <p><time>1960-08-19</time> первый полёт собак в космос.</p> <p><time>1961-04-12</time> первый полёт человека в космос.</p> <p><time>1963-06-16</time> первый полёт женщины-космонавта.</p> <p><time>1969-07-21</time> высадка человека на Луну.</p></article> </body> </html>htmlbook.ru
Какие теги добавили в язык HTML5?
В язык HTML5 добавили множество новых тегов:
— теги семантически описывающие структуру страницы,
— теги описывающие новые технологии,
— теги обогащающие язык HTML.
Семантика HTML5 на уровне структуры страницы
Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:
<header> </header> — теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также теги header можно использовать как верхнюю часть тега section.
<nav> </nav> — теги обрамляющие основное меню на сайте.
<article> </article> — теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.
<aside> </aside> — теги обрамляющие сайдбар. Сайдбар — это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта), социальные кнопки.
<footer> </footer> — теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section, т.е. сами теги footer будут находиться между тегами section
<section> </section> — теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.
Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов <div>, практическая же польза от них может появиться лишь тогда, когда поисковые системы (Яндекс, Гугл) начнут рекомендовать, где и когда использовать эти теги, для более высокого ранжирования сайтов.
Семантика HTML5 на уровне текста
Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:
<mark> </mark> — текст находящийся между этими тегами становится "выделенным". Одно из предназначений тегов mark, обрамлять слова в тексте, которые например совпадают со словом введённым пользователем в поисковую строку.
<time> </time> — теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.
<details> </details> — теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).
<summary> </summary> — теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера), находятся между тегами details.
Дополнительные теги языка HTML5
Список новых тегов HTML5, обогощающих язык:
<meter> </meter> — теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.
<progress> </progress> — теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.
<command /> — тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.
<menu> </menu> — между этими тегами помещают тег command.
<output> </output> — теги предназначены для вывода работы скрипта.
<datalist> </datalist> — теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.
<figcaption> </figcaption> — теги обрамляют описание какого-либо объекта (например изображения), находятся между тегами figure..
<figure> </figure> — теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.
<hgroup> </hgroup> — теги предназначены для группировки заголовков h*
<keygen /> — тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.
<ruby> </ruby> — теги обрамляют текст и аннотацию к нему.
<rt> </rt> — теги находятся между тегами ruby, предназначены для обрамления аннотации.
<rp> </rp> — теги предназначены для браузеров которые не поддерживают теги ruby.
<wbr /> — тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.
Теги HTML5 описывающие новые технологии
В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:
<audio> </audio> — теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).
<video> </video> — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).
<source /> — тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.
<canvas> </canvas> — теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).
Читать далее: Устаревшие теги HTML5
html-5.ru
Новые теги HTML5
В HTML5 появились следующие новые теги:
Остальное остается прежним, кроме некоторых тегов которые не являются актуальными и не рекомендуются для использования:
Поэтому если вы знакомы с HTML4 и XHTML, то у вас не возникнет никаких проблем в изучении HTML5. Новые тэги и атрибуты безусловно помогут вам в создании новых и модернизации старых сайтов, благодаря новым возможностям это будет намного легче, чем это было со старым хорошим HTML4.
Хорошо, но будет ли HTML5 работать со старыми браузерами? Ответ — «ДА», кроме новых тегов, естественно. Новые страницы, сделанные в HTML5 будут отображаться во всех браузерах, но пользователи новых браузеров увидят немного больше, а в некоторых случаях страница будет вообще смотреться по-другому.
Структурные теги.
Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги <table> и <div>, чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.
Теперь нам доступны следующие структурные теги:
<section> Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.
<header> Цель его состоит в том, чтобы определить верхнюю часть HTML документа.
<footer> Этот тег применяется для того, чтобы определить нижнюю часть документа.
<nav> Цель его в том, чтобы определить список ссылок на другие HTML страницы.
<article> Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.
Вот к примеру HTML код с новыми тэгами.
Как вы видите, мы поместили название нашего документа в теги <header>. Затем мы добавили раздел к нашей странице при помощи тэга <section> и вложили в него 2 тега <article>, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг <nav>. И наконец мы создали нижний колонтитул нашей страницы при помощи тега <footer>.
Так и что же здесь особенного? Мы могли сделать тоже самое, используя старый хороший тэг <div>. Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.
Новые блочные теги HTML5.
В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
Тег <aside> используется для обозначения какой-то части текста, в пределах основного текста, например цитаты или сноски. …
Веб-браузер никак не выделяет текст, заключенный в тэге <aside>, он используется для создания хорошей структуры HTML документа. Это по достоинству смогут оценить разработчики поисковых систем.
Следующий тэг <dialog> используется для создания диалогов между пользователями:
В тег <dialog> мы вложили еще два тэга: <dt> — содержащий имя пользователя и <dd> для отображения сообщения пользователя.
Третий тег <figure> используется для того, чтобы указать название изображения.
Мы использовали тэг <legend>, чтобы указать название изображения, тег <img>, чтобы вставить определенное изображение, и тэг <figure>, чтобы связать их вместе.
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.
Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block; чтобы они должным образом отображались. Что касается старых версий Internet Explorer, то необходимо так же добавить следующее:
Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега <script> есть type=»text/javascript» по умолчанию, поэтому его мы можем не добавлять.
Встроенные теги.
У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:
Тег <m> используется для обозначения какой-то части текста для определенных целей, например, чтобы показать важную часть текста:
Мы вставили определенную важную часть в тэг <m>.
Тег <time> используется для обозначения времени и даты в каком либо тексте, например:
Тег <meter> используется, чтобы показать некоторые числа в определенном формате, например:
У тега <meter> есть 6 полезных атрибутов:
value — задает фактическое значение чего-то;
min — задает минимальное значение чего-то;
low — определяет предел, при достижении которого значение считается низким;
high — определяет предел, при котором значение считается низким;
max — определяет максимальное значение чего-то;
optimum — определяет оптимальное значение чего-то.
Например:
Последний новый тэг <progress> используется, чтобы показать некоторую точку некоторого прогресса, например, процент завершения чего-то:
Тег <progress> имеет два атрибута: value — текущее значение прогресса и max — максимально значение прогресса.
Мультимедийные теги.
В HTML5 имеется два новых тэга, предназначенных для вывода мультимедиа <audio> и <video>.
Вот пример применения тега <audio>:
У этого тега имеется три атрибута:
src — путь к звуковому файлу;
autoplay — определяет, начать ли проигрываться файлу сразу после загрузки страницы в браузере;
loop — определяет, сколько раз аудио должно проигрываться.
Тег <audio> позволяет разместить внутри себя другие тэги, содержащие некоторую информацию.
Тег <video> используется для того, чтобы вывести на страницу видеофайлы.
Атрибут src определяет путь к видео файлу.
Мультимедийные теги позволяют вывести аудио- и видео-файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.
Интерактивные теги.
В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:
Тег <menu> являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег <menu> в HTML5 выполняет роль контейнера для тега <command>, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.
Используя эти тэги, мы можем создавать различные интерактивные меню.
Тег <details> используется, чтобы показать некоторую дополнительную информацию, например, поле справки.
Тег <canvas> используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.
Атрибут ID используется для идентификации тега <canvas> как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст, заключенный между тегами <canvas>, будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.
Мы можем начать использовать новые возможности HTML5 уже сегодня. Некоторые простые приемы будут работать даже в старых браузерах. Если вы планируете построить новый веб-сайт, вы можете рассмотреть возможность применения HTML5, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.
Материал подготовлен порталом: WebMasterMix.ru
Источник
webmastermix.ru
Что такое HTML5?
HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.
- Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
- Тег Canvas для рисования контента непосредственно в браузере
- «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
Новый набор структурных элементов (тегов) в HTML5 видоизменяет способы структурирования HTML-документов. Новые структурные теги ориентированы на разделение HTML-документа на логические части. Название каждого структурного тега описывает тип контента, для хранения которого предназначен этот тег. Данная статья посвящена подробному описанию этих новых тегов.
История вопроса
В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).
HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.
HTML — это язык сценариев, который говорит Web-браузеру, каким образом следует представлять контент. Внутри контента могут присутствовать ссылки на другие документы, что обеспечивает удобный для пользователя метод навигации между документами в Интернете.
Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.
Первоначально назначение Интернета состояло в обслуживании простых текстовых документов. Первые браузеры были ориентированы исключительно на текст (другими словами, они не имели никаких затейливых окон — на экране присутствовал только текст). Даже добавление изображений стало весьма значительным достижением — в момент их первого появления. Сегодня люди выполняют в Интернете множество дел — от отправки посланий по электронной почте до просмотра телевизионных программ. Интернет уже превратился в нечто гораздо большее, чем механизм для транспортировки простых текстовых документов. Новые функции и новые способы использования породили новые трудности и новые задачи, для решения которых язык HTML никогда не предназначался.
Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.
Поддерживаемые браузеры
На момент написания данной статьи стандарт HTML5 еще не был выпущен официально. Большая часть контента в Web по-прежнему создается в соответствии со спецификацией HTML 4. Тем не менее, некоторые браузеры поддерживают спецификацию HTML5. Ситуация может оказаться непростой, поскольку каждый из этих браузеров способен поддерживать лишь некоторое подмножество функций HTML5. Перед созданием Web-сайта на базе HTML5 проверьте каждый из целевых браузеров на предмет поддержки функций, которые вы собираетесь использовать на своем сайте.
Обновленная декларация doctype
Вне зависимости от возможностей ваших целевых браузеров вы должны сообщать каждому браузеру, что хотите отображать своей контент с использованием спецификации HTML5. Это можно сделать с помощью декларации doctype.
Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.
Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.
Таблица 1. Doctype-декларации и их возможности
| Doctype-декларация | Возможности | Пример |
|---|---|---|
| HTML 4.01 strict | Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> |
| HTML 4.01 transitional | Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> |
| HTML 4.01 frameset | Аналогична декларации HTML transitional, но разрешает использование элементов frameset. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> |
| XHTML 1.0 strict | Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> |
| XHTML 1.0 transitional | Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> |
| XHTML 1.0 frameset | Аналогична декларации XHTML transitional, однако разрешает элементы frameset. | <DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> |
| XHTML 1.1 | Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> |
К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в листинге 1.
Листинг 1. HTML5-декларация doctype
<!DOCTYPE html>
Декларация должна находиться в самом начале HTML-документа, перед тегом <html>.
Новые структурные теги
Предпосылка создания новых структурных тегов — желание разделять Web-страницы на логические части с помощью элементов, описательные названия которых соответствуют контенту, который они содержат. С концептуальной точки зрения Web-страницу можно рассматривать как документ. Документы содержат заголовки, нижние колонтитулы, главы и различные другие условные обозначения, разделяющие документы на логические части.
В данном разделе на примере рассматриваются нынешние методы разделения HTML-документа. В последующих разделах статьи мы будем модифицировать первоначальный код с помощью структурных тегов HTML5 и в пошаговом режиме рассмотрим создание логической структуры документа.
Подход HTML 4
Даже если до этого вы создавали лишь простейшие HTML-документы, вы все равно знакомы с тегом div. В эпоху, предшествовавшую появлению HTML5, тег div являлся основным механизмом для создания блоков контента в HTML-документе. В качестве примера, в листинге 2 демонстрируется использование тегов div для создания простой страницы с заголовком, областью контента и нижним колонтитулом.
Листинг 2. Простая HTML-страница, использующая теги div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> A Simple HTML Page Using Divs </title> </head> <body> <div id='header'>Header</div> <div id='content'>Content</div> <div id='footer'>Footer</div> </body> </html>
Этот подход работает прекрасно; тег div— это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div. Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id, которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.
Подход HTML5
HTML5 решает эту проблему посредством предоставления набора теглв, которые точнее определяют основные блоки контента, образующего HTML-документ. Вне зависимости от итогового контента, отображаемого Web-страницей, большинство Web-страниц состоит из различных сочетаний типовых разделов и элементов страниц.
Код в листинге 2 создает простую страницу, которая имеет заголовок, область контента и нижний колонтитул. Эти, а также другие разделы и элементы страниц весьма распространены, поэтому спецификация HTML5 содержит теги, которые разбивают документы на типовые разделы и обозначают контент, содержащийся в каждом таком разделе. К числу новых тегов относятся следующие.
headersectionarticleasidefooternav
Остальная часть статьи посвящена описанию каждого из вышеперечисленных тегов. Кроме того, мы рассмотрим целевое использование этих тегов, для чего будем постепенно видоизменять первоначальный пример кода, созданного на базе тега div (см. листинг 2) с целью поэтапного задействования новых структурных тегов HTML5.
Тег header
Тег header предназначен для того, чтобы пометить раздел HTML-страницы как заголовок. В листинге 3 приведен пример кода из листинга 2, но уже с использованием тега header.
Листинг 3. Добавление тега header
<!DOCTYPE html> <html> <head> <title> A Simple HTML Page </title> </head> <body> <header>Header</header> <div id='content'>Content</div> <div id='footer'>Footer</div> </body> </html>
Элемент doctype в листинге 3 также был изменен — чтобы показать браузеру, что при отображении страницы он должен использовать HTML5. Во всех последующих примерах предполагается, что мы тоже используем корректный элемент doctype.
Тег section
Тег section предназначен для разбиения контента на существенные блоки. В определенном смысле его применение аналогично разбиению книги на главы. После добавления тега section к примеру кода мы получаем код, показанный в листинге 4.
Листинг 4. Добавление тега section
<!DOCTYPE html> <html> <head> <title> A Simple HTML Page </title> </head> <body> <header>Header</header> <section> <p> This is an important section of the page. </p> </section> <div id='footer'>Footer</div> </body> </html>
Тег article
Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в листинге 5.
Листинг 5. Добавление тегов article
<!DOCTYPE html> <html> <head> <title> A Simple HTML Page </title> </head> <body> <header>Header</header> <section> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> </section> <div id='footer'>Footer</div> </body> </html>
Тег aside
Тег aside указывает, что контент, который содержится внутри этого элемента, связан с основным контентом данной страницы, но не является его частью. В определенном смысле его применение аналогично внедрению комментария в тело текста (подобно данному комментарию). Контент в круглых скобках предоставляет дополнительную информацию об элементе, содержащем этот контент. После добавления тега aside к примеру кода мы получаем код, показанный в листинге 6.
Листинг 6. Добавление тега aside
<!DOCTYPE html> <html> <head> <title> A Simple HTML Page </title> </head> <body> <header>Header</header> <section> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> <aside> <p> This is an aside for the first blog post. </p> </aside> </article> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> </section> <div id='footer'>Footer</div> </body> </html>
Тег footer
Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в листинге 7.
Листинг 7. Добавление тега footer
<!DOCTYPE html> <html> <head> <title> A Simple HTML Page </title> </head> <body> <header>Header</header> <section> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> <aside> <p> This is an aside for the first blog post. </p> </aside> </article> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> </section> <footer>Footer</footer> </body> </html>
К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.
Тег nav
Контент, содержащийся в теге nav, предназначен для навигационных целей. После добавления тега nav к примеру кода мы получаем код, показанный в листинге 8.
Листинг 8. Добавление тега nav
<!DOCTYPE html> <html> <head> <title> A Simple HTML Page </title> </head> <body> <header>Header <nav> <a href='#'>Some Nav Link</a> <a href='#'>Some Other Nav Link</a> <a href='#'>A Third Nav Link</a> </nav> </header> <section> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> <aside> <p> This is an aside for the first blog post. </p> </aside> </article> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> </section> <footer>Footer</footer> </body> </html>
Итоговый вариант примера
В листинге 9 показан результат замены исходных тегов div новыми структурными тегами HTML5.
Листинг 9. Итоговый вариант примера
<!DOCTYPE html> <html> <head> <title> A Simple HTML Page </title> </head> <body> <header>Header <nav> <a href='#'>Some Nav Link</a> <a href='#'>Some Other Nav Link</a> <a href='#'>A Third Nav Link</a> </nav> </header> <section> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> <aside> <p> This is an aside for the first blog post. </p> </aside> </article> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> </section> <footer>Footer</footer> </body> </html>
Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов div (листинг 2) с результирующим вариантом (листинг 9) наглядно демонстрирует назначение новых структурных тегов.
Заключение
Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами div.
Ресурсы для скачивания
- этот контент в PDF
www.ibm.com
