Semantic HTML makes a page’s structure meaningful to browsers and assistive technologies. When I audited my portfolio, I found generic containers, images without useful alternative text, form fields without properly associated labels, and a heading sequence that skipped a level. Fixing those issues made the page’s structure clearer; it did not, by itself, prove the whole site accessible.
What semantic HTML is—and why it matters
Semantic HTML uses elements that describe the role of their content instead of relying on generic containers such as <div> for every part of a page. A <nav> element identifies navigation, for example, while <main> identifies the page’s primary content.
As an Amazon Associate I earn from qualifying purchases.
That meaning can help people navigate and understand a page, including people using screen readers or keyboard navigation. W3C WAI explains that landmarks can expose major page regions to assistive technologies. Its H101 guidance says: “Landmarks provide an easy way for users of assistive technology understand the programmatic structure of a page and skip over content they’re not interested in.” W3C WAI’s H101 technique gives examples including <header>, <nav> and <main>. Whether an element creates a landmark can depend on its context, so semantic markup is not a matter of assuming every meaningful element becomes one.
W3C describes its techniques as examples, not mandatory implementation recipes. The point is to communicate structure and purpose in ways that work for the page and its users—not to treat a particular set of tags as a guarantee of conformance.
#1 Best Overall
What I found when I audited my portfolio
In her DEV Community post, Faith describes auditing her portfolio and finding several opportunities to improve its markup. The examples below are her account of that site-specific audit, not findings from an independent assessment of the portfolio.
Generic containers where structure could be clearer
Faith replaced generic wrappers with elements such as <header> and <nav> where they better described the content. Using the right structural element can make a page easier to interpret and can expose landmark regions. The choice should reflect what the content actually does: a visual box does not become navigation simply because it looks like a menu.
Images without useful alternative text
She found placeholder images without descriptive alt text and added text describing a profile picture. The right alternative depends on an image’s purpose and context. A profile image may need a concise identification; a decorative image may need no spoken description. Alternative text should convey the image’s relevant purpose, not mechanically describe every visual detail.
Form fields without associated labels
Faith connected form fields to their labels using matching for and id attributes. W3C WAI’s Forms Tutorial puts the principle plainly: “A label and a form control should be associated with each other either implicitly or explicitly.” For an explicit association, the label’s for value must match the control’s id. W3C WAI’s labeling guidance also describes implicit association, where a control is placed inside its label.
For example, an explicit association looks like this:
<label for="email">Email address</label>
<input id="email" name="email" type="email">The visible label tells users what the field is for and gives assistive technology a programmatic name to associate with the control. Placeholder text alone is not a substitute for a properly associated label.
Rank #4
A heading sequence that jumped from h1 to h3
Faith also found a page that moved directly from an <h1> to an <h3>. She restored a more hierarchical sequence. Headings are not merely large or bold text: marked-up headings help create a navigable outline. W3C WAI recommends nesting headings by rank and avoiding skipped ranks where possible. A skipped number does not automatically mean a page fails WCAG, but a coherent hierarchy is clearer to navigate. See W3C WAI’s headings guidance.
How to apply the same audit to your own page
- Check the page’s main regions. Identify its header, navigation, primary content and any footer. Use elements such as
<header>,<nav>and<main>when they accurately describe those regions, rather than using generic containers by default. - Review images in context. Ask what information or function each image contributes. Provide concise alternative text when it matters to understanding or using the page; avoid adding an unnecessary description to decorative imagery.
- Verify every form control has a label. Associate each label and control implicitly or explicitly. For explicit association, make sure the label’s
forvalue exactly matches the control’sid. - Inspect the heading hierarchy. Use heading elements for section headings and nest them in a logical order. Avoid skipping ranks where possible, and do not choose a heading level solely for its visual size.
- Use tools as checks, not as the entire evaluation. Faith says she used Chrome DevTools Lighthouse and WAVE. W3C WAI distinguishes automated evaluation from manual review and recommends choosing tools in the context of an evaluation process. Its tool-selection guidance can help clarify what a tool can and cannot assess.
What a perfect Lighthouse score can—and cannot—tell you
Faith reports that after making the fixes, her portfolio received a perfect Lighthouse accessibility score. That is her reported result, not an independently reproduced measurement, and it is not proof that every part of a site is accessible. Automated tools can detect some issues, but they do not replace appropriate manual review. A score is one useful signal within an evaluation, not a complete verdict on a person’s experience.
Best Value
Faith’s central lesson is practical: meaningful markup makes structure and purpose more explicit. Pair it with thoughtful image alternatives, correctly associated labels, a logical heading hierarchy and evaluation that goes beyond automation, and a page is better positioned to serve a wider range of users.
Quick Recap
Sources
- Faith, “Why Semantics Matter: My Journey Into Web Accessibility,” DEV Community. The search result shows Sep 30 but not a year.
- W3C WAI, Page Structure Tutorial.
- W3C WAI, H101: Using semantic HTML elements to identify regions of a page.
- W3C WAI, Labeling Controls, updated 13 May 2024.
- W3C WAI, Headings.
- W3C WAI, Selecting Web Accessibility Evaluation Tools.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
