hgroup в HTML


Содержание

Тег HGROUP в HTML-5.

Тег HGROUP используется только в HTML-5, служит для создания группы заголовков.

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

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

Тег hgroup, синтаксис:
группа тегов заголовков H1-H6.

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

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

в HTML

Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от

Синтаксис

Атрибуты

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

Пример. Использование тега

Примечание

Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

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

Информация:
Спецификация Статус
WHATWG HTML Living Standard Живой стандарт

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

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

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

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

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
9 5 11.10 4.1 4
Android Firefox Mobile Opera Mobile Safari Mobile
2.2 4 11 5

Браузеры

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

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

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

Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.

Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.

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

По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.

Можно, например, типичную запись:


Самый сайт

переписать по-новому так:

Самый сайт

И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

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

header, footer, nav, article

Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.

Тэг nav

nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.

Тэг aside

aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

Тэг section

section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.

Тэг article

article — служит для разбивки страницы на отдельные статьи.

Оба тэга section и article обладают рядом интересных особенностей.

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

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

Тэг hgroup

hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

Самый сайт

Здесь описание Самого сайта

UPD 24.02.2020: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

Тэг main

main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.

Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main.

В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!

Тэг main не является структурным тэгом и никак не влияет на разметку страницы!

Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности.

И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:

HTML Tag

The HTML tag represents a group of

The element allows you to attach a subtitle to a title without the subtitle being added to the document outline.

For example, you might have a level 1 heading, followed by a subheading in a level 2 heading. In this instance, the level 2 heading is different to the other level 2 headings in the document because it is an extension of the level 1 heading (i.e. it is a subheading of the heading).

Avoid this element if you need to make your documents W3C-compliant. See below for a «W3C-compliant» option.

Syntax

The tag is written as with the grouped headings enclosed between the start and end tags.


Examples

The Problem

Before we look at the examples, let’s make sure we understand the problem first.

You could quite easily use two headings to represent a title and its subtitle without using the tag. Like this:

However, this would result in both headings being added to the document outline. This means that, semantically, the two headings start their own section or subsection. Therefore, the subtitle will represent a new section. This may or may not be your intention.

So if your intention is for the subtitle/subheading/tagline etc to be added to the document outline, you don’t need to use the tag. You can simply use another heading element (

Because the headings are not contained within the element, the 2nd heading will appear in the document outline.

If it is not your intention to add the subtitle to the document outline (start a new section), you have 3 options:

  • use the tag (not W3C-compliant)
  • use a non-heading element for the subtitle (W3C-compliant)
  • include the subtitle in the same heading element as the title (W3C-compliant)

Basic Tag Usage

By enclosing the heading elements inside the element, the

W3C-Compliant Option

Remember, the purpose of the element is to mask the subtitle/subheading etc from the document outline (this prevents it from appearing in a table of contents).

HTML5 (i.e. the W3C version of HTML) doesn’t support the element. Only the WHATWG version (HTML Living Standard) supports this element. Therefore, if you need to make your documents W3C-compliant, you won’t be able to use this element.

If you do not want the subtitles to be included the document outline (table of contents) and they are not intended to signify the start of a new section, check out the examples below.

Option 1

You can use the

tag to mark up the subtitle. These elements could be placed inside a element.

You could also use CSS to style the subtitle if desired.

Option 2

You could include the subtitle in the same heading as the title, separated by a colon.

Option 3

You could take the previous example a step further by adding a
tag and a tag to separate the subtitle from the title. This will enable you to separate the styles between the title and subtitle.

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

The element doesn’t actually exist in HTML 4 or the HTML5 specification. The element was introduced (and subsequently dropped) in HTML 5.

For more details on the element, see HTML5 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.

Tag Details

For more details about the tag, see HTML5 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.

Тег HTML

примеров

Используйте сочетание заголовка:

Welcome to my WWF

For a living planet

The rest of the content.

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

IE 9, Firefox, Opera, Chrome и Safari Поддержка тегов .

Примечание: IE 8 или более ранних версиях IE браузер не поддерживает тег .

Определения тегов и инструкции

Тег используется для названия группы элементов.

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

в HTML

This element only includes the global attributes.

Usage notes

The element has been removed from the HTML5 (W3C) specification, but it still is in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away.
However, given that a key purpose of the element is to affect how headings are displayed by the outline algorithm defined in the HTML specification—but the HTML outline algorithm is not implemented in any browsers—then the semantics are in practice only theoretical.
So the HTML5 (W3C) specification provides advice on how to mark up Subheadings, subtitles, alternative titles and taglines without using .

The element allows the primary heading for a document section to be grouped with any secondary headings—such as subheadings or alternative titles—to form a multi-level heading.

In other words, the element prevents any of its secondary

So in the abstract outline produced by the HTML outline algorithm defined in the HTML specification, the as a whole forms a single logical heading, with the entire set of

To produce any (non-abstract) rendered view of such an outline, some choice must be made in the design of the rendering tool about how to render headings in such a way as to convey their multi-level nature. There are a variety of ways an might be shown in a rendered outline; for example:


  • an might be shown in a rendered outline in with a colon character and space (“ : ”) or other such punctuation after the primary heading and before the first secondary heading (and with the same or similar punctuation before any other secondary headings
  • an might be shown in a rendered outline in with the primary heading followed by parentheses around the secondary heading(s)

Consider the following HTML document:

A rendered outline for that document might look like the following:

That is, the rendered outline might show the primary title, HTML, followed by a colon and space, followed by the secondary title, Living Standard — Last Updated 12 August 2020.

Or, the rendered outline for that document might instead look like the following:

element, with parens around the secondary heading» style=»height: 106px; width: 450px;»>

That is, the rendered outline might show the primary title, HTML, followed by the secondary title shown in parentheses: (Living Standard — Last Updated 12 August 2020).

Frontender Magazine

Если вы ещё не знаете, в HTML5 элемент hgroup признан устаревшим.

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

Советы по разметке подзаголовков

Перед каждым разработчиком возникает важный вопрос: «Как должна выглядеть разметка для этой пакости?»

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

Примечание: Элементы h1–h6 для заголовков стоит использовать только в том случае когда они служат заголовком для нового раздела или подраздела текста.

В следующем примере заголовок и подзаголовки для веб-страницы сгруппированы с помощью элемента header . Для добавления в разметку подзаголовков использованы элементы p , так как по замыслу разработчика подзаголовки не должны добавляться в содержание и не обозначают начало нового раздела. Под примером кода представлен пример заголовка и подзаголовков c примененными к ним стилями.

Книжный подзаголовок можно разместить в той же строке что и заголовок и отделить его двоеточием.

Название альбома помещено в элемент span , что позволяет применить к нему дополнительные стили.

Заголовок и лид в новостной статье можно сгруппировать элементом header . Заголовок находится в h2 , а лид — в p .

Примечание: Некоторые предлагали использовать для разметки подзаголовков элемента small . Рабочая группа HTML провела обсуждение этого предложения, но никаких весомых доводов в пользу такого решения не найти не удалось. Следовательно, small для разметки подзаголовков использовать нежелательно.

А как насчёт сводки документа?

Если вы хотите чтобы подзаголовок отображался в полу мифической сводке документа, добавьте его вместе с текстом заголовка так же как это сделано в примерах 1 и 2. В противном случае поместите текст подзаголовка в элемент p , например, как в третьем примере.

Вопросы к разработчикам

Покрывают ли советы спецификации все сценарии использования подзаголовков, с которыми вы встречались? Если нет, какие ещё советы нужно добавить в спецификацию? Считаете ли вы приведенные примеры понятными и однозначными? Если нет, как на ваш взгляд их можно улучшить? Если у вас возникли вопросы, задайте их в комментариях!

Если вас заинтересовала эта тема, вы можете присоединиться ко мне и моим единомышленникам: Брюсу Лоусону (Bruce Lawson), Яну Девлину (Ian Devlin) и остальным в рабочей группе HTML и принять участвие в дальнейшем обсуждении.

Значение понятия «устаревший» в HTML5

элемент не должен использоваться

hgroup , как и другие устаревшие элементы, не являются частью стандарта. Это значит, что когда при проверке на соответствие стандартам будет найден элемент hgroup , вы увидите сообщение об ошибке. Вот текст ошибки, полученной при проверке с помощью сервиса валидации разметки W3C Markup Validation Service:

Ошибка: Элемент hgroup устарел. Для разметки подзаголовков поместите текст подзаголовка в элемент p после элемента h1-h6 , содержащего главный заголовок, или же поместите подзаголовок непосредственно в элемент h1-h6 , содержащий главный заголовок, разделив заголовок и подзаголовок символом пунктуации и/или поместив подзаголовок в элемент span с другой стилизацией. Чтобы сгруппировать заголовки и подзаголовки, альтернативные заголовки или слоганы, используйте элементы header или div .

Как и в случае с другими устаревшими элементами, браузеры продолжат поддерживать hgroup на том же уровне, что и прежде. То есть, браузеры, поддерживающие стили пользователя и парсинг этого элемента, будут и дальше поддерживать hgroup , следовательно разработчикам, которые использовали его на страницах сайтов, не придётся его удалять. Де факто этот элемент не имеет синтаксического значения, так как его семантика не поддерживается. По сути это всего лишь div со странным названием.

Зачем и для чего

В последние несколько лет много говорили и писали о том соответствует ли элемент hgroup тем требованиям, которые предъявляют к элементам являющимся частью спецификации HTML. В конечном счёте было решено, что не соответствует. Должно ли мы были принять решение об этом раньше? Да, но как недавно заявил Майк Смит:

Мнения людей расходятся. Мнения организаций расходятся. Наша общая задача, состоит в том чтобы в результате совместных усилий преодолеть разногласия. Эта задача требует времени, часто разочаровывает и почти никогда не бывает лёгкой.

Если вы хотели бы почитать об истории hgroup , в интернете есть много материала:

HTML .am>

The HTML tag represents a set of

For example, a document might have a title and a subtitle. The title is in a level 1 heading (

The basic tag is written like this with the relevant headings (i.e.


The tag was first introduced in HTML 5 however, it has now been dropped from the W3C HTML5 specification, but as of the time of writing, it remains in the WHATWG HTML Living Standard.

Example

The following example shows the element in action. You can modify the code (on the left) and click «Refresh» to see your changes take effect (on the right).

Attributes

The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.

Attributes Specific to the Element

Global Attributes

The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.

Attribute Description
accesskey Specifies a shortcut key that can be used to access this element.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]

class This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.
contenteditable This attribute specifies whether the user can edit the content or not.
  • true
  • false
contextmenu The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.
dir Specifies the direction of the text.
Value Description
ltr Specifies that the text should read left to right.
rtl The text should read right to left.
auto The text direction should be determined programatically using the contents of the element.
draggable Specifies whether the user is allowed to drag this element or not.
  • true
  • false
  • auto
Value Description
true This value specifies that the element is draggable.
false A false value specifies that the element is not draggable.
auto Uses the default behavior of the user agent/browser. This is the default value.
dropzone The dropzone attribute specifies what should happen when the user «drops» an element (i.e. after dragging it) onto this element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Value Description
copy Results in a copy of the dragged data. Default value.
move Results in the data being moved to the new location.
link Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: « Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: « Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg»

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

hidden Indicates that this particular element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or h ).

  • [Empty string]
  • hidden
id The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
itemid The itemid provides a global identifier for an «item». This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification.

itemprop This attribute provides one or more properties to one or more «items».

Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. Each token must be one of the following:

  • A valid URL that is an absolute URL, or
  • If the item is a typed item: a «defined property name» allowed in this situation according to the specification that defines the relevant types for the item, or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.

itemref This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
itemscope HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ).

  • [Empty string]
  • itemscope
itemtype This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute’s value must have at least one token.

The itemtype attribute must only be present in elements that include the itemscope attribute.

lang Sets the language code to be used.

[Must be a valid RFC 3066 language code, or an empty string.]

spellcheck Specifies whether the element should have its spelling checked.
Value Description
[Empty string] The element should have its spelling checked.
true The element should have its spelling checked.
false The element should not have its spelling checked.


If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state.

style Specifies inline styles for this element. This allows you to define the styles within the page, and within this tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
tabindex Helps determine the tabbing order for this element (for when the user uses the «tab» key on their keyboard to «tab» through the elements on the page in order to select an element).

[Any valid integer. For example, 0, 1, 2, 3, . etc]

title Specifies a title to associate with this particular element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»).

