3.7 Ensure code follows good semantic practices
Use semantic markup free of optional or non-standard code, use the latest version of technical specifications, and only using custom solutions when native ones are insufficient.
Criteria
- Semantic code:
Use accurate markup according to the relevant standard(s).- 2025: 0 of the Global Top 200 Websites Use Valid HTML
- Every HTML Element
- GPF – General Policy Framework (PDF) – 1.9 – Strategy (Interoperable Technologies)
- GPF – General Policy Framework (PDF) – 4.5 – UX and UI (Native Components)
- GR491 – 1-4006 – Information Over Presentation
- How Often Should We Speak About HTML Conformance?
- HTML: A good basis for accessibility
- HTML5 For Web Designers
- Is React Accessible? That’s the Wrong Question
- Jumping HTML tags. Another reason to validate your markup
- Mastering HTML
- Page bloat update
- Plain Vanilla
- Reducing Carbon Emissions On The Web
- Semantic HTML
- Semantic HTML: the foundation of web accessibility
- Semantic HTML5 Elements Explained
- Ten years of page bloat: What have we learned?
- Testing 10 JavaScript Frameworks on Their HTML Defaults
- The Carbon Impact of Web Standards (PDF)
- Understanding why Semantic HTML is important, as told by TypeScript
- United Nations SDGS – Goal 1 – Poverty
- W3C Validator
- Web Accessibility Lawsuits
- Web Standards: The What, The Why, And The How
- What is page bloat?
- What’s wrong with this HTML, and is it valid?
- Where Has All the Valid HTML Gone
- Why and How to Write Minimal and Valid HTML, a Link Guide
- Why semantic HTML still matters
- Optional features:
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:
Avoid using non-standard, deprecated, proprietary, or outdated formats and web standards. Only use such code where this is required to meet a documented customer need and if there is a justifiable benefit that cannot otherwise be met. Justifiable reasons could include compatibility with essential legacy systems and/or hardware, accessibility, or emissions reduction. Use polyfills only when necessary, and regularly audit code to see if they can be removed.- A Node and Command Line Tool to Find Obsolete HTML
- Avoid serving legacy JavaScript to modern browsers
- Deprecated HTML elements (and what to use instead)
- Deprecation
- DevOps tech: Code maintainability
- GPF – General Policy Framework (PDF) – 1.9 – Strategy (Interoperable Technologies)
- GPF – General Policy Framework (PDF) – 2.9 – Specifications (Off-The-Shelf Components)
- GPF – General Policy Framework (PDF) – 4.5 – UX and UI (Native Components)
- GR491 – 1-5005 – Proven Development Standards
- HTML5 Security Cheat Sheet
- JSON vs XML: which one is faster and more efficient?
- Maintainability Guide
- marquee elements are deprecated and must not be used
- Non-standard elements
- Obsolete and deprecated elements
- Obsolete features
- The Carbon Impact of Web Standards (PDF)
- The Compact Guide to Web Maintainability: 200 Tips and Resources
- The history of deprecated and changed HTML tags
- The Neverending Story
- Thou Shalt Not Depend on Me (PDF)
- Use JSON for data exchange
- W3C Validator
- Website Maintenance Tips for Front-End Developers
- Where Has All the Valid HTML Gone
- Why Do Some HTML Elements Become Deprecated?
- Custom code:
Prioritize the use of standard HTML elements and attributes. Only use custom elements or Web Components if you cannot use pre-existing elements or if you require them for the purposes of producing reusable design system components.- GPF – General Policy Framework (PDF) – 1.9 – Strategy (Interoperable Technologies)
- GPF – General Policy Framework (PDF) – 2.9 – Specifications (Off-The-Shelf Components)
- HTML First
- NoLoJS: Reducing the JS Workload with HTML and CSS
- Plain Vanilla
- Web Components Basics and Performance Benefits
- Web components vs. React
- Why Web Components?
- Built-in over custom:
Use web platform features and APIs over writing your own.- 15 Tips to Optimize Your PHP Script for Better Performance for Developers
- Energy Efficiency across Programming Languages (PDF)
- GPF – General Policy Framework (PDF) – 1.9 – Strategy (Interoperable Technologies)
- GPF – General Policy Framework (PDF) – 4.5 – UX and UI (Native Components)
- How to improve PHP performance in your web application
- Native features of the browser
- PHP Function and Method listing
- Web APIs
Benefits
- Accessibility
Applying semantic approaches means your content will be easier to navigate via assistive technologies and keyboard. Many tags have built-in semantics, reducing the need for additional attributes. This can also improve compatibility of your content with a broad range of technologies. - 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. - Security
Keeping up with modern standards reduces the risk of security exploits.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium