Атрибут cite в HTML

Тег CITE и его атрибуты.

В тег-контейнер CITE помещают ссылки или фрагменты текста с других ресурсов.

Категория тега :
Тег форматирования текста. Начальный тег необходим, конечный тег необходим.

Атрибуты тега :
id — идентификатор.
class — класс CSS
title — всплывающая подсказка.
style — встроенный инлайн стиль.
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup — внутренние события.

Тег cite, синтаксис:
Цитата

Список всех HTML-тегов.

Поиск по тегам:
Список всех тегов
А вы знаете как сделать картинку фоном при помощи каскадных таблиц стилей?

Атрибут cite в HTML

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

Атрибуты

Личные атрибуты: нет.

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.

Сite и blockquote: перезагрузка

Недавно в спецификации HTML было изменено определение элементов

и . В статье рассказывается, что это значит для разработчиков.

Изменения в определении

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

Контент внутри элемента

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

Выделение в цитате авторское, прим. редактора.

Что изменения в

Прежде в HTML5 не было принято включать упоминание источника внутрь элемента

. Сейчас ситуация изменилась, при условии, что упоминание источника находится внутри элемента или . Упоминание источника внутри цитаты — распространенный кейс (данные показывают, что приблизительно в 60% случаев

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

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

Редкий случай

Один из аргументов против использования cite и footer внутри blockquote для указания источника цитат состоит в том, что цитируемый контент сам по себе может содержать цитаты и ссылки на источники. Мы можем отбросить этот аргумент по той причине, что такие случаи крайне редки. Отказ от использования и ради такого редкого кейса — другой пример теоретической чистоты, которая не будет служить практическим целям.

Но если у вас возник такой случай, в настоящее время спецификация HTML предлагает вам просто закомментировать указание источника в коде цитаты. (Вопрос все еще открыт и этот совет может измениться):

(Добавлено 6.11.13, прим. редактора.) В ответ на отзывы, мы решили изменить наше предложение для спецификации так, чтобы использовать атрибут class (который может использоваться для расширения) элемента для обозначения, что это часть источника цитаты.

Изменения в определении

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

Что изменения в значат для разработчиков

Ранее в HTML5 не было принято упоминать автора источника по имени или заключать другую информацию об источнике в элемент . Применение было зарезервировано (теоретически) для названия источника. Это было попыткой пересмотреть определение элемента, не менявшееся 14 лет.

Разработчики выступали против изменений в определении:

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

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

Сколько раз в день тег , содержащий гиперссылку, опубликуется на веб-страницах? По меньшей мере, 70 миллиардов раз, т.е. примерно в 10 ссылках на странице результатов поиска Google.

Одна из причин, почему элемент теперь можно использовать для гиперссылок (даже не упоминая про идентичную ситуацию с Bing).

Что вы думаете?

Пожалуйста, прочитайте определения в спецификации HTML 5.1, нам интересно ваше мнение!

Огромное спасибо «доктору» Оли, чье исследование помогло подготовить изменения, произошедшие с элементами и

. И «доктору» Брюсу за то, что настаивал на своем праве цитировать свою маму.

Перевод оригинальной статьи «Cite and blockquote — reloaded» Стива Фолкнера (Steve Faulkner), опубликованной на сайте HTML5Doctor.com.

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

Использование footer внутри blockquote, как я понимаю, чисто декоративное для дефиса/тире?

Не проще ли будет опустить footer и сделать дефисотире через before?

Антон, используется здесь по смысловому назначению, ровно так, как описано в спецификации:

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like

Сайт неплох, но почему так медленно работает?!
Страницы грузятся по 5-14 секунд!

Добротный перевод отличной статьи! Искал информацию по цитатам с точки зрения SEO, и думаю что данное описание Брюса будет вскоре восприниматься ПС как идеальное использование цитат. если еще не воспринимается ;)

Столкнулся с мнением одного из участников рабочей группы HTML в W3C, что «мгновенные снимки» спецификаций W3C нужны в основном (если не исключительно) для решения юридических вопросов с патентами, и фактически устаревают задолго до перехода в статус какой-либо рекомендации. А для браузеров (и, соответственно, веб-разработчиков) важнее «живой стандарт» WHATWG. Кроме того, Хикси — еще и сотрудник Гугла, что дает основания подозревать, что и для поисковиков (как минимум, одного:) спецификация WHATWG как-то «роднее». В связи с этим возник вопрос: насколько такие изменения, нарушающие совместимость с «живым стандартом», являются авторитетными для индустрии? Есть ли вообще смысл принимать их в расчет?

Кроме того, пример «особого случая» с внутри цитаты (необходимость особого класса для указания, что используется по главному назначению, а не ради узаконенного хака!) выглядит действительно как-то не очень. Невольно возникает подозрение, что Стив Фолкнер, постоянно напирая на пришедшие из WHATWG принципы разработки HTML (разумный прагматизм и всё такое) и доводя их до абсурда, попросту слегка троллит того же Хикси:)

Помогите разобраться наконец в этой путанице!

Каков атрибут cite?

Атрибут cite указывает, по-моему, адрес источника цитируемого текста, но кто использует эту информацию?

Источник цитируемого текста не отображается конечному пользователю в обычном браузере, поэтому кто использует эту информацию и как?

Во-первых, это не только blockquote , где вы можете использовать атрибут cite . Вы также можете использовать атрибут cite для следующих элементов:

Зачем использовать cite в приведенных выше элементах?

Указывается, куда отправляется контент, или изменение или удаление.

Вот что w3.org говорит,

Пользовательские агенты могут разрешать пользователям следовать таким ссылкам цитирования, но они в основном предназначены для частного использования (например, по серверным скриптам сбор статистики о редактировании сайта), а не для читателей

Теперь, вопрос, кто его использует?

Атрибут cite используется для идентификации онлайн-источника цитаты в форме URI (например, http://sourcewebsite.doc/document.html «).

Значение атрибута cite не отображается на экране (хотя эти потенциально полезные метаданные могут быть извлечены и записаны обратно на веб-страницу с помощью магии DOM Scripting).

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

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

Оба тега и атрибут cite предназначены для семантических целей, а это означает, что они просто предназначены для того, чтобы дать веб-сайту больше «значение». Например, я мог бы использовать тег

, но это не имеет особого значения для браузера, и поэтому использование

То же самое происходит с атрибутами и cite . В соответствии с определением MDN для атрибута cite (ссылка здесь):

Используйте атрибут cite для элемента или для ссылки онлайн-ресурс для источника.

«, так кто же использует эту информацию и как?» — Я считаю, что поисковые системы (например, Google) будут использовать эту информацию, чтобы показать потенциальные связи между документами. Если вы думаете об этом, это важный момент. Посмотрите изображение ниже:

Обратите внимание, как он показывает информационное поле «Группа Samsung» справа. Ребята, которые работают в Google, не пишут эту информацию — скорее, они получены из Википедии. Однако эта информация будет иметь большее отношение к поиску «samsung», когда эта информация также будет написана на других сайтах, с атрибутом cite , связывающим эту информацию с Википедией (следовательно, увеличивая релевантность Википедии). Вот почему здесь используется информация в Википедии, а не какой-то сайт начальной школы относительно телефонов Samsung.

Атрибут cite просто обеспечивает больше смысла для веб-сайта. Тим Бернерс-Ли описал семантический веб-компонент как компонент «Web 3.0» — другими словами, многие компоненты обновления языка HTML просто обеспечивают большее значение на веб-странице, как шаг ближе к Web 3.0.

TL; DR — в более простых выражениях атрибут cite предназначен только для большей значимости веб-страницы и может использоваться для поисковых систем для лучшей привязки веб-страниц.

HTML Tag

The HTML tag is used for representing a citation in an HTML document.

Text enclosed in tags is intended to represent the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc).

Note that the HTML5 specification allows the to include people’s names while the HTML Living Standard does not. For more information, see below under the heading «Differences Between HTML 4 & HTML 5».

Syntax

The tag is written as with the citation inserted between the start and end tags.

Examples

Title of a Work

In this example, we use the element to cite the title of a piece of work that contains the quote. We use the

Author’s Name

You can include the name of the author (whether it be a person, people, or organization) in your tag.

In this example we use the tag to provide the quote, and the to provide the name of the author.

Important Note: This option is only supported in HTML5 (i.e. the W3C version of HTML). The HTML Living Standard (WHATWG) does not allow people’s names to be included in the tag.

The tag can also contain a URL reference for the quote.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the tag/element.

Информация:
Attribute Description
None

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

However, there is a difference between HTML5 (W3C) and the HTML Living Standard (WHATWG). The HTML5 specification allows the element to contain the name of a person. The HTML Living Standard however, specifically states that the tag must not be used to mark up people’s names.

For more info, check out the links to the official specifications below.

Also, to see more detail on the HTML5 and HTML 4 versions, see HTML5 Tag and HTML4 Tag.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 Tag and HTML4 Tag.

Tag Details

For more details about the tag, see HTML5 Tag and HTML4 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Для чего нужен атрибут cite?

cite указывает адрес источника цитируемого текста, я думаю, но кто использует эту информацию?

Источник цитируемого текста не виден конечному пользователю в обычном браузере, поэтому кто использует использует эту информацию и как?

1 ответ

Во-первых, это не только blockquote , где вы можете использовать cite атрибут. Вы можете использовать атрибут cite для следующих элементов:

Зачем использовать cite в вышеуказанных элементах?

Чтобы указать, откуда взято содержимое, или указано изменение или удаление.

Вот что говорит w3.org :

Пользовательские агенты могут разрешать пользователям переходить по таким ссылкам, но они в первую очередь предназначены для частного использования (например, серверными скриптами сбор статистики об изменениях сайта), а не для читателей

Теперь вопрос, кто его использует?

Атрибут cite используется для определения онлайнового источника предложения в форме URI (например, « http: //sourcewebsite.doc/document.html «).

Значение атрибута cite не отображается на экране (хотя эти потенциально полезные метаданные можно извлечь и записать обратно в веб-страница через магию DOM Scripting).

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

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

Каков атрибут cite?

Атрибут cite указывает, по-моему, адрес источника цитируемого текста, но кто использует эту информацию?

Источник цитируемого текста не отображается конечному пользователю в обычном браузере, поэтому кто использует эту информацию и как?

Во-первых, это не только blockquote , где вы можете использовать атрибут cite . Вы также можете использовать атрибут cite для следующих элементов:

Оба тега и атрибут cite предназначены для семантических целей, а это означает, что они просто предназначены для того, чтобы дать веб-сайту больше «значение». Например, я мог бы использовать тег

, но это не имеет особого значения для браузера, и поэтому использование

То же самое происходит с атрибутами и cite . В соответствии с определением MDN для атрибута cite (ссылка здесь):

Используйте атрибут cite для элемента или для ссылки онлайн-ресурс для источника.

«, так кто же использует эту информацию и как?» — Я считаю, что поисковые системы (например, Google) будут использовать эту информацию, чтобы показать потенциальные связи между документами. Если вы думаете об этом, это важный момент. Посмотрите изображение ниже:

Обратите внимание, как он показывает информационное поле «Группа Samsung» справа. Ребята, которые работают в Google, не пишут эту информацию — скорее, они получены из Википедии. Однако эта информация будет иметь большее отношение к поиску «samsung», когда эта информация также будет написана на других сайтах, с атрибутом cite , связывающим эту информацию с Википедией (следовательно, увеличивая релевантность Википедии). Вот почему здесь используется информация в Википедии, а не какой-то сайт начальной школы относительно телефонов Samsung.

Атрибут cite просто обеспечивает больше смысла для веб-сайта. Тим Бернерс-Ли описал семантический веб-компонент как компонент «Web 3.0» — другими словами, многие компоненты обновления языка HTML просто обеспечивают большее значение на веб-странице, как шаг ближе к Web 3.0.

TL; DR — в более простых выражениях атрибут cite предназначен только для большей значимости веб-страницы и может использоваться для поисковых систем для лучшей привязки веб-страниц.

HTML5 элементы для лучшей семантики текста

Семантика в HTML может помочь веб — дизайнеру не только передать смысл на странице визуально пользователю, но и ещё облегчить понимание кода и оптимизацию текста поисковыми системами с помощью тегов.

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

Семантика в HTML передаёт больше информации и смысла

В качестве примера давайте рассмотрим разницу между элементами

Любой браузер одинаково применяет стили элементам

С годами семантика стала на много сложнее, и поисковые системы её всё лучше и лучше понимают.

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

Тег не используется для обозначений изменений в тексте. По умолчанию тег зачёркивает текст.

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

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.

Например, для такого тега у DOM-объекта будет такое свойство body. .

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

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

Мы можем добавить и метод:

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

  • Им можно присвоить любое значение.
  • Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

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

Конечно. Все атрибуты доступны с помощью следующих методов:

  • elem.hasAttribute(name) – проверяет наличие атрибута.
  • elem.getAttribute(name) – получает значение атрибута.
  • elem.setAttribute(name, value) – устанавливает значение атрибута.
  • elem.removeAttribute(name) – удаляет атрибут.

Этим методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

  • Их имена регистронезависимы ( id то же самое, что и ID ).
  • Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

  1. getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
  2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
  3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
  4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

  • Изменение атрибута value обновило свойство.
  • Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Во-первых, давайте посмотрим, полезны они или нет? Для чего они нужны?

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

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

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

Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

Вот переписанный пример «состояния заказа»:

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

  • Атрибуты – это то, что написано в HTML.
  • Свойства – это то, что находится в DOM-объектах.
Свойства Атрибуты
Тип Любое значение, стандартные свойства имеют типы, описанные в спецификации Строка
Имя Имя регистрозависимо Имя регистронезависимо

Методы для работы с атрибутами:

  • elem.hasAttribute(name) – проверить на наличие.
  • elem.getAttribute(name) – получить значение.
  • elem.setAttribute(name, value) – установить значение.
  • elem.removeAttribute(name) – удалить атрибут.
  • elem.attributes – это коллекция всех атрибутов.

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

  • Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
  • Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

Задачи

Получите атрибут

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

blockquote

Поддержка браузеров

IE Opera Chrome Firefox Safari
+ + + + +

Пример

Длинная цитата оформляется так:

Описание и использование

используется для определения длинных цитат.

Браузер вставляет пространство и отступы до и после элемента blockquote.

Разница между HTML и XHTML

Для успешной валидации элемента blockquote в качестве strict HTML, необходимо, чтобы этот элемент содержал только блочные элементы. Пример:

Советы и примечания

Совет: используйте тег q для коротких цитат.

Илон Маск рекомендует:  Что такое код getprotobynumber
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL