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

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

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

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

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

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

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

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

Div

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

Section

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

Article

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

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

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

• Создано 02.11.2015 13:58:49
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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 тегов?

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

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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на 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>

У первых двух результатов цена (которая нам важна) обернута в тег 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>

Тег 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>

В общем, если вы хотите уменьшить важность чего-либо, используйте тег 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>

Если цитата больше или более сложная, ее можно обернуть тегом 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>

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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на 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/>

В другом примере тег 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>

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

В примере выше мы внесли небольшие исправления, указывая 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>

Ниже приведен пример с атрибутом 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>

Предварительно заданные опции с помощью 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>

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

Тег 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.

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

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

PSD to HTML

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