{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreiagss6dxh5e6bttm7s4vw2adtyphle6vj5rmgur4rurfushx77vyi",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpgtwd2dryt2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreihwttyspyvd5ogcgsnq356wzbs73otpxk6wqtbgvj4r6o5s3ewrh4"
    },
    "mimeType": "image/webp",
    "size": 70114
  },
  "path": "/graceloko/semantic-html-and-accessibility-building-better-websites-1odd",
  "publishedAt": "2026-06-29T15:39:47.000Z",
  "site": "https://dev.to",
  "tags": [
    "html",
    "webdev",
    "beginners",
    "a11y"
  ],
  "textContent": "#  Semantic HTML and Accessibility: Building Better Websites\n\n##  Introduction\n\nSemantic HTML is the practice of using HTML elements that clearly describe the purpose of the content on a webpage. Instead of using many `<div>` elements, semantic tags such as `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, and `<footer>` make the page easier to understand.\n\nSemantic HTML is important because it improves accessibility, helps search engines understand web pages, and makes code easier to read and maintain.\n\n##  Before: Non-Semantic HTML\n\n\n    <div class=\"header\">\n        <h1>My Portfolio</h1>\n    </div>\n    <div class=\"navigation\">\n        <a href=\"index.html\">Home</a>\n        <a href=\"about.html\">About</a>\n    </div>\n    <div class=\"content\">\n        <p>Welcome to my portfolio website.</p>\n    </div>\n\n\n##  After: Semantic HTML\n\n\n    <header>\n        <h1>My Portfolio</h1>\n    </header>\n    <nav>\n        <a href=\"index.html\">Home</a>\n        <a href=\"about.html\">About</a>\n    </nav>\n    <main>\n        <section>\n            <p>Welcome to my portfolio website.</p>\n        </section>\n    </main>\n\n\n##  Accessibility Issues I Found\n\n###  1. Images Missing Alternative Text\n\nBefore:\n\n\n\n    <img src=\"images/profile.jpg\">\n\n\nAfter:\n\n\n\n    <img src=\"images/profile.jpg\" alt=\"Profile picture of Grace Loko\">\n\n\nAdding alternative text allows screen readers to describe images to users with visual impairments.\n\n###  2. Navigation Was Not Semantic\n\nBefore:\n\n\n\n    <div>\n        <a href=\"index.html\">Home</a>\n        <a href=\"about.html\">About</a>\n    </div>\n\n\nAfter:\n\n\n\n    <nav>\n        <a href=\"index.html\">Home</a>\n        <a href=\"about.html\">About</a>\n    </nav>\n\n\nUsing the `<nav>` element helps assistive technologies identify the website navigation.\n\n###  3. Form Inputs Had No Labels\n\nBefore:\n\n\n\n    <input type=\"text\" placeholder=\"Your Name\">\n\n\nAfter:\n\n\n\n    <label for=\"name\">Name</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n\n\nLabels improve accessibility by helping screen readers identify each form field.\n\n##  Conclusion\n\nThis accessibility audit helped me understand the importance of semantic HTML and accessible web design. By replacing non-semantic elements with semantic tags, adding image alt text, and using proper form labels, I made my portfolio more accessible and easier to use.\nThese improvements also make the website easier to maintain and improve the experience for all users.",
  "title": "Semantic HTML and Accessibility: Building Better Websites"
}