HOME

TheInfoList

Click Here for Items Related To - HTML Landmarks

OR:

HTML Landmarks on: [Wikipedia] [Google] [Amazon]

HTML landmarks are used to categorize and group content on a web page for better

accessibility Accessibility is the design of products, devices, services, vehicles, or environments so as to be usable by people with disabilities. The concept of accessible design and practice of accessible development ensures both "direct access" (i. ...

and SEO.

Sectioning elements

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

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. 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.

Examples

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

Hello, world!

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

Examples of misuse

The role of main on the

element is useless, as it already inherits that role as its default landmark role:

Hello world!

Applying the form role to

is semantically improper, because it overrides

's the default role of banner:

References

Web design Web accessibility HTML tags HTML5 HTML