A11y Front-end Roadmap #1 - The Essential HTML Boilerplate
A jurney starts with a simple step...
When Starting a New Web Project a solid foundation is crucial. The HTML boilerplate serves as the backbone of your web application, setting the stage for structure, SEO, and accessibility. Let's take a peek at a basic HTML boilerplate, highlighting the tags that promote accessibility.
We will focus on the <head> section and just on the elements revolving around accessibility, just to keep everything neat and short.
Document Type Declaration
Tag:
<!DOCTYPE html>Position: First line of your rendered code.
Purpose: Specifies the document type and version of HTML being used. This declaration helps the browser render the page correctly.
Character Set
Tag:
<meta charset="UTF-8">Position: Inside
<head>Purpose: Specifies the character encoding for the document, ensuring proper text rendering. UTF-8 is widely recommended for supporting various characters.
Viewport Settings
Tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Position: Inside
<head>Purpose: Ensures proper scaling and responsiveness on mobile devices, making your site accessible on various screen sizes.
HTML Element
Tag:
<html lang="en">Purpose: The root element of the HTML document. It contains all other elements on the page.
Purpose of “lang” attribute: Specifies the primary language of the document, which helps screen readers and search engines understand the content better and adjust default pronunciation.
Title
Tag:
<title>Position: Inside
<head>Purpose: Provides the title of the webpage, displayed in the browser tab and used by search engines. It should be specific and descriptive of the page content.
Complete HTML Boilerplate Code
Here’s a complete HTML boilerplate that incorporates all these essential elements, along with comments for clarity:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage for SEO and accessibility.">
<title>Your Page Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>Welcome to Your Website</h1>
</header>
<main>
<section>
<h2>About This Page</h2>
<p>This is a basic HTML boilerplate example.</p>
</section>
</main>
<footer>
<p>© 2025 Your Company</p>
</footer>
</body>
</html>
There’s a lot more to discuss when dealing with a boilerplate, as meta tags, stylesheets, javascript optimization and so on, but that’s it for accessibility purposes.
A11y Front-end Roadmap Table of contents
Step 1 - The Essential HTML Boilerplate