1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
title: <hgroup>
slug: Web/HTML/Element/hgroup
translation_of: Web/HTML/Element/hgroup
---
<div>{{HTMLRef}}{{seeCompatTable}}</div>
<p>O <strong>elemento HTML <code><hgroup></code> </strong>destina-se a agrupar cabeçalhos de diferentes níveis para uma seção do documento. Ele agrupa (é um container para) um conjunto de elementos <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code>.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Categorias de conteudo</th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</td>
</tr>
<tr>
<th scope="row">Conteúdo permitido</th>
<td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td>
</tr>
<tr>
<th scope="row">Omissão de tag</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row"><br>
Elementos-pai permitidos</th>
<td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="atributos">atributos</h2>
<p>Esse elemento admite apenas os <a href="/en-US/docs/HTML/Global_attributes">global attributes</a> (atributos globais)</p>
<h2 id="Notas_sobre_o_uso">Notas sobre o uso</h2>
<div class="note">
<p>O elemento <code><hgroup></code> foi removido da especificação do W3C para a HTML5, mas ainda se encontra na especificação HTML do WHATWG. Foi parcialmente implementado na maioria dos navegadores, contudo é pouco provável que seja incluído na especificação.<br>
Considerando que a finalidade do elemento <code><hgroup></code> é a de definir a maneira como os títulos serão mostrados pelo <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">outline algorithm definido na especificação da HTML</a> e considerando ainda que o <strong>outline algorithm da HTML não está implementado em nenhum navegador</strong>, conclui-se que, na prática, a semântica do elemento <code><hgroup></code> é meramente teórica.<br>
A especificação do W3C para a HTML5 fornece algumas sugestões para a marcação de <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">Subheadings, subtitles, alternative titles and taglines</a> sem que se use o elemento <code><hgroup></code>.</p>
</div>
<p><code>O elemento <hgroup> permite que o cabeçalho principal de uma seção de documento seja agrupado com quaisquer cabeçalhos secundarios-como subtitulos ou titulos alternativos-para formatar um cabeçalho de varios niveis.</code></p>
<p><font face="consolas, Liberation Mono, courier, monospace"><span style="">Em outras palavras o elemento <hgroup> impede que qualquer um dos seus filhos secundarios <h1>-<h6> crie seçoes separadas propias no esboço-como esses elementos <h1>-<h6> normalmene seriam se não fossem filhos de nenhum <hgroup> </span></font></p>
<p>Então, no esboço abstrato produzida pelo algortimo abstrato do HTML definido na especificação HTML, o <hgroup> como um todo forma uma posição lógica simples, com todo o conjunto de filhos <h1>-<h6> do <hgroup> entrando no esquema como uma unidade multinível, para compreender esse cabeçalho lógico único no resumo abstrato.</p>
<p>Para produzir alguma (não-abstrato) visualização não renderizada como um esboço, alguma escolhe deve ser feita no design para renderizar ferramentas sobre como renderizar <hgroup> cabeçalhos como um jeito para transmitir sua natureza multi-nível. Há uma varidade de jeitos que <hgroup> pode ser mostrado em um esboço renderizado; por exemplo:</p>
<ul>
<li>um <hgroup> pode ser mostrado em um esboço renderizado com dois pontos e espaço (": ") ou outra pontuação após o cabeçalho principal e antes do primeiro cabeçalho secundário (e como a mesma pontuaçã, ou parecida, antes de qualquer cabeçalho secundário).</li>
<li>um <hgroup> pode ser mostrado em um esboço renderizado com o primeiro cabeçalho seguido de parênteses ao redor do segundo cabeçalho (s).</li>
</ul>
<p>Considere o documento HTML a seguir:</p>
<pre class="brush: html notranslate"><!DOCTYPE html>
<title>HTML Standard</title>
<body>
<hgroup id="document-title">
<h1>HTML</h1>
<h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>
<p>Some intro to the document.</p>
<h2>Table of contents</h2>
<ol id=toc>...</ol>
<h2>First section</h2>
<p>Some intro to the first section.</p>
</body></pre>
<p>Um esboço renderizado para esse documento seria como:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p>
<p>Isso é, o esboço renderizado deve ser o título primário, HTML, seguido por dois pontos e espaço, seguido pelo título secundário, Living Standard - Last Update 12 August 2016.</p>
<p>Ou, o esboço renderizado para aquele documento poderia ser como:</p>
<p><img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p>
<p>Isso é, o esboço renderizado deve mostrar o título primário, HTML, seguido pelo título secundário mostrado entre parênteses: (Living Standard - Last Updated 12 August 2016).</p>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush: html notranslate"><hgroup id="document-title">
<h1>HTML</h1>
<h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>
</pre>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibiliade_do_navegador">Compatibiliade do navegador</h2>
<div class="hidden">A tabela de compatibilidade nessa página é gerada através de dados estruturados. Se você gostaria de contribuir com esses dados, por favor cheque https://github.com/mdn/browser-compat-data e nos mande um pull request.</div>
<p>{{Compat("html.elements.hgroup")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
<li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
</ul>
|
