# HTML landmarks

> Mediated Wiki article. Canonical URL: https://mediated.wiki/source/HTML_landmarks
> Markdown URL: https://mediated.wiki/source/HTML_landmarks.md
> Source: https://en.wikipedia.org/wiki/HTML_landmarks
> Source revision: 1316813015
> License: Creative Commons Attribution-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-sa/4.0/)

'''[HTML](/source/HTML) landmarks''' are used to categorize and group content on a [web page](/source/web_page) for better [accessibility](/source/Web_accessibility) and [SEO](/source/Search_engine_optimization).<ref>{{Cite book |last1=Clark |first1=Richard |title=Beginning HTML5 and CSS3 |last2=Studholme |first2=Oli |last3=Murphy |first3=Christopher |last4=Manian |first4=Divya |pages=75–81 |language=en}}</ref>

== Sectioning elements ==
[HTML5](/source/HTML5) included the addition of the following content sectioning elements, which inherit default landmark roles:<ref>{{Cite web |last=Wood |first=Adam |title=HTML5: What's New in The Latest Version of HTML? |url=https://html.com/html5/ |access-date=2022-03-13 |website=HTML.com |language=en-US}}</ref>
{| class="wikitable"
|+HTML Sectioning Elements and Their Default Landmark Roles
!Element
!Default Landmark Role
|-
|<code>&lt;header></code>
|<code>banner</code> when in the context of the <code>&lt;body></code> element. The <code>&lt;header></code> element is not a <code>banner</code> landmark when it is a child of any of the following sectioning elements: <code>&lt;article></code>, <code>&lt;aside></code>, <code>&lt;main></code>, <code>&lt;nav></code>, <code><nowiki>&lt;section></nowiki></code>.<ref name=":0">{{Cite web |title=HTML Sectioning Elements: ARIA Landmarks Example |url=https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html |access-date=2022-03-13 |website=www.w3.org}}</ref>
|-
|<code>&lt;nav></code>
|<code>navigation</code>
|-
|<code>&lt;main></code>
|<code>main</code>
|-
|<code>&lt;aside></code>
|<code>complementary</code>
|-
|<code>&lt;form></code>
|<code>form</code> when it has an accessible name using one of the following attributes: <code>aria-labelledby</code>, <code>aria-label</code>, or <code>title</code>.<ref name=":0" />
|-
|<code>&lt;footer></code>
|<code>contentinfo</code> when in the context of the <code>&lt;body></code> element. The <code>&lt;footer></code> element is not a <code>contentinfo</code> landmark when it is a child of any of the following HTML sectioning elements: <code>&lt;article></code>, <code>&lt;aside></code>, <code>&lt;main></code>, <code>&lt;nav></code>, <code><nowiki>&lt;section></nowiki></code>.<ref name=":0" />
|-
|<code><nowiki>&lt;section></nowiki></code>
|<code>region</code> when it has an accessible name using one of the following attributes: <code>aria-labelledby</code>, <code>aria-label</code>, or <code>title</code>.<ref>{{Cite web |title=ARIA: region role - Accessibility {{!}} MDN |url=https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role |access-date=2022-03-13 |website=developer.mozilla.org |language=en-US}}</ref>
|}

== Landmark roles ==
The <code>role</code> attribute is used to define an element's role on a page. When sectioning elements were introduced, the <code>role</code> attribute became used less for landmarking. This is because roles were applied by default to most sectioning elements, therefore, they were more widely used and accepted for their simplicity.<ref>{{Cite web |title=How Not To Use Aria |url=https://cccaccessibility.org/web-1/web-developer-tutorials/how-not-to-use-aria |access-date=2022-03-13 |website=cccaccessibility.org |archive-date=2022-01-03 |archive-url=https://web.archive.org/web/20220103170425/https://cccaccessibility.org/web-1/web-developer-tutorials/how-not-to-use-aria |url-status=dead }}</ref>

The <code>role</code> attribute is not only used for assigning roles to content sections. The attribute can also be used to assign roles to many other elements, although it is used less nowadays due to new [semantic HTML](/source/semantic_HTML) elements.<ref>{{Cite web |title=Using ARIA: Roles, states, and properties - Accessibility {{!}} MDN |url=https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques |access-date=2022-03-13 |website=developer.mozilla.org |language=en-US}}</ref>

=== Examples ===
<syntaxhighlight lang="html">
<div role="banner">
    <h1>Hello, world!</h1>
</div>
</syntaxhighlight>The code above is the same as the following more widely accepted version:<ref>{{Cite web |title=How to Use ARIA Roles, Properties, and States in HTML |url=https://webdesign.tutsplus.com/tutorials/aria-roles-properties-and-states-in-html--cms-36097 |access-date=2022-03-13 |website=Web Design Envato Tuts+|date=17 November 2020 }}</ref><syntaxhighlight lang="html">
<header>
    <h1>Hello, world!</h1>
</header>
</syntaxhighlight>

== Misuse ==
Following the addition of sectioning elements in HTML5, there was confusion regarding whether role attributes were needed for sectioning elements. It is in fact redundant to give sectioning elements the role attribute.<ref>{{Cite web |title=WAI-ARIA Authoring Practices 1.1 |url=https://www.w3.org/TR/wai-aria-practices-1.1/Overview.html |access-date=2022-03-13 |website=www.w3.org}}</ref>

Additionally, you should not try to alter sectioning elements' default roles.<ref>{{Cite web |title=Using ARIA |url=https://www.w3.org/TR/using-aria/Overview.html |access-date=2022-03-13 |website=www.w3.org}}</ref> 

=== Examples of misuse ===
The role of <code>main</code> on the <code>&lt;main></code> element is useless, as it already inherits that role as its default landmark role:<syntaxhighlight lang="html">
<main role="main">
    <p>Hello world!</p>
</main>
</syntaxhighlight>Applying the <code>form</code> role to <code>&lt;header></code> is semantically improper, because it overrides <code>&lt;header></code>'s the default role of <code>banner</code>:<syntaxhighlight lang="html">
<header role="form">
    <!--Some HTML code here-->
</header>
</syntaxhighlight>

== See also ==

* [Semantic Web](/source/Semantic_Web)
* [Semantic HTML](/source/Semantic_HTML)
* [Web accessibility](/source/Web_accessibility)
* [HTML element](/source/HTML_element)
* [HTML attribute](/source/HTML_attribute)

== References ==
<references />
Category:Web design
Category:Web accessibility
Category:HTML tags
Category:HTML5
Category:HTML

---
Adapted from the Wikipedia article [HTML landmarks](https://en.wikipedia.org/wiki/HTML_landmarks) by Wikipedia contributors ([contributor history](https://en.wikipedia.org/wiki/HTML_landmarks?action=history)). Available under [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/). Changes may have been made.