Тег article – Тег article, независимый раздел — Структура HTML-документа — HTML Academy

Содержание

Тег | HTML справочник

HTML теги

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

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

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение). Внутри тега <article> могут содержаться другие одноименные элементы с близким по смыслу содержимым.

<article> <!-- начало основной статьи -->
	<h2>Статьи о птицах</h2><!-- заголовок первого уровня (если был использован в документе, то h3, а во вложенных h4) -->
	<p>Вводная информация о птицах...</p>
	<article> <!-- начало первой вложенной статьи -->
		<h3>Статья о воробье</h3> 
		<p>Информация про воробьев...</p>
	</article> <!-- конец первой вложенной статьи -->
	<article> <!-- начало второй вложенной статьи -->
		<h3>Статья о синице</h3>
		<p>Информация про синиц...</p>
	</article><!-- конец второй вложенной статьи -->
</article> <!-- конец основной статьи -->
Пример размещения тега <article> на странице.

Совместное использование тегов <section> и <article>

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article> использовать тег <section> (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article> и вложенные элементы <section> имели в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение внутри <article>).

Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article> внутрь элементов <section>, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

Пример размещения тега <article> внутри <section>.

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

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

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

Поддержка браузерами

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

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки 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">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<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> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье "Плавающие элементы".
  • Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

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

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

Значение CSS по умолчанию

article {
display: block;
}

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

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

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги

| HTML | WebReference

Элемент <article> (от англ. article — статья) представляет собой независимый фрагмент веб-страницы и, как правило, включает «шапку», основное содержимое и «подвал», в которых располагаются такие части, как заголовок, текст, имя автора, дата публикации, метки, рейтинг статьи и др. <article> обычно применяется для статей сайта, сообщений блога и форума, комментариев.

Внутри <article> запрещено использовать элемент <main>.

Каждый элемент <article> обязательно должен содержать заголовок через <h2>,…,<h6>. Минимальная структура элементов продемонстрирована ниже.

<article>
  <h2>Заголовок</h2>
  <p>Текст статьи</p>
</article>

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>article</title>
 </head> 
 <body>
  <article>
   <header>
     <h2>Следы невиданных зверей</h2>
   </header>
   <p>История о том, как возле столовой появились загадочные розовые 
    следы с шестью пальцами, и почему это случилось.</p>
  </article>
 </body> 
</html>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML



Элемент <article> (от англ. "article" ‒ «статья, раздел») применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. <Article> используется для группировки записей — публикаций, статей, записей блога, комментариев. Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение). Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.

Примечание: Информация об авторе элемента <article> может быть представлена через элемент <address>, но это условие неприменимо к вложенным элементам <article>.

Синтаксис

<article>...</article>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <article> со следующими значениями CSS по умолчанию:

article { 
    display: block;
}

Различия между HTML 4.01 и HTML5

Элемент <article> является новым в HTML5.

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

Элемент <article>

Пример HTML:

Попробуй сам
<article>
  <header>
    <h3>Заголовок</h3>
  </header>
  <p>Основной контент...</p>
  <footer>
  Опубликовано <time datetime="2018-05-17 19:00">17 мая</time> И. Иванов.
  </footer>
</article>

Спецификации

Поддержка браузерами

Элемент
<article> 9+ 5+ 11.10+ Да 4.1+ 4+
Элемент
<article> 2.2+ 4+ 11+ 5+


Как правильно использовать теги div, section и article.

Вы здесь: Главная - HTML - HTML 5 - Как правильно использовать теги div, section и article.

Как правильно использовать теги div, section и article.

Всем привет! В этой статье мы рассмотрим,

как правильно использовать теги div, section и article в HTML5.

Помимо всем известного и очень часто используемого тега div, в HTML5 появились новые, семантические теги, которые позволяют более четко разделить контент на вашем сайте и тем самым помочь поисковым роботам в их нелегкой работе. Однако, к сожалению, многие верстальщики еще не научились их использовать правильно, особенно те, которые обозначены в начале статьи. Надеюсь, что после прочтения данной статьи вопросы по этому поводу, если и не пропадут совсем, то их станет, как минимум, меньше. Итак, приступим.

Div

Если вы откроете сайт W3C, то можете найти там рекомендацию, смысл которой заключается в том, что использовать данный тег нужно для семантически несвязанного между собой контента. Очень часто div используют для того, чтобы сгруппировать какой-нибудь контент, который затем нужно спозиционировать или как-то оформить с помощью css.

Section

Данный элемент используется, наоборот, для семантически связанного между собой контента. Содержимое такого тега должно обладать общей темой. К примеру, новости на новостном сайте:

<section>
  <h2>Последние новости</h2>
  ...
</section>

Article

Этот элемент также должен обладать общей темой и содержать семантически связанный между собой контент, однако этот самый контент должен быть автономен, т.е. вы можете взять отдельный article, убрать его со страницы, но при этом смысл содержимого внутри него не потеряется. Все на том же примере новостного сайта можно сказать, что каждая отдельная новость будет выделена тегом article, т.к., если изолировать ее со страницы, она не потеряет смысл, но все новости вместе будут обрамлены тегом section, т.к. это отдельный большой блок с общей темой, и он не может быть изолирован. Согласитесь, если мы оставим на странице просто блок с новостями, он будет "не к месту", а если оставим одну конкретную новость, то все будет вполне логично.

Конечно, все зависит от конкретной ситуации, но чаще всего вы можете разметить свою страницу правильно, используя следующее правило: если контент семантически связан между собой и может быть изолирован со страницы без потери смысла, то используйте article. Если не может быть изолирован со страницы без потери смысла, используйте section. В остальных случаях – div.

Итак, на этом все. Надеюсь, что данная тема вам ясна и теперь вы будете размечать ваши интернет-странички грамотно. Спасибо за внимание и удачи!

  • Как правильно использовать теги div, section и article. Создано 02.11.2015 13:58:49
  • Как правильно использовать теги div, section и article. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Вы знаете эти 8 HTML5 тегов?

Вы знаете эти 8 HTML5 тегов?

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

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

Немного про интерпретацию

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

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

Контекстное выделение с помощью mark

В спецификации mark говорится, что этот тег должен использоваться для обозначения релевантности или привлечения внимания. Что такое релевантность сложно объяснить. Теги и текст релевантны, когда мы что-то делаем на сайте и они нам полезны именно в этот момент (или могут понадобиться в будущем).

Вы знаете эти 8 HTML5 тегов?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

К примеру, если вы искали сайт по запросу «jQuery», и вам выпало несколько статей, то результаты поиска можно обернуть тегом mark. Цель тега mark это сказать браузеру «Эй, вот эта штука на сайте подходит под то, что ты сейчас делаешь».

Практические примеры

Тег mark можно использовать для выделения релевантного контента. Чтобы проиллюстрировать пример, рассмотрим следующий сценарий: Мы открыли страницу «Самые дешевые туры». На странице расположена сетка из туров, отсортированных по цене. Туры расставлены по увеличению цены: сверху от самых дешевых и вниз к самым дорогим.

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

<section> <article> <h3>Vanuatu Cruise</h3> <p><mark>$499</mark>- 5 Nights</p> <p>A relaxing cruise around the southern most parts of Vanuatu</p> </article> <article> <h3>Fiji Resort Getaway</h3> <p><mark>$649</mark> - 6 Nights</p> <p>Includes all you can eat buffet and entertainment</p> </article> <article> <h3>Pacific Island Hiking</h3> <p>$1199 - 5 Nights</p> <p>Hike your way though several pacific islands on this exercise focused holiday</p> </article> </section>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<section>

  <article>

    <h3>Vanuatu Cruise</h3>

    <p><mark>$499</mark>- 5 Nights</p>

    <p>A relaxing cruise around the southern most

    parts of Vanuatu</p>

  </article>

  <article>

    <h3>Fiji Resort Getaway</h3>

    <p><mark>$649</mark> - 6 Nights</p>

    <p>Includes all you can eat buffet and

    entertainment</p>

  </article>

  <article>

    <h3>Pacific Island Hiking</h3>

    <p>$1199 - 5 Nights</p>

    <p>Hike your way though several pacific islands

    on this exercise focused holiday</p>

  </article>

</section>

