HTML landmarks

Last updated

HTML landmarks are used to categorize and group content on a web page for better accessibility and SEO. [1]

Contents

Sectioning elements

HTML5 included the addition of the following content sectioning elements, which inherit default landmark roles: [2]

HTML Sectioning Elements and Their Default Landmark Roles
ElementDefault Landmark Role
<header>banner when in the context of the <body> element. The <header> element is not a banner landmark when it is a child of any of the following sectioning elements: <article>, <aside>, <main>, <nav>, <section>. [3]
<nav>navigation
<main>main
<aside>complementary
<form>form when it has an accessible name using one of the following attributes: aria-labelledby, aria-label, or title. [3]
<footer>contentinfo when in the context of the <body> element. The <footer> element is not a contentinfo landmark when it is a child of any of the following HTML sectioning elements: <article>, <aside>, <main>, <nav>, <section>. [3]
<section>region when it has an accessible name using one of the following attributes: aria-labelledby, aria-label, or title. [4]

Landmark roles

The role attribute is used to define an element's role on a page. When sectioning elements were introduced, the role 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. [5]

The role 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 elements. [6]

Examples

<divrole="banner"><h1>Hello, world!</h1></div>

The code above is the same as the following more widely accepted version: [7] 

<header><h1>Hello, world!</h1></header>

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. [8]

Additionally, you should not try to alter sectioning elements' default roles. [9]

Examples of misuse

The role of main on the <main> element is useless, as it already inherits that role as its default landmark role:

<mainrole="main"><p>Hello world!</p></main>

Applying the form role to <header> is semantically improper, because it overrides <header>'s the default role of banner:

<headerrole="form"><!--Some HTML code here--></header>

See also

Related Research Articles

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Mathematical Markup Language (MathML) is a mathematical markup language, an application of XML for describing mathematical notations and capturing both its structure and content, and is one of a number of mathematical markup languages. Its aim is to natively integrate mathematical formulae into World Wide Web pages and other documents. It is part of HTML5 and standardised by ISO/IEC since 2015.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

<span class="mw-page-title-main">XMLHttpRequest</span> Web API to transfer data between a web browser and a web server

XMLHttpRequest (XHR) is a JavaScript class containing methods to asynchronously transmit HTTP requests from a web browser to a web server. The methods allow a browser-based application to make a fine-grained server call and store the results in XMLHttpRequest's responseText attribute. The XMLHttpRequest class is a component of Ajax programming. Prior to Ajax, an HTML form needed to be completely sent to the server followed by a complete browser page refresh.

<span class="mw-page-title-main">Online rich-text editor</span> Online interface for editing rich text

An online rich-text editor is the interface for editing rich text within web browsers, which presents the user with a "what-you-see-is-what-you-get" (WYSIWYG) editing area. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.

In HTML, div and span tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as p (paragraph), em (emphasis), and so on, accurately represent the semantics of the content, the additional use of span and div tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, span and div can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

In HTML, XHTML and MediaWiki, the blockquote element defines "a section [within a document] that is quoted from another source". The syntax is

RDFa or Resource Description Framework in Attributes is a W3C Recommendation that adds a set of attribute-level extensions to HTML, XHTML and various XML-based document types for embedding rich metadata within Web documents. The Resource Description Framework (RDF) data-model mapping enables its use for embedding RDF subject-predicate-object expressions within XHTML documents. It also enables the extraction of RDF model triples by compliant user agents.

<span class="mw-page-title-main">HTML5</span> Fifth and current version of hypertext markup language

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

<span class="mw-page-title-main">Semantic HTML</span> HTML used to reinforce meaning of documents or webpages

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and microformats.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

The cache manifest in HTML5 was a software storage feature which provided the ability to access a web application even without a network connection. It became part of the W3C Recommendation on 28 October 2014.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as, in the browser. iOS

HTML5 Article is a HTML5 semantic element, similar to <section> and <header>. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are popular approach to build microfrontends.

References

  1. ↑ Clark, Richard; Studholme, Oli; Murphy, Christopher; Manian, Divya. Beginning HTML5 and CSS3. pp. 75–81.
  2. ↑ Wood, Adam. "HTML5: What's New in The Latest Version of HTML?". HTML.com. Retrieved 2022-03-13.
  3. 1 2 3 "HTML Sectioning Elements: ARIA Landmarks Example". www.w3.org. Retrieved 2022-03-13.
  4. ↑ "ARIA: region role - Accessibility | MDN". developer.mozilla.org. Retrieved 2022-03-13.
  5. ↑ "How Not To Use Aria". cccaccessibility.org. Retrieved 2022-03-13.
  6. ↑ "Using ARIA: Roles, states, and properties - Accessibility | MDN". developer.mozilla.org. Retrieved 2022-03-13.
  7. ↑ "How to Use ARIA Roles, Properties, and States in HTML". Web Design Envato Tuts+. 17 November 2020. Retrieved 2022-03-13.
  8. ↑ "WAI-ARIA Authoring Practices 1.1". www.w3.org. Retrieved 2022-03-13.
  9. ↑ "Using ARIA". www.w3.org. Retrieved 2022-03-13.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.