Html5 main

tl; dr — используйте свой здравый смысл:)

В этой статье на сайте w3 есть хороший обзор того, что должно идти туда. Общая структура:

<body>   <header>  <!-- header content goes in here -->  </header>   <nav>  <!-- navigation menu goes in here -->  </nav>   <section id="sidebar1">  <!-- sidebar content goes in here -->  </section>   <main>  <!-- main page content goes in here -->  </main>   <aside>  <!-- aside content goes in here -->  </aside>   <footer>  <!-- footer content goes in here -->  </footer>  </body> 

Вариант 1 — <section> s

Далее они говорят, что <section> s, очевидно, может содержать несколько <articles>, но также можно разместить <section> внутри <article>
, например, для определения введения или сводки:

<article>  <section id="introduction">  </section>   <section id="content">  </section>   <section id="summary">  </section> </article> 

Таким образом, один из вариантов заключается в размещении <section id="content"> и <section id="terms"> внутри вашей статьи.

Вариант 2 — <footer> s

Кажется, что для этого типа контента используется <footer>. Вы сказали, что это только для автора, даты, категории, но w3 заявляет в своем spec для <footer>:

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

Ваш текст — это условия купона, который можно считать семантически похожим на данные об авторских правах. Думаю, это суждение.

Вариант 3 — <div> и другие…

В качестве выхода, в первой ссылке они также говорят о <div>
s:

Вы должны использовать [div], если нет другого подходящего элемента для группировки области содержимого…

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

<article>  Blah blah  <div class="terms"></div> </article> 

Резюме

Честно говоря, после всего этого, похоже, нет окончательного ответа, и сайты вряд ли станут сверхжесткими в том, как они семантически разбирают документы еще некоторое время, потому что они знают, что есть легионы людей, которые будут сделайте это совершенно неправильно. Если вы просто вставляете <p> с теми же терминами в конце каждой статьи, это, вероятно, не будет иметь никакого реального различия, потому что основной текст уникален.

Я лично думаю, что пока вы используете свой здравый смысл и выбираете то, что не полностью противоречит рекомендациям, вы не можете ошибаться.

qaru.site

Элемент main

Элемент должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.
Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента .
Ниже приводится пример представления главного содержимого страницы.


<body> <header> <div id="logo">Журнал Rocking Stone</div> <nav>…</nav> </header> <main role="main"> <h1>Гитары</h1> <p>Величайшие гитары современности</p> <article> <h2>Gibson SG</h2> <p>…</p> </article> <article> <h2>Fender Telecaster</h2> <p>…</p> </article> </main> </body>


Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).


Можно использовать только один элемент

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

Элемент article


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

<article> <header> <h1>Название статьи</h1> <p>Опубликовано: 13 февраля 2014</p> </header> <p> ... </p> </article>

Вы можете вкладывать элементы

 один в другой.    
о будет означать, что вложенные элементы связаны с внешним элементом .

<article> <header> <h1> Название статьи</h1> <p> Опубликовано: 13 февраля 2014</p> </header> <p>...</p> <p>...</p> <p>...</p> <section> <h2>Комментарии</h2> <article> <footer> <p>Автор: Джо Балок</p> </footer> <p>Это была интересная статья</p> </article> <article> <footer> <p> Автор: Кейси Брок</p> </footer> <p>Как ты связываешь это с мировым превосходством? </p> </article> </section> </article>

В этом примере мы использовали элемент

, чтобы выделить саму статью и каждый комментарий к ней. Такая схема вложенности позволяет отнести комментарии к тексту статьи.

Элемент section


