Элементы small и hr

Оли Стадхольм 30 мая 2011

Не так давно мы писали о презентационных элементах <i> и <b> из HTML4, возродившихся к новой семантической жизни. Другие два элемента, которые претерпели изменения, чтобы получить значения в HTML5 — это <small> и <hr>:

  • <small> — использовался раньше для того, чтобы просто сделать текст помельче, теперь же он предназначен для пометок и небольших надписей (W3C:Markup, WHATWG);
  • <hr> — использовался раньше для создания горизонтальных линеек, теперь предназначен для смысловой разбивки на уровне текстовых блоков (W3C:Markup, WHATWG).

Элемент <small>

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

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

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

	<p>
	    Я использую
	    <span class="museo">Museo Slab</span>,
	    <small class="font-license">
	        шрифт Жоса Буйвенга (exljbris)
	        <a href="http://www.exljbris.nl/">www.exljbris.nl</a>
	    </small>
	</p>

Использование <small class="font-license"> для того, чтобы выполнить требования лицензионного соглашения

	<small>
	    <a href="http://creativecommons.org/licenses/by-sa/3.0/"
	        rel="license">
	        Creative Commons Attribution Share-alike license
	    </a>
	</small>

Использование <small> вокруг ссылки на Creative Commons license с rel="license"

Текст внутри <small> необязательно должен быть меньше, чем окружающий — если же вам нужен именно мелкий текст, то для этого лучше подойдет CSS. Используйте <small> только на строчном уровне. В конце концов, <small> не влияет на семантику <em> или <strong>.

Элемент <hr>

<hr> служит для смысловой разбивки на уровне блоков текста

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

Пообщавшись с Яном Хиксоном (редактором HTML5) я понял, что до сих пор неправильно понимал модель поведения содержимого. Я узнал, что <hr> на самом деле означает конец одной секции и начало другой — что семантически равносильно </section><section>. Но поскольку элементы вроде <section> и так указывают на это, получается, что <hr> больше подходит для смысловой разбивки, вроде смыслового разделения внутри блока текста или отделения одной сцены в романе от другой. В любом случае, вы можете использовать этот элемент везде, где вы используете элемент <p>. Из-за унылого вида в браузерах по умолчанию, <hr> не слишком распространён сегодня, однако это не мешает оформить его при помощи CSS в виде красивого вензеля.

Оформление <hr> в виде вензеля

	hr {
	    margin:3em 0;
	    height:24px;
	    border:0;
	    background:url(flourish.png) 50% 50% no-repeat;
	    }

Оформите <hr> красиво: уберите рамку, поля и добавьте фоновую картинку.

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

Неподходящий случай для использования <hr> на Cork’d.com

На Cork’d используеся декоративная фоновая картинка для заголовков. Но несмотря на обилие линеек, это совсем неподходящий случай для использования <hr>.

В заключение

В момент выхода HTML4, презентационные элементы <basefont>, <font>, <s>, <strike> и <u> уже были помечены как нежелательные для использования, в пользу применения CSS. HTML5 завершил этот процесс, избавившись от элементов <big> и <tt>.

Остальные презентационные элементы из HTML4 — долго игнорируемые <small> и <hr> (наряду с <i> и <b>) — были пересмотрены в HTML5 с учетом их полезных, медиа-независимых семантических свойств, которые имеют отношение к их типичному использованию. Будете ли вы использовать их? Выскажитесь в комментариях!

Перевод оригинальной статьи «The small & hr elements» Оли Стадхольма (Oli Studholme), опубликованной на сайте HTML5Doctor.com.

Теги: , ,

Комментарии +

  1. Иван 30 мая 2011 в 10:48

    С тегом <s> они поспешили, семантика у него есть, она <s>оху...</s> довольно ценная.

  2. Вадим Макеев 30 мая 2011 в 11:04

    Иван, а чем вас не устраивает элемент <del> для таких целей? Так вышло, что у просто перечёркнутого текста нет никакой истории, которая придавала бы ему значение, отличное от удалённого/зачёркнутого текста, которое замечательно реализуется вышеупомянутым.

  3. Иван 30 мая 2011 в 11:52

    S втрое короче)) и текст этот именно зачёркнутый, а не удалённый. Разница как между strong и b, em и i.

    Если я описываю надпись на заборе, где именно зачёркнутое слово, то del семантически совершенно не то, что мне надо.

  4. Вячеслав Олиянчук 30 мая 2011 в 12:01

    Иван, тот факт, что у элемента <s> в некоторых браузерах дефолтное представление с зачеркнутым текстом никак не связан со значением этого элемента. В разных случаях вам будет нужно по разному визуализировать элемент, который отвечает за удаленный контент: либо скрыть, либо сделать бледно серым, либо выделить для привлечения внимания. Это все представление. А <s> и <strike> (ошибочно основанные на визуальном представлении) были выкинуты в пользу <del> с понятным значением.

  5. Иван 30 мая 2011 в 12:13

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

  6. fiskus 30 мая 2011 в 12:48

    Хм, всегда <hr> использовал именно в этом смысле.

  7. Вячеслав Олиянчук 30 мая 2011 в 13:23

    Иван, читатели разные бывают :) Есть люди, есть краулеры... А смысл он на то и придуман, чтобы всех объединять.

  8. alex.kotomanov 30 мая 2011 в 15:45

    Согласен, что hr нужный тег, имеет свой смысл и вовсе не является презентационным. Всегда его использовал именно так.
    А вот со small до конца не понятно, зачем он нужен. Ведь само название small тогда не совпадает со смыслом, который вкладывают в этот тег. Не лучше ли было создать новый тег, например remark?
    Иначе, следовало бы сохранить и big. Он был тогда совпадал по смыслу с тегом strong.

  9. MT 30 мая 2011 в 19:13

    Много лет использую HR и SMALL именно в семантическом значении «разделитель» (ещё со времён SEPARATOR в безвременно ушедшем XHTML2) и текст пониженной важности, соответственно.

    alex.kotomanov, для текста повышенной важности (как семантически можно было бы трактовать BIG) есть заголовки.

    Don’t use it for block-level content (paragraphs, lists, etc.), as this would be considered main content.

    — мутноватая фраза, не вполне ясно, что хотел сказать автор.

  10. uggallery 31 мая 2011 в 2:27

    У А. Мильчина в справочнике видел термин "немой заголовок", как раз для вещей функционально похожих на HR. Традиционные виды немых заголовков: горизонтальная черта, графический элемент или несколько "пустых строк" подряд. Так я и объясняю для себя назначение HR - элемент для немых заголовков.

  11. Anton Diaz 4 июня 2011 в 23:11

    Именно так и понимал эти теги до этого. Мне нравится, как работает WHATWG.

    А вот со small до конца не понятно, зачем он нужен. Ведь само название small тогда не совпадает со смыслом, который вкладывают в этот тег. Не лучше ли было создать новый тег, например remark?

    Думается, что WHATWG старается максимально аккуратно развивать HTML, чтобы не повторить историю слишком радикального и принципиального XHTML. Зачем придумывать новый тег, если уже существует такой, который обычно используется именно в том значении, которое теперь закрепило WHATWG?

    Теперь насчет S. Согласен с Иваном, что его значение всё-таки отличается от DEL. DEL сухо показывает, что в предыдущей версии документа эта строка была, а в новой версии она отсутствует. Получается, что HTML-страница показывает нам не документ даже, а некое отображение рецензионного процесса, показывающее разницу между двумя документами. А вот S указывает на текст, который потерял актуальность или неточен, но при этом является частью окончательной версии документа.

    Собственно на такой трактовке настаивает WHATWG в своих черновиках, и непонятно почему автор статьи уже хоронит S.

  12. Anton Diaz 4 июня 2011 в 23:20

    alex.kotomanov, для текста повышенной важности (как семантически можно было бы трактовать BIG) есть заголовки.

    Извольте :) Заголовок — это не текст повышенной важности. Заголовки разделяют текст по смыслу.

  13. MT 11 июня 2011 в 3:31

    Anton Diaz: STRONG и EM тоже никто не отменял. ;-)

Перейти к началу