У первых двух результатов цена (которая нам важна) обернута в тег mark. А третий тур, более дорогой, не подсвечен, так как он не релевантен в отличие от двух первых.

Лучшие практики и основные аспекты

Люди в большей своей массе думают, что с помощью этого тега можно быстро что-то выделить, но его назначение не в этом. Его нельзя использовать просто для стилизации, для этого есть другой тег span. Не используйте этот тег для выделения важности текста или чтобы подчеркнуть силу – для этого есть тег strong. Используйте mark, когда хотите показать что-то релевантное конкретному пользователю. Заметка по поводу доступности – подсветка mark отображается в браузере в режиме высокой контрастности Windows.

Уменьшаем важность с помощью small

Вы, скорее всего, раньше уже использовали тег small. Он делает точно то, о чем вы подумали – уменьшает текст. Браузер может уменьшить текст с помощью тега small, но на самом деле это, скорее, побочный продукт данного элемента, а не семантическое значение.

В спецификации small говорится, что этот тег необходимо использовать для уменьшения важности текста или информации. Браузер же интерпретирует данное назначение простым уменьшением шрифта – меньший текст оказывает меньшее влияние.

Данный тег необходимо использовать для подчеркивания меньшей важности текста. Информация меньшей важности обычно используется в футере веб-сайта или в сайдбаре (подальше от основного контента).

Практические примеры

В целом, тег small говорит браузеру «Именно вот этот контент по большому счету не так важен». К примеру, в футере тег можно использовать для выделения авторского права:

<footer> <small> Designed and developed by Simon Codrington. </small> <small> &copy; 2016 My Company - All rights reserved </small> </footer>

<footer>

  <small>

    Designed and developed by Simon Codrington.

  </small>

  <small>

    &copy; 2016 My Company - All rights reserved

  </small>

</footer>

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

<section> <article> <h4>Woolen Llama Print Jumper</h4> <em>$65.99</em><small> - Excludes tax</small> <p> A warm, woolly jumper made from 100% llamas. You will love the warmth. </p> <button>Add to cart</button> </article> </section>

<section>

  <article>

    <h4>Woolen Llama Print Jumper</h4>

    <em>$65.99</em><small> - Excludes tax</small>

    <p>

      A warm, woolly jumper made from 100% llamas.

      You will love the warmth.

    </p>

    <button>Add to cart</button>

  </article>

</section>

В общем, если вы хотите уменьшить важность чего-либо, используйте тег small. Не используйте его для простого уменьшения размера.

Лучшие практики и основные аспекты

Нельзя понизить важность или выделение контента, если к нему применены теги strong или em. Тег small изменит визуальную составляющую элемента (в зависимости от браузера), но не затронет семантику.

Цитирование с помощью q и blockquote

Вы скорее всего используете стилизованные div или span для выделения цитат, но лучше использовать q или blockquote. Оба тега предназначены для внешнего цитирования (когда вы что-то цитируете), однако принцип использования у них отличается.

По спецификации тег q нужно использовать для выделения «короткой строчной цитаты» в тексте. А тег blockquote используется для больших кусков текста. На практике же тег q используется для маленьких цитат, а blockquote для всех остальных. Помните, что теги нужно использовать только для цитат или ресурсов. Данные теги нельзя использовать для стилизации (для этого есть span).

Практические примеры

Рассмотрим, как можно использовать оба тега. Если у вас есть маленькая цитата, используйте q:

<div> <h3>Try our latest sandwich!</h3> <p>Come and try our latest, biggest and tastiest sandwich. John Smith told us <q>he hasn't eaten anything as good in his whole life!</q></p> </div>

<div>

  <h3>Try our latest sandwich!</h3>

  <p>Come and try our latest, biggest and tastiest

  sandwich. John Smith told us <q>he hasn't eaten

  anything as good in his whole life!</q></p>

</div>

Если цитата больше или более сложная, ее можно обернуть тегом blockquote:

<div> <blockquote cite="http://bit.ly/1pbvjsL"> Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth. <cite>Bradley Whitford - Author</cite> </blockquote> </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div>

  <blockquote

    cite="http://bit.ly/1pbvjsL">

      Infuse your life with action.

      Don't wait for it to happen.

      Make it happen. Make your own

      future. Make your own hope.

      Make your own love. And

      whatever your beliefs, honor

      your creator, not by passively

      waiting for grace to come down

      from upon high, but by doing

      what you can to make grace

      happen... yourself, right now,

      right down here on Earth.

    <cite>Bradley Whitford - Author</cite>

  </blockquote>

