Introduction
Building a website involves more than making content appear in a browser. A good website should have a clear structure, communicate meaning through its HTML, and be accessible to different users.
When I first started structuring my webpage, I used generic "div" elements to group content. Although they worked visually, they didn't communicate the purpose of each section through the HTML itself. I explored semantic HTML and accessibility to understand how these principles improve web development.
From Generic Divs to Semantic HTML
I replaced generic containers with semantic elements such as "header, "nav", "main", "article", "aside", and "footer". This made the structure more meaningful and the code easier to understand and maintain.
The lesson I learned is that choosing the right HTML element matters. Although elements such as "div" and "section" can both group content, they serve different purposes. A "div" is a generic container, while a "section" represents a thematic grouping of related content.
What Is Semantic HTML?
Semantic HTML uses elements that describe the purpose of their content. For example, "header" identifies introductory content, "nav" represents navigation, "main" identifies the primary content, and "footer" represents footer information.
Using generic "div" elements for every section can produce a visible webpage, but it doesn't communicate the same meaning to browsers, developers, and assistive technologies.
Before:
Home
About
Contact
After:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
The second version gives the navigation a meaningful role, organizes the items into a list, and makes them functional links that users can follow.
Accessibility Improvements
- Meaningful Image Alternatives
Images should have appropriate alternative text so that users who cannot see them can understand their purpose when the image conveys useful information. I used the "alt" attribute to provide a text alternative for my image.
- Clear Heading Structure
Headings help users understand a page's organization. I structured my content with a main "h1" heading followed by "h2" headings for major sections, making the content hierarchy easier to follow.
- Form Labels and Input Validation
Forms should have labels associated with their inputs. I used "label" elements connected to their corresponding inputs through matching "for" and "id" attributes. I also used appropriate input types, required fields, and a minimum message length to provide browser-side validation.
These techniques improve usability, although they do not replace the need to test a form's overall accessibility and functionality.
Conclusion
This project helped me understand that semantic HTML and accessibility should be considered from the beginning of development. Meaningful elements make code easier to understand and maintain, while appropriate image alternatives, logical headings, and accessible form labels help more people use a website.
View my portfolio: https://wairimuevans.github.io/iyf-s12-week-01-WairimuEvans/
As I continue learning web development, I intend to apply these principles to larger and more interactive projects.
Top comments (1)
This is a really thoughtful first portfolio writeup. Swapping generic divs for header, nav, main and footer sounds small, but you clearly understood why it matters for assistive tech and not just for tidy code, and that's a big step. Your explanation of div versus section is one I'd happily share with anyone starting out. Did you try the finished portfolio with a screen reader, and if so, what surprised you most?