Элемент используется для представления секции (группы) связанного контента. Его применение похоже на с главным отличием, что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы.
Рекомендуется использовать теги (

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

<article> <h1>Как использовать секционные элементы HTML5</h1> <p>...</p> <section> <h2>Элемент main</h2> <p>...</p> </section> <section> <h2>Элемент article </h2> <p>...</p> </section> <section> <h2>Элемент section</h2> <p>...</p> </section> ... </article>

Здесь мы использовали элемент

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

Элемент nav


Элемент используется для разметки группы ссылок на внешние страницы или разделы внутри текущей страницы. Он хорошо подходит как для основной навигации по сайту, так и по оглавлению или постам.

<nav> <ul> <li><a href="#chapter-one">Глава первая</a> <li><a href="#chapter-two">Глава вторая</a> <li><a href="#chapter-three">Глава третья</a> </ul> </nav>

Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента

.

Элемент aside


Элемент используется для выделения содержания, непосредственно связанного с окружающим контентом, но которое может рассматриваться и отдельно.
о могут быть боковые сноски (как в книгах), группы элементов , цифры или цитаты.

<article> <header> <h1>Компания Google покупает Nest</h1> <p>Опубликовано: 13 января 2014</p> </header> <p>...</p> <p>...</p> <aside> <h1>Google (GOOG)</h1> <p>Компания Google была основана в 1998 году Ларри Пейджем и Сергеем Брином. Компания ...</p> </aside> </article>

В этом примере мы использовали элемент

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

Элемент header


Элемент используется для представления вводной части к статье или веб-странице. Обычно он содержит заглавие или какие-либо метаданные, относящиеся к данному контенту, например, дата публикации статьи или оглавление (внутри элемента ) для более длинного документа.
Элемент будет связан с ближайшим секционным элементом, обычно это прямой родитель в структуре страницы.

<header> <h1>Компания Google покупает Nest</h1> <p>Опубликовано: 13 января 2014</p> </header>

В этом примере элемент

 содержит заголовок и дату публикации новостной статьи.

Элемент footer


Элемент используется для представления такой информации о разделе, как автор, авторские права, ссылки на связанные веб-страницы.

<footer> Copyright Matt West 2014 </footer>

Так же как

, элемент связан с ближайшим секционным элементом.

Элемент address


Элемент один из самых неправильно используемых элементов в HTML. Этот элемент предназначен не для разметки почтового адреса, а для представления контактной информации по статье или веб-странице. Это могут быть ссылки на сайт автора или его электронный адрес.

<address> Контакты <a href="mailto:matt@example.com">Matt West</a> </address>

Этот элемент часто используется внутри элемента

, который в свою очередь располагается внутри элемента .

<article> <header> <h1>Компания Google покупает Nest</h1> <p>Опубликовано: 13 января 2014</p> </header> <p>...</p> <p>...</p> <footer> <address> Автор <a href="mailto:matt@example.com">Matt West</a> </address> <p>Copyright Matt West 2014</p> </footer> </article>

Заключение

В этом посте вы узнали как использовать секционные элементы HTML5 для разметки веб-страниц. Использование таких элементов имеет ряд преимуществ.
Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.



Примечание: Пока еще не все скринридеры имеют поддержку семантических элементов. Чтобы обезопасить себя, вы можете продолжать использовать роли ARIA.


Использование секционных элементов также помогает разработчикам больше задумываться о структуре своих веб-страниц.
Хотя выбор секционного элемента и очевиден, но он порождает важные вопросы о назначении и цели контента, а также, помогает понять, а относится ли вообще содержимое к этой странице?
Это пример того, как веб-стандарты помогают не только улучшить качество разметки, но и качество веб-страницы в целом.

habr.com

HTML5 новые тэги time, figure, video, audio, canvas

Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.


Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.

Тэги header и footer

Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.

По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.

Можно, например, типичную запись:

<div id="header">
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</div>

переписать по-новому так:

<header>
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</header>

И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:

header, footer, nav, article {display: block;}

Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.

Тэг nav

nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.

Тэг aside

aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

Тэг section

section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.

Тэг article

article — служит для разбивки страницы на отдельные статьи.

Оба тэга section и article обладают рядом интересных особенностей.

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

Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:

<section>
<article>
<section></section>
<section></section>
</article>
<article>
<section></section>
<section></section>
</article>
</section>

Тэг hgroup

hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

<hgroup>
<h1>Самый сайт</h1>
<h3>Здесь описание Самого сайта</h3>
</hgroup>

UPD 24.02.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

www.websovet.com

Значение и применение

Тег <main>html5 предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только один раз в одном документе.

Пример размещения тега <main> на странице.
Пример размещения тега <main> на странице.

Обращаю Ваше внимание, что тег <main>html5 не должен быть потомком таких блоков как (не должен быть вложен в них):

  • Тег <nav>html5 (навигация).
  • Тег <header>html5 (верхний колонтитул).
  • Тег <footer>html5 (нижний колонтитул).
  • Тег <aside>html5 (отступление).
  • Тег <article>html5 (статья).

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.
Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».

Пример использования

 <!DOCTYPE html> <html> 	<head> 		<title>Пример разметки страницы с использованием элемента <main></title> 	</head> <body> 	<main> 		<figure> 			<img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> 			<figcaption>Ничоси 1</figcaption> 		</figure> 		<figure> 			<img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> 			<figcaption>Ничоси 2</figcaption> 		</figure> 	</main> 	</body> </html> 

Результат нашего примера:

Пример разметки страницы с использованием элемента <main>.
Пример разметки страницы с использованием элемента <main>.

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

 <!DOCTYPE html> <html> 	<head> 		<title>Разметка страницы</title> 	</head> 	<body> 		<header style = "background-color:khaki; height:100px"> 			<p>Верхний колонтитул (тег <header>)</p> 		</header> 		<nav style = "background-color:coral; height:75px"> 			<a href = "#">Ссылка 1</a> | 			<a href = "#">Ссылка 2</a> | 			<a href = "#">Ссылка 3</a> | 		<p>Панель навигации (тег <nav>)</p> 		</nav> 		<aside style = "float:right; width:200px; height:250px; background-color:tan"> 			<p>Справа мы разместили тег <aside></p> 		</aside> 		<main style = "height:250px"> 			<h1>Главный заголовок сайта</h1> 			<p>Основное содержимое (тег <main>)</p> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 1 (тег <section>)</p> 			</section> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 2 (тег <section>)</p> 			</section> 		</main> 		<footer style = "background-color:khaki; height:80px"> 			<p>Нижний колонтитул (подвал) тег <footer></p>  			<address>Пример с сайта basicweb.ru</address> 		</footer> 	</body> </html> 

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header>html5 (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav>html5 (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>html5, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
  • Добавили на страницу элемент <main>html5 в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main>html5 мы добавили два тематических раздела (тег <section>html5), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer>html5 (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5

Разметка страницы на HTML 5.

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

basicweb.ru

Описание HTML5-элементов

  • Содержание:
  • 1. Элемент <header>
  • 2. Элемент <nav>
  • 3. Элемент <article>
  • 4. Элемент <section>
  • 5. Элемент <aside>
  • 6. Элемент <footer>
  • 7. Элемент <address>
  • 8. Элемент <main>
  • 9. Элемент <figure>
  • 10. Элемент <figcaption>
  • 11. Элемент <time>
  • 12. Элемент <mark>
  • 13. Элемент <bdi>
  • 14. Элемент <wbr>
  • 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header>   <h1>Site description</h1>   <nav>   <ul>   <li><a href="">About</a>   <li><a href="">Forum</a>   <li><a href="">Download</a>   </ul>   </nav>  </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>   <h1>Заметки о природе</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>  <section>   <h1>Исторические заметки</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside>   <h2>...</h2>   <p>...</p>  </aside>
<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

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

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

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <li><a href="#app">Внешний вид</a></li>   <li><a href="#temp">Характер</a></li>   </ul>   </nav>   </header>   <section id="basic">   <h3>Разновидности</h3>   <p>...</p>   </section>   <section id="app">   <h3>Внешний вид</h3>   <p>...</p>   </section>   <section id="temp">   <h3>Характер</h3>   <p>...</p>   </section>   <footer>   <a href="#basic">Разновидности</a>   <a href="#app">Внешний вид</a>   <a href="#temp">Характер</a>   </footer>   </section>   </main>   <footer>   <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>   </footer>  </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.

14. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru

Browser Support

While main is new, most browsers support unrecognized tags. However, you will need to apply a block style in your CSS, i.e.

main  {  	display: block  }  

This is may become unnecessary as browsers evolve (main is supported in Chrome and Firefox nightly builds), but there’s little harm retaining it.

The element’s also been added to the html5shiv so it will work in IE6, 7 and 8. You may need to download the new version if you’re using a locally-hosted file.

www.sitepoint.com

Что нового в HTML 5.2?

От автора: Меньше месяца назад HTML 5.2 стал официальной рекомендацией W3C (REC). Когда спецификация доходит до этапа REC, это значит, что она получила поддержку членов W3C и директора, и W3C официально рекомендует ее реализацию в браузерах, а также внедрение в веб-страницы авторами.

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

Новые функции

Нативный элемент dialog

Больше всего я ждал появления тега dialog — нативное диалоговое окно. Диалоговые окна очень популярны в вебе, но реализации иногда разные. Диалоговые окна сложно сделать доступными, что привело к тому, что большая часть диалоговых окон в интернете не работает у пользователей, которые используют визуальную навигацию по сайту.

Новый тег dialog должен поправить ситуацию, предоставив простой способ создания модального диалогового окна, не думаю о множестве узких моментов. Я напишу отдельную подробную статью о работе этого элемента, а здесь рассмотрим основы.

Диалоговое окно создается с помощью тега dialog.

По умолчанию диалоговое окно скрыто из виду (и из DOM), пока не будет применен атрибут open.

Атрибут open можно переключать, вызывая методы show() и close(), доступные на любом HTMLDialogElement.

Тег dialog уже поддерживается в Chrome, в Firefox поддержка по флагу.

Использование Payment Request API из iFrame

Payment Request API – нативная альтернатива форм оформления заказов. Ее цель – предоставить стандартизированный и однообразный метод проведения платежей в интернете для пользователей, переместив обработку получения информации о платеже в браузер, а не как сейчас, когда у каждого сайта своя форма оформления заказа.

До HTML 5.2 запросы по платежам нельзя было посылать из iframe’ов, вставленных в документ. Сторонние вставные решения по оплате (Stripe, Paystack) просто не могли использовать это API, так как их интерфейс оплаты обрабатывался только внутри iframe.

HTML 5.2 представил атрибут allowpaymentrequest. Примененный к iframe, он позволяет использовать Payment Request API, пока пользователь находится на веб-странице хостинга.

Размеры для иконок Apple

Для определения иконки страницы мы используем <link rel=»icon»> в шапке документа. Для задания размеров иконок используется атрибут sizes.

Использовать этот атрибут не обязательно, но он позволяет браузерам самим решать, какой размер иконки использовать на разных размерах. В частности, у всех устройств свой оптимальный размер иконок.

До HTML 5.2 атрибут sizes был валиден только, если связь в link была icon. Однако Apple устройства под управлением iOS не поддерживают атрибут sizes. Поэтому Apple представила специальную связь для своих устройств appple-touch-icon, которую можно использовать для определения используемой иконки на устройствах.

В HTML 5.2 спецификация позволяет использовать атрибут sizes со связью apple-touch-icon, а не только icon. Это позволит загружать иконки разных размеров на разные устройства Apple. Насколько мне известно, устройства Apple до сих пор не поддерживают атрибут sizes. Это изменение будет полезно, когда появится поддержка.

Новые валидные практики

Помимо новых функций HTML 5.2 одобрили некоторые практики написания HTML, которые ранее считались невалидными.

Несколько элементов main

Элемент main представляет основной контент веб-страницы. Повторяющийся на нескольких страницах контент можно поместить в header, section и другие теги, а тег main предназначен для контента, который специфичен и уникален для определенной страницы. Поэтому до HTML 5.2 тег main должен был быть уникальным в DOM для страницы, чтобы пройти валидацию.

С распространением одностраничных приложений придерживаться этого правила сложно. Могут быть ситуации, когда в DOM много тегов main, но только один показывается пользователю в определенный промежуток времени.

В HTML 5.2 теперь можно использовать несколько тегов main в разметке, но только один должен быть виден пользователю в любое время. Все дополнительные теги необходимо прятать через атрибут hidden.

Как мы знаем, в CSS есть несколько способов спрятать элемент. Но все дополнительные теги main нужно прятать именно через атрибут hidden. Любые другие методы скрытия элемента (например, display: none; или visibility: hidden;) будут невалидны.

Стили в body

Обычно инлайновый CSS, определенный через тег style, размещается внутри head документа. По мере роста компонентной разработки разработчики стали писать и помещать стили прямо в элементы, к которым они относятся.

В HTML 5.2 теперь можно определять блок style в любом месте внутри тега body. То есть теперь стили можно размещать ближе к тому месту, где они используются.

Тем не менее, стоит отметить, что стили лучше размещать внутри head для улучшения производительности. Из спецификации: «Элемент style желательно использовать в теге head документа. Использование style внутри body может привести к повторному применению стилей, вызвать повторную сборку макета и/или перерисовку. Поэтому его следует использовать осторожно.»

Заголовки в legend

В формах тег legend представляет подпись к полям формы внутри fieldset. До HTML 5.2 контент легенды был просто чистым текстом. Сейчас в него можно включать заголовки.

Особенно полезно, когда необходимо использовать тег fieldset для группировки разных секций формы. В таких ситуациях идеально подходят заголовки, они упростят навигацию по секциям формы.

Удаленные функции

Из HTML 5.2 было удалено несколько элементов:

Новые невалидные практики

Некоторые практики разработки стали невалидны.

Никаких инлайновых, обтекающих или блоковых дочерних элементов в <p>

В HTML 5.2 дочерними элементами тега <p> могут выступать только фразы. То есть следующие типы тегов больше нельзя вкладывать в параграф:

webformyself.com

Давно мы не видели новых элементов HTML5, до этого момента было всего лишь девять новых структурных тегов, и они были стабильными на протяжении нескольких лет, это:  section article aside hgroup header footer nav figure  и figcaption .  Есть еще около двадцати элементов для содержания, а именно  video audio canvas progress  и т.д.

Сегодня мы встречаем новый структурный элемент: <main> . Согласно  :

Элемент является главным для содержания в теле документа или приложения.
Авторы не должны использовать более одного элемента <main> в документе.

Авторы не должны применять элемент <main> для дочерний статьи, колонтитула, заголовка или навигационных элементов.

Тег main можно использовать в шаблоне, теме или в макете перед content, wrapper: он заменит теги, такие как <div id="main"> , <div id="page"> или <div id="wrapper"> . Если вы используете ARIA, тогда применить элемент <main> , где определяется role="main"

   <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Новый тег HTML5 main</title> </head> <body> 	<header>Имя приложения</header> 	<nav> 		<a href= http://www.pixelcom.crimea.ua/"#">Главная</a> 	</nav> 	<main> 		<article> 			<h1>Статьи</h1> 			<p>Содержание</p> 		</article> 		<aside> 			<p>Новости</p> 		</aside> 	</main> 	<footer>Copyright 2013</footer> </body> </html>   

www.pixelcom.crimea.ua


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector