3.8 Use HTML Elements Correctly

HTML semantics are important. They don’t just play a key role in making the Web look the way it does, they have a function in accessibility, SEO, and even in sustainability. Ensuring that you markup your content correctly and avoid cluttering your markup wastefully will reduce emissions.

Criteria

Semantic Code: Content must be marked up semantically using the right HTML element for the right job.
Optional Features: Remove optional HTML tags (which aren’t required for rendering), attribute quotes, or attributes that are set to their default value.
Avoid Non-standard Code: Avoid using non-standard elements or attributes.
Custom Code: Only use custom elements or Web Components if you cannot utilize native HTML elements or if you need tightly regulated control over the implementation of design system components.

Impact

Medium

Effort

Medium

Benefits

Environmental:
Sites with bloated markup waste data, also sites with broken markup could trigger memory leaks (performance issues) in apps, and following standards ensures sites will work the same across devices and platforms (reducing bugs, developer fix time, and resource waste).
Accessibility:
Semantic HTML is a great stepping stone towards making your content easier to navigate by assistive technologies. Many tags within HTML5 come with pre-loaded context about what is expected within them (reducing the need for ARIA or other descriptive features). This can also help browsers, search engines, social networks, and other “blind” technologies understand your websites or applications better. This can help you reduce barriers in terms of content navigability.
Performance:
Deprecated code isn’t optimized within rendering engines, and while Web components do outperform framework components, they won’t beat the native HTML elements they build upon.
Economic:
Inaccessible sites can lead to lawsuits, avoiding these is beneficial to any website owner.
Conversion:
Poorly coded sites may break features for visitors, leading to website abandonment.

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

<header></header>
<section>
<article>
	<figure>
		<img>
		<figcaption></figcaption>
	</figure>
</article>
</section>
<footer></footer>

Semantic HTML5 Elements Explained.

Resources

View the Guideline