3.7 Ensure code follows good semantic practices

Materials: Medium
Energy: Medium
Water: Medium
Emissions: Medium

Use semantic markup free of optional or non-standard code, only using custom solutions when native ones are insufficient.

Semantic code: Machine-testable
Use accurate markup according to the relevant standard(s).
Optional features: Machine-testable
Remove optional HTML elements, attribute quotes, and default attributes when these do not negatively impact functionality, accessibility, or readability. Retain them when they enhance accessibility, maintain clarity without compromising on performance, or ensure consistent browser rendering.
Avoid non-standard code: Machine-testable
Avoid using non-standard HTML elements or attributes.
Custom code: Human-testable
Prioritize the use of standard HTML elements and attributes. Only use custom elements or Web Components if you cannot use native elements or if you require them for the purposes of producing reusable design system components.

Accessibility
Applying semantic approaches means your content will be easier to navigate via assistive technologies and keyboard. Many tags phave native semantics, reducing the need for additional tagging. This can also help technologies to better understand your content. better.
Conversion
Ensuring your code is efficient and works reduces the risk of broken features and users giving up.
Economic
Conforming to accessibility legislation and regulations avoid lawsuits and fines.
Environment
Following standards ensures users have a coherent experience – reducing bugs, saving time spent fixing bugs, and avoiding wasted resources. Bloated markup can otherwise lead to waste data, while broken markup can even trigger memory leaks.
Performance
Clean, modern code renders better than deprecated or poorly maintained code. While Web Components do outperform framework components, they cannot outperform the native elements they are built on.