Как веб-разработчик, вы, вероятно, воспользуетесь целым рядом различных тегов при составлении своей следующей сборки сайта. Скорее всего, вы уже хорошо разбираетесь в некоторых общеизвестных тегах, представленных в HTML5, таких как <article> , <header> и <footer> , однако вы можете не знать о некоторых менее известных / крайних случаях тегов, которые вы может воспользоваться.
Некоторые из этих тегов являются либо совершенно новыми в HTML5, либо были переназначены из спецификации HTML4. Теги, переназначенные из HTML4, могут показаться знакомыми, однако они получили новое значение и изменили способы их использования.
Для каждого тега мы рассмотрим то, что говорится в спецификации W3C, и применим практический пример, чтобы продемонстрировать, как вы можете его использовать. Давай катимся!
Краткое слово о толковании
Хотя спецификации W3C отлично подходят для концептуальных обзоров, иногда в них отсутствуют практические примеры, что усложняет поиск наилучшего способа использования некоторых из этих тегов.
Возможно, вы использовали некоторые из этих тегов раньше — возможно, просто не так. Часто нет жестких и быстрых правил относительно того, что считается хорошей практикой. Ниже приведены некоторые примеры того, как я рекомендую лечить и использовать эти менее известные элементы.
1 — Контекстное выделение с помощью <mark>
Спецификация для <mark> говорит, что этот тег должен использоваться для обозначения «релевантности» или «проверки» .
«Актуальность» сложно описать. Элементы и текст актуальны, когда мы выполняем какое-либо действие, и они полезны для нас в данный момент (или могут быть полезны в будущем).
Например, если вы искали сайт с ключевым словом «jQuery» и появилось несколько статей, вы можете заключить полученные совпадения в <mark> . Цель тега mark состоит в том, чтобы сказать браузеру «эй, эта вещь прямо здесь имеет отношение к тому, что вы делаете» .
Практические примеры
Мы можем использовать метку метки для выделения содержимого, которое имеет отношение к делу. Для иллюстрации рассмотрим следующий сценарий:
Мы находимся на странице «Самые дешевые праздничные пакеты», и она показывает нам сетку праздничных пакетов, отсортированных по ценовому диапазону. Он начинается от самого дешевого в верхней части до самого дорогого в нижней части.
Для праздников высшего уровня сама цена может быть выделена тегом <mark> потому что мы зашли на эту страницу для дешевых предложений отдыха, и это самые дешевые предложения на странице — они наиболее актуальны.
<section class="deal-list"> <article> <h2>Vanuatu Cruise</h2> <p><mark>$499</mark>- 5 Nights</p> <p>A relaxing cruise around the southern most parts of Vanuatu</p> </article> <article> <h2>Fiji Resort Getaway</h2> <p><mark>$649</mark> - 6 Nights</p> <p>Includes all you can eat buffet and entertainment</p> </article> <article> <h2>Pacific Island Hiking</h2> <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> когда вы хотите определить что-то, имеющее отношение к текущему пользователю.
В качестве дополнительной информации о доступности выделение меток отображается браузером при использовании Windows
Режим высокой контрастности, поэтому он также хорошо работает в этом отношении.
2 — Низкое значение с <small>
Возможно, вы уже использовали <small> . Он делает именно то, что вы думаете, что сделает ваш текст меньше. Хотя браузеры могут сделать ваш текст меньше, это на самом деле является побочным продуктом использования маленького тега, а не его семантического значения.
Спецификация для <small> объясняет, что этот тег должен использоваться для снижения важности текста или информации. Браузеры интерпретируют это, уменьшая шрифт, чтобы он оказывал менее заметное влияние.
Этот тег должен использоваться для обозначения низкой важности, когда речь идет о контенте или информации. Информация низкой важности, как правило, используется в нижнем колонтитуле веб-сайта или на боковой панели (вне основного содержимого страницы).
Практические примеры
В целом, использование вами <small> должно сказать браузеру: «Этот контент прямо здесь не очень важен в общей схеме вещей» . Например, в нижнем колонтитуле вы можете использовать это для юридического указания и авторского права:
<footer> <small> Designed and developed by Simon Codrington. </small> <small> © 2016 My Company - All rights reserved </small> </footer>
Вы даже можете использовать <small> внутри обычного контента, чтобы обозначить, что контент не так важен, как контент, окружающий его. Например, в список продуктов вы можете включить юридическую оговорку «Исключает налог» рядом с ценой продукта следующим образом:
<section> <article> <h3>Woolen Llama Print Jumper</h3> <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> может повлиять на его внешний вид (в зависимости от браузера), но не повлияет на его семантику.
3 — Цитаты с <q> и <blockquote>
Хотя вы можете использовать стилизованные <div> или <span> для заключения в кавычки, лучше использовать теги <q> или <blockquote> . Оба они предназначены для использования во внешних цитатах (когда вы что-то цитируете), но они отличаются в том, как вы должны их использовать.
Согласно спецификации , <q> должен использоваться для определения «короткой встроенной цитаты» текста.
Тег <blockquote> с другой стороны, должен использоваться для больших интервалов текста.
На практике вы должны использовать <q> для меньших кавычек и использовать <blockquote> для всего остального. Имейте в виду, что они предназначены только для цитат или ресурсов, их не следует использовать только в стилистических целях (для этого используйте пролеты).
Практические примеры
Давайте посмотрим, как мы можем использовать оба этих тега.
Если у вас есть небольшая цитата, используйте <q> :
<div class="big-banner"> <h2>Try our latest sandwich!</h2> <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 class="motivational-quote"> <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 указывает URL-адрес самого связанного ресурса (например, ссылку на веб-сайт, с которого пришла эта цитата). Тег cite должен использоваться для указания названия работы. Есть некоторые споры относительно того, как следует использовать атрибут cite и <cite> но в целом я всегда находил, что использование их так прекрасно работает.
4 — Вставка, удаление и исправление с помощью <ins> , <del> и <s>
Теги <ins> , <del> и <s> полезны, когда вы работаете с контентом, который был изменен или чья релевантность была обновлена.
Тег <ins> определяет текст, который был недавно добавлен в документ — он представляет новый контент. Вы будете использовать этот тег для пометки текста, который был добавлен или релевантность которого была обновлена в вашем контенте.
Тег <del> определяет текст, который был удален из документа, он представляет удаленный контент. Несмотря на то, что это означает удаленный контент, он все же физически существует в документе как запись того, что было удалено.
Эти два тега поддерживают два необязательных атрибута — атрибут cite для ссылки на ресурс, который объясняет это изменение, а также атрибут datetime когда это произошло. Datetime должно быть допустимой строкой datetime, которая, к сожалению, не очень проста для понимания . Вы можете обмануть и использовать генератор меток времени, если вы в спешке.
Эти атрибуты полезны, когда вы хотите предоставить контекст для ваших добавлений или удалений. Вы можете увидеть это в журналах обновлений и списках ревизий, где автор перечисляет все свои изменения и предоставляет подробные сведения о причинах этих изменений.
Тег <s> похож, но определяет текст, который больше не является правильным. Это используется, чтобы показать браузеру, что перенесенный текст больше не актуален, и обычно за ним следует его замещающий текст (например, новый контент, заключенный в <ins> ). Этот тег часто отображается как зачеркнутый текст, чтобы показать, что он больше не актуален. Вы не должны использовать это только для стилистических целей (вы можете сделать это достаточно легко с помощью <span> ).
Практические примеры
Представьте, что у вас есть список изменений для плагина, который вы разрабатываете. На своей странице журнала релизов вы можете указать свои последние обновления, используя тег и атрибуты <ins> .
<h2>Latest Changes</h2> <p>Outlined below are the latest changes</p> <h3>Version 1.X branch</h3> <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/> <h3>Version 2.X branch</h3> <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 class="to-do-list"> <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 class="news-item"> <h1>WordPress 4.4 Updates</h1> <section class="summary" 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 class="main-content" 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> где это возможно.
5 — Организация параметров с <optgroup>
Этот тег является одним из самых старых, но, как ни странно, его все еще не заметили разработчики.
<optgroup> используется внутри тега элемента управления <select> чтобы помочь классифицировать различные элементы <options> .
Если у вас есть десятки (или сотни) опций внутри вашего поля выбора, возможность классифицировать их в локальном формате действительно удобна.
<optgroup> должен находиться внутри элемента <select> и содержать два атрибута — label , которая действует как видимая метка, видимая при открытии и disabled списка, что при использовании гарантирует, что ни один из параметров внутри него не может быть выбран.
Сама optgroup не может быть выбрана и не может быть стилизована (по крайней мере, не любым кросс-браузерным способом).
Практический пример
Элемент <optgroup> отлично работает в любой ситуации, когда вы используете <select> . Например, рассмотрите раскрывающийся список ценовых диапазонов компьютеров на сайте электронной коммерции.
<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 чтобы запретить диапазон параметров (хотя на самом деле ничто не <optgroup> людям просто удалить этот атрибут из <optgroup> поэтому не полагайтесь на него для проверки).
В приведенном ниже примере вы не сможете выбрать что-либо в пределах оптгруппы «Западное побережье — Австралия».
<label for="vacation-dest">Vacation Destinations</label> <select name="vaction-dest" id="vacation-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>
6 — Предопределенные параметры с <datalist>
Одной из замечательных особенностей элемента <select> , наряду с типами ввода radio / checkbox является то, что он ограничивает ваших пользователей набором предопределенных вариантов выбора.
Теперь вы можете использовать элемент <datalist> чтобы определить список допустимых вариантов для ваших различных тегов <input> . Этот компонент немного отличается в разных браузерах, но обычно он работает, показывая небольшую стрелку раскрывающегося списка справа от поля, указывающую, что у этого поля есть параметры. При выборе обычно опции сворачиваются и показывают себя. Пользователь может начать печатать, и параметры будут выделены, если они частично совпадают (например, запись «Chr» внутри поля с «Chrome» в качестве параметра сузит список параметров, чтобы показать его).
Этот элемент все еще появляется, но в целом он работает хорошо.
Практические примеры
Если вы хотите предоставить список URL-адресов, из которых пользователь может выбрать, вы можете создать <datalist> и подключить его к <input> следующим образом.
<label for="favourite-sites"> Select your favorite website! </label> <input type="url" name="favourite-sites" id="favourite-sites" list="site-list"/> <datalist id="site-list"> <option value="http://www.google.com.au"> <option value="http://www.reddit.com"> <option value="http://www.sitepoint.com"> </datalist>
Это позволит вам ограничить ваши входные данные всего несколькими значениями.
Примечания и соображения
Сам список данных будет выполнять проверку на основе атрибута type для элемента <input> . Например, если вы решили использовать type="email" а затем <datalist> для него элемент <datalist> , параметры в этом списке должны соответствовать входным данным типа «email». Он имеет уровень интеллектуальной обработки, который упрощает автоматический контроль значений.
Тег <datalist> довольно хорошо поддерживается , однако Apple решила вообще не поддерживать этот элемент (как на настольном компьютере, так и на iOS). Microsoft поддерживает это начиная с IE10 (без поддержки мобильного IE). Когда поддержка недоступна, элемент <input> должен вернуться к своему обычному режиму ввода.
Одно слово предупреждения — этот компонент может быть немного глючит. Например, если вы пометите ввод как required и не введете значение, форма прекратит любую обработку, пока вы не выберете значение (как вы ожидаете). Однако, если вы вручную введете значение (даже если оно неверно) и нажмете «Отправить», это не вызовет ошибку — ничего не произойдет (это не помечает ошибку, как вы, возможно, ожидаете).
Завершение всего этого!
Надеюсь, вы выбрали один или два полезных элемента из этой статьи, и в дальнейшем вы сможете использовать их на своих будущих сайтах!
В целом, много семантики использования этих элементов очень много в воздухе. Некоторые группы будут настаивать на том, что вам нужно использовать X-элемент по-Z, чтобы он был «правильным путем». Некоторые из этих элементов все еще развиваются и потребуют от вас интерпретировать, как их лучше всего использовать.
Мы всегда заинтересованы во вводе данных, поэтому, если вам известны какие-либо редко используемые полезные теги, мы будем рады узнать, как вы их использовали.