Semantic HTML and Accessibility : what I learned and fixed
I'm learning web development, and I recently ran a Google Chrome Lighthouse audit on my index.html page. The experience showed me how the HTML tags I choose affect real people, not just how a page looks.
What Is Semantic HTML?
Semantic HTML means using HTML elements that describe the meaning and purpose of their content, such as <header>, <nav>, and <main>, instead of using generic <div> elements for everything.
Semantic HTML matters for three main reasons:
- Accessibility: Screen readers use HTML landmarks to help users navigate different sections of a webpage.
- Search engine optimization: Meaningful HTML structure helps search engines understand the content of a page.
- Code readability: Semantic elements make code easier for developers to read, understand, and maintain.
Before and After: Semantic HTML
Before using semantic HTML, a page might rely heavily on generic <div> elements.
Before: Non-Semantic HTML
<div class="header">
<div class="menu">...</div>
</div>
<div class="content">
</div>
Although this code can work, the elements do not clearly communicate the purpose of each section.
After: Semantic HTML
<header>
<nav>
...
</nav>
</header>
<main>
...
</main>
This structure makes the purpose of each section clearer and provides useful landmarks for assistive technologies.
Issues I Found and How I Fixed Them
1. Missing Main Landmark
Lighthouse identified that my page was missing a <main> element.
I fixed this by wrapping the primary content of my webpage inside a <main> element. This helps screen-reader users identify the main content and navigate the page more efficiently.
2. Incorrect Image Aspect Ratio
Another issue involved an image's aspect ratio. Images that are stretched or displayed with incorrect proportions can affect the visual experience of a website.
One way to make images responsive while preserving their natural proportions is to use CSS:
img {
max-width: 100%;
height: auto;
}
This allows images to shrink to fit their containers without being stretched vertically.
3. Missing Meta Description
I also identified a missing meta description.
A meta description provides a brief summary of a webpage's content and may appear in search engine results.
I added a description inside the <head> section of my HTML document.
The description should accurately reflect the actual content of the page.
The Result
After making the changes, I ran the Lighthouse audit again to evaluate the improvements.
My Accessibility score went from 97% to 100%.
This experience helped me understand that website quality involves more than visual appearance. Accessibility, structure, and usability are also important parts of building a good website.
What I Learned
Before running the audit, I mainly focused on how my website looked and whether its features worked as expected.
However, I learned that small decisions, such as choosing appropriate HTML elements, can influence how people interact with a website.
I'm beginning to understand that writing good HTML is not simply about making a page display correctly. It is also about making the page meaningful, accessible, and easier to navigate.
As I continue learning web development, I want to pay more attention to semantic structure and accessibility when building websites.
Final Thoughts
Running a Lighthouse audit gave me a practical way to identify areas where my portfolio could improve.
As a beginner, I'm learning that building websites involves continuous testing, identifying problems, and making improvements.
I still have a lot to learn, but this experience has encouraged me to think beyond appearance and consider the people who will actually use the websites I build.
What was the first website improvement that taught you something important about web development?
Top comments (0)