diff options
| author | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
| commit | 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 (patch) | |
| tree | f1190704f78f04a2b0b4c977d20fe96a828377f1 /devdocs/html/element%2Fheading_elements.html | |
new repository
Diffstat (limited to 'devdocs/html/element%2Fheading_elements.html')
| -rw-r--r-- | devdocs/html/element%2Fheading_elements.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fheading_elements.html b/devdocs/html/element%2Fheading_elements.html new file mode 100644 index 00000000..6b3c829d --- /dev/null +++ b/devdocs/html/element%2Fheading_elements.html @@ -0,0 +1,171 @@ +<header><h1><h1>–<h6>: The HTML Section Heading elements</h1></header><div class="section-content"><p>The <code><h1></code> to <code><h6></code> <a href="../index">HTML</a> elements represent six levels of section headings. <code><h1></code> is the highest section level and <code><h6></code> is the lowest. By default, all heading elements create a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content">block-level</a> box in the layout, starting on a new line and taking up the full width available in their containing block.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/h1-h6.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, heading content, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement"><code>HTMLHeadingElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>These elements only include the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Heading information can be used by user agents to construct a table of contents for a document automatically.</li> <li>Do not use heading elements to resize text. Instead, use the <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"><code>font-size</code></a> property.</li> <li>Do not skip heading levels: always start from <code><h1></code>, followed by <code><h2></code> and so on.</li> </ul></div> +<h3 id="avoid_using_multiple_h1_elements_on_one_page">Avoid using multiple <code><h1></code> elements on one page</h3> +<div class="section-content"> +<p>While using multiple <code><h1></code> elements on one page is allowed by the HTML standard (as long as they are not <a href="#nesting">nested</a>), this is not considered a best practice. A page should generally have a single <code><h1></code> element that describes the content of the page (similar to the document's <a href="title"><code><title> element</code></a>).</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Nesting multiple <code><h1></code> elements in nested <a href="../element#content_sectioning">sectioning elements</a> was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in <a href="https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html" target="_blank">There Is No Document Outline Algorithm</a>.</p> </div> <p>Prefer using only one <code><h1></code> per page and <a href="#nesting">nest headings</a> without skipping levels.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="all_headings">All headings</h3> +<div class="section-content"> +<p>The following code shows all the heading levels, in use.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="9bKrXasxxQvsi8ieaZehRoRpvBdzCV2RzPxKK3WFBbg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading level 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Heading level 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Heading level 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Heading level 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>Heading level 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>Heading level 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="All headings sample" id="frame_all_headings" width="280" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/Heading_Elements/runner.html?id=all_headings" loading="lazy"></iframe> +</div> +</div> +<h3 id="example_page">Example page</h3> +<div class="section-content"> +<p>The following code shows a few headings with some content under them.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/q/ebtQxmwHf0i0DJSBy/YOxhgozik1/K9oKgUa8csM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading elements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Summary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Examples<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Example 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Example 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>See also<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Example page sample" id="frame_example_page" width="280" height="480" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/Heading_Elements/runner.html?id=example_page" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="navigation">Navigation</h3> +<div class="section-content"> +<p>A common navigation technique for users of screen reading software is to quickly jump from heading to heading in order to determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> <p><strong>Don't do this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1xgyFjhXWCddMjfwMXZ9TLfCbTHjfBtWLxFuOuHWmrc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading level 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Heading level 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Heading level 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> +</pre> +</div> <p><strong>Prefer this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vkLI2f26Lj58rZ9ffPjxGfuSGyYKcAC+D+0LzrdqMyQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading level 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Heading level 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Heading level 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="nesting">Nesting</h4> <p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> <ol> <li> +<code>h1</code> Beetles <ol> <li> +<code>h2</code> Etymology</li> <li> +<code>h2</code> Distribution and Diversity</li> <li> +<code>h2</code> Evolution <ol> <li> +<code>h3</code> Late Paleozoic</li> <li> +<code>h3</code> Jurassic</li> <li> +<code>h3</code> Cretaceous</li> <li> +<code>h3</code> Cenozoic</li> </ol> </li> <li> +<code>h2</code> External Morphology <ol> <li> +<code>h3</code> Head <ol> <li> +<code>h4</code> Mouthparts</li> </ol> </li> <li> +<code>h3</code> Thorax <ol> <li> +<code>h4</code> Prothorax</li> <li> +<code>h4</code> Pterothorax</li> </ol> </li> <li> +<code>h3</code> Legs</li> <li> +<code>h3</code> Wings</li> <li> +<code>h3</code> Abdomen</li> </ol> </li> </ol> </li> </ol> <p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> <ul> <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/" target="_blank">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%E2%80%94_create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" target="_blank">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%E2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" target="_blank">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html" target="_blank">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html" target="_blank">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> </ul> +</div> +<h3 id="labeling_section_content">Labeling section content</h3> +<div class="section-content"> +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="../element#content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> <p>Sectioning content can be labeled using a combination of the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> and <a href="../global_attributes#id"><code>id</code></a> attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> <h4 id="sectioning_content_examples">Sectioning content examples</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="h5MhSqZruH8k0uFBY91EUCvMBA2rnP7o9m1biyT+JxM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- navigation items --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- page content --></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- navigation items --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Sectioning content examples sample" id="frame_sectioning_content_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/Heading_Elements/runner.html?id=sectioning_content_examples" loading="lazy"></iframe> +</div> <p>In this example, screen reading technology would announce that there are two <a href="nav"><code><nav></code></a> sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby">Using the aria-labelledby attribute</a></li> <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby" target="_blank">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> </ul> +</div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">HTML Standard <br><small># the-h1,-h2,-h3,-h4,-h5,-and-h6-elements</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>Heading_Elements</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="p"><code><p></code></a></li> <li><a href="div"><code><div></code></a></li> <li><a href="section"><code><section></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements</a> + </p> +</div> |