[Any text to be displayed as a «tool tip».]

translate Determines whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translate attribute is an enumerated attribute and may contain the following possible values:

If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

Event Handler Content Attributes

The tag also accepts the event handler content attributes listed below.

An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.

Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick=»» , you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere.

Here are the event handler content attributes that can be used with the element.

Attribute Description
onabort Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded.
onblur User has left the focus of the element.
oncancel cancel event handler.
oncanplay Invoked when the browser/user agent can start playing media, but hasn’t yet, due to buffering. In other words, if playback were to begin now, it wouldn’t play right to the end (due to the current playback rate) — it would need to pause during playback in order to load the rest of the media.
oncanplaythrough The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
onchange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).
onclick Invoked when the user clicked on the object.
onclose close event handler.
oncontextmenu Invoked when a context menu has been triggered.
oncuechange cuechange event handler.
ondblclick Invoked when the user clicked twice on the object.
ondrag Invoked when an element is being dragged.
ondragend Invoked when an element has stopped being dragged.
ondragenter Invoked when an element has been dragged to a drop target.
ondragexit dragexit event handler.
ondragleave Invoked when an element leaves a valid drop target.
ondragover Invoked when an element is being dragged over a valid drop target.
ondragstart Invoked when a drag operation has started.
ondrop Invoked when an element is being dropped.
ondurationchange Invoked when the length of the media is changed (i.e. the duration attribute has just been updated).
onemptied Invoked when a media resource element suddenly becomes empty (for example, due to a network error).
onended Invoked when the media has reached the end.
onerror Invoked when an error occurs while the element is being loaded. Also handler for script error notifications.
onfocus Invoked when the focus is on the element.
oninput input event handler.
oninvalid invalid event handler.
onkeydown Invoked when a key was pressed over an element.
onkeypress Invoked when a key was pressed over an element then released.
onkeyup Invoked when a key was released over an element.
onload The element has loaded.
onloadeddata Invoked when the browser/user agent can render the media data at the current playback position for the first time.
onloadedmetadata Invoked when the browser/user agent has just determined the duration and dimensions of the media resource.
onloadstart Invoked when the browser/user agent has started loading the media resource.
onmousedown The cursor moved over the object and mouse/pointing device was pressed down.
onmousemove The cursor moved while hovering over an object.
onmouseout The cursor moved off the object
onmouseover The cursor moved over the object (i.e. user hovers the mouse over the object).
onmouseup The mouse/pointing device was released after being pressed down.
onmousewheel Invoked when the mouse wheel is being rotated.
onpause Invoked when the media resource has been paused.
onplay Invoked when the media resource starts playback.
onplaying Playback has begun.
onprogress The browser/user agent is fetching media data the.
onratechange Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated).
onreset reset event handler.
onresize resize event handler.
onscroll scroll event handler. Invoked when the element’s scrollbar is being scrolled.
onseeked Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true)
onseeking Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
onselect Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field.
onshow show event handler.
onstalled Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming).
onsubmit User submitted a form.
onsuspend The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download).
ontimeupdate Invoked when the media’s current playback position changed.
onvolumechange Invoked when either the volume attribute or the muted attribute has changed.
onwaiting The next frame of the media is not yet available (but the browser/user agent expects it to become available).