</div>

В примере выше длинную цитату мы положили в тег blockquote и использовали атрибут cite (ссылка на ресурс) и тег cite (описание ресурса).

Лучшие практики и основные аспекты

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

Вставка, удаление и исправление с помощью ins, del, и s

Теги ins, del и s полезны, когда вы работаете с контентом, который был изменен или же было изменена его релевантность. Тег ins применяется к тексту, который был недавно добавлен в документ – новый контент. Данный тег можно использовать для выделения добавленного текста или для выделения текста, чья релевантность была изменена.

Тег del применяется к удаленному из документа тексту – удаленный контент. Даже если вы выделяете удаленный контент, он все еще существует в документе в виде записи о том, что было удалено.

Вы знаете эти 8 HTML5 тегов?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

У этих двух тегов есть необязательный атрибут cite, который используется для добавления ссылки, где объясняются все изменения. Также есть атрибут datetime, где указывается, когда были произведены изменения. Дата должна быть задана в виде строки времени, которую, к сожалению, не так просто понять. Можно схитрить и воспользоваться timestamp generator.
Эти атрибуты полезны, если вы хотите указать контекст добавления или удаления чего-либо. Увидеть их можно в логах обновлений и списке изменений, где автор перечисляет все изменения и подробности.

Принцип работы тега s почти тот же, но вместо выделения текста, который больше неправильный, тег используется для того, чтобы браузер понял, что выделенный текст больше не релевантен, и, как правило, за ним идет текст замены (к примеру, новый контент в теге ins). Часто данный тег на страницах можно узнать по зачеркнутому тексту. Но его нельзя использовать только лишь для стилизации (для этого есть span).

Практические примеры

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

<h3>Latest Changes</h3> <p>Outlined below are the latest changes</p> <h4>Version 1.X branch</h4> <ins cite="http://www.johnsmithsblog/changes/1-0-1.html" timestamp="2012-08-09T15:15:00+00:00"> Version 1.0.1 - August 2012 </ins> <br/> <ins cite="http://www.johnsmithsblog/changes/1-0-2.html" timestamp="2012-11-15T06:15:00+00:00"> Version 1.0.2 - November 2012 </ins> <br/> <h4>Version 2.X branch</h4> <ins cite="http://www.johnsmithsblog/changes/2-0-0.html" timestamp="2013-01-17T02:50:00+00:00"> Version 2.0.0 - January 2013 </ins> <br/>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<h3>Latest Changes</h3>

<p>Outlined below are the latest changes</p>

<h4>Version 1.X branch</h4>

<ins

  cite="http://www.johnsmithsblog/changes/1-0-1.html"

  timestamp="2012-08-09T15:15:00+00:00">

    Version 1.0.1 - August 2012

</ins>

<br/>

<ins

  cite="http://www.johnsmithsblog/changes/1-0-2.html"

  timestamp="2012-11-15T06:15:00+00:00">

    Version 1.0.2 - November 2012

</ins>

<br/>

<h4>Version 2.X branch</h4>

<ins

  cite="http://www.johnsmithsblog/changes/2-0-0.html"

  timestamp="2013-01-17T02:50:00+00:00">

    Version 2.0.0 - January 2013

</ins>

<br/>

В другом примере тег del используется в приложении для заметок. Тег применяется в тех случаях, когда контент больше не существует на странице (и он не был заменен чем-либо).

<ul> <li> <del datetime="2015-12-03T13:21:32+00:00"> Pick up the groceries </del> </li> <li> <del datetime="2015-12-03T15:15:00+00:00"> Collect the kids from school </del> </li> <li> Cook dinner </li> <li> Work on fancy side projects </li> </ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<ul>

  <li>

    <del datetime="2015-12-03T13:21:32+00:00">

      Pick up the groceries

    </del>

  </li>

  <li>

    <del datetime="2015-12-03T15:15:00+00:00">

      Collect the kids from school

    </del>

  </li>

  <li>

    Cook dinner

  </li>

  <li>

    Work on fancy side projects

  </li>

</ul>

Видно, что две задачи выполнены, и они были вычеркнуты с помощью тега del. Так мы показываем пользователю и браузеру, что контент больше не существует. Обоим пунктам был добавлен атрибут datetime , с помощью которого записывается дата выполнения задач. Тег s лучше всего использовать, когда контент был удален а затем обновлен, к примеру, во время редактирования документа:

<article> <h2>WordPress 4.4 Updates</h2> <section aria-label="Summary"> WordPress 4.4 (code-named <s cite="https://codex.wordpress.org/Version_4.4"> Bobby Brown </s> Clifford Brown) was released to the public on the 8th of December 2015. </section> <section aria-label="Main Content"> <p>There were several changes in V4.4 including the following</p> <ul> <li> New default theme - <s>Twenty Fifteen</s> Twenty Sixteen </li> <li> Responsive image support (image elements in the content now support display based rendering) </li> <li> Additional embed object support such as Cloudup, Reddit Comments etc </li> </ul> </section> </article>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<article>

  <h2>WordPress 4.4 Updates</h2>

  <section aria-label="Summary">

    WordPress 4.4 (code-named

      <s cite="https://codex.wordpress.org/Version_4.4">

        Bobby Brown

      </s> Clifford Brown) was released

      to the public on the 8th of December 2015.

  </section>

  <section aria-label="Main Content">

    <p>There were several changes in V4.4

    including the following</p>

    <ul>

      <li>

        New default theme -

        <s>Twenty Fifteen</s>

        Twenty Sixteen

      </li>

      <li>

        Responsive image support (image elements

        in the content now support display based

        rendering)

      </li>

      <li>

        Additional embed object support such as

        Cloudup, Reddit Comments etc

      </li>

    </ul>

  </section>

</article>

В примере выше мы внесли небольшие исправления, указывая URL в теге s где это возможно.

Упорядочивание вариантов с помощью optgroup

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

Тег optgroup должен быть внутри select и у него должно быть два атрибута: label – название, которое видно, когда список раскрыт, и атрибут disabled, который нужен, когда в списке нельзя выбрать ни один из элементов. Сам тег optgroup нельзя выбрать и стилизовать (по крайней мере, чтобы это было кроссбраузерно).

Практические примеры

optgroup отлично работает в любом случае, когда используется тег select. К примеру, рассмотрим список цен на компьютеры в интернет-магазине.

<label for="comp-price-filter"> Select the price range of your next computer </label> <select name="comp-price-filter" > <optgroup label="Low End"> <option value="100-300">$100 - $300</option> <option value="301-500">$301 - $500</option> <option value="501-700">$501 - $700</option> </optgroup> <optgroup label="Middle Range"> <option value="701-1200">$701 - $1200</option> <option value="1201-1600">$1201 - $1600</option> </optgroup> <optgroup label="High End"> <option value="1600-2500">$1600 - $2500</option> <option value="2501-3200">$2501 - $3200</option> </optgroup> </select>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<label for="comp-price-filter">

  Select the price range of your next computer

</label>

<select

  class="price-filter"

  name="comp-price-filter"

  id="comp-price-filter">

  <optgroup label="Low End">

    <option value="100-300">$100 - $300</option>

    <option value="301-500">$301 - $500</option>

    <option value="501-700">$501 - $700</option>

  </optgroup>

  <optgroup label="Middle Range">

    <option value="701-1200">$701 - $1200</option>

    <option value="1201-1600">$1201 - $1600</option>

  </optgroup>

  <optgroup label="High End">

    <option value="1600-2500">$1600 - $2500</option>

    <option value="2501-3200">$2501 - $3200</option>

  </optgroup>

</select>

Ниже приведен пример с атрибутом disabled, когда нельзя выбрать ни один из пунктов категории (но людей это не сильно остановит, они могут просто удалить его из верстки, так что не особо полагайтесь на него). В примере ниже вы не сможете выбрать пункты в разделе «West Coast – Australia».

<label for="vacation-dest">Vacation Destinations</label> <select name="vaction-dest"> <optgroup label="East Coast - Australia"> <option value="NSW"> New South Wales </option> <option value="QLD"> Queensland </option> <option value="TAS"> Tasmania </option> <option value="ACT"> Australian Capital Territory </option> <option value="VIC"> Victoria </option> </optgroup> <optgroup disabled label="West Coast - Australia"> <option value="WA"> Western Australia </option> <option value="NT"> Northern Territory </option> <option value="SA"> South Australia </option> </optgroup> </select>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<label for="vacation-dest">Vacation Destinations</label>

<select name="vaction-dest">

  <optgroup label="East Coast - Australia">

    <option value="NSW">

      New South Wales

    </option>

    <option value="QLD">

      Queensland

    </option>

    <option value="TAS">

      Tasmania

    </option>

    <option value="ACT">

      Australian Capital Territory

    </option>

    <option value="VIC">

      Victoria

    </option>

  </optgroup>

  <optgroup disabled label="West Coast - Australia">

    <option value="WA">

      Western Australia

    </option>

    <option value="NT">

      Northern Territory

    </option>

    <option value="SA">

      South Australia

    </option>

  </optgroup>

</select>

Предварительно заданные опции с помощью datalist

Одна из самых крутых вещей у тега select, как и у radio / checkbox инпут типов это то, что он ограничивает количество возможных предварительно заданных опций пользователями.

Теперь для различных input’ов можно использовать тег datalist для создания подходящего списка опций. В разных браузерах данный компонент выглядит немного по-разному, но везде он отображается в виде маленькой стрелки выпадающего списка справа от поля, которая показывает, что у данного элемента есть опции. При нажатии на данный пункт обычно выпадают опции. Пользователь может начать вбивать название, и если есть подходящие опции, то они покажутся снизу (К примеру, в поле с опцией Chrome вы пишите «Chr», тогда «Chrome» отобразится снизу). Элемент еще в стадии разработки, но уже работает.

Практические примеры

Если вы хотите создать список URL, которые пользователь может выбрать, можно создать datalist и связать его с вашим полем input:

<label for="favourite-sites"> Select your favorite website! </label> <input type="url" name="favourite-sites" list="site-list"/> <datalist> <option value="http://www.google.com.au"> <option value="http://www.reddit.com"> <option value="http://www.sitepoint.com"> </datalist>

<label for="favourite-sites">

  Select your favorite website!

</label>

<input

  type="url"

  name="favourite-sites"

  id="favourite-sites"

  list="site-list"/>

<datalist>

  <option value="http://www.google.com.au">

  <option value="http://www.reddit.com">

  <option value="http://www.sitepoint.com">

</datalist>

Заметки и основные аспекты

Тег datalist будет выполнять проверку на основе атрибута type тега input. К примеру, если вы выбрали type=»email» и привязали datalist к тегу, то опции должны соответствовать типу email. Тег использует умную обработку, которая облегчит вам контроль за значениями.

Тег datalist достаточно хорошо поддерживается в браузерах, однако Apple решили вовсе отказаться от него (и в десктопной версии и в iOS). Microsoft поддерживает данный тег с IE10 и далее (в мобильном IE поддержка отсутствует). Если поддержка отсутствует, элементы input вернутся в нормальный режим.

Небольшое предупреждение – данный компонент немного забагованный. К примеру, если пометить input атрибутом required и не вбить значение, форма не будет отправляться пока не будет выбрано значение (как и ожидается). Но если вы вручную вобьете значение (даже если оно неверно) и отправите форму, это не вызовет ошибку – просто ничего не произойдет.

Заключение

Надеюсь, вы узнали про один или два полезных тега из этой статьи и теперь можете использовать их в своих будущих сайтах! В общем и целом, семантика данных элементов понятна. Некоторые будут настаивать, что элемент Х нужно использовать способом Z, чтобы это было «правильно». Некоторые из тегов еще в разработке и в будущем вам придется искать наилучшее для них применение.

Мы всегда очень интересуемся тегом input, и если вы знаете какие-то полезные редко используемые теги, мы бы хотели узнать, как вы их используете.

Автор: Simon Codrington

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Вы знаете эти 8 HTML5 тегов?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Вы знаете эти 8 HTML5 тегов?

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

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