More Information About the Element

Content Categories
  • Flow content.
  • Heading content.
  • Palpable content.
Can be used Where flow content is expected.
Content model One or more
and script-supporting elements.
End Tag Required? Yes. Any time you use the element, it must have both a start tag and an end tag.
  • Right:
  • Wrong:
DOM Interface HTMLElement

Specifications for the Tag

Here is the element defined in the various specifications:

HTML hgroup Tag

HTML tag defines the heading of a section that hold the

tags when the headings are represent as a multiple levels such as heading, subheading, alternative titles, or tag lines.

HTML tag introduce in HTML5. But now this tag has been removed from the HTML5 specification.

Example

Tag Attributes

HTML tag does not support any specific attributes.

Global Attributes

HTML tag support following global attributes.

Attributes Value Description
id unique_name Declared unique id for an element.
class class_name Declared one or more classnames for an element.
style styles CSS inline styles specify an element.
title title Specify extra details of element contain, this will display as a «tooltip» for an elements.

Event Attributes

HTML tag support following event attributes.

Hgroup

The HTML element was first introduced in HTML5 and Gecko 1.9.3. It represents the heading of a section. It defines a single title participating in the outline of the document as the heading of the implicit or explicit section that it belongs too.

Its text for the outline algorithm is the text of the first heading element of highest rank (i.e. the first

with the smallest number among its descendants) and the rank is the rank of this very same heading element.

Therefore this element groups several headings and hides them, except the main one, to the outline of the document. It allows the association of secondary titles, like subheadings, alternative titles or even taglines, to the main heading, without polluting the outline of the document.

Илон Маск рекомендует:  Iis настройка приложений cgi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL