Semantic HTML and Accessibility:What I Learned

GRACE KAISAI SAIGILU — Sun, 04 Oct 2026 06:54:24 +0000

Introduction

When I started learning web development, I focused mainly on making a webpage look good. However, I learned that a good website should also be easy for people to understand and use.

Semantic HTML and accessibility help make websites more meaningful and usable for everyone.

What is Semantic HTML?

Semantic HTML means using HTML elements according to their purpose. Instead of using <div> for everything, we can use elements such as <header>, <nav>, <main>, <section>, and <footer>.

Before

<div>
  <div>My Portfolio</div>
  <div>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </div>
</div>



### After

html

My Portfolio

Home
About
Contact

<h2>Welcome</h2>
<p>Welcome to my portfolio website.</p>



<h2>About Me</h2>
<p>I am learning web development and building my skills in HTML and CSS.</p>



<h2>Contact</h2>
<p>If you would like to get in touch with me, feel free to send me an email.</p>

Welcome

Welcome to my portfolio website.

About Me

I am learning web development and building my skills in HTML and CSS.

Contact

If you would like to get in touch with me, feel free to send me an email.




The semantic version is easier to understand because each element describes its purpose.

Accessibility

Accessibility means making websites easier for everyone to use, including people who use screen readers or other assistive technologies.

Using semantic HTML helps browsers and assistive technologies understand the structure of a webpage.

For example, using <nav> for navigation and <main> for the main content gives the page a clear structure.

What I Learned

From this task, I learned that building a website is not only about making it look good.

I learned how to:

Use semantic HTML elements.

Organize a webpage using <header>, <nav>, <main>, <section>, and <footer>.

Make websites easier to understand.

Improve accessibility.

Write cleaner and more meaningful HTML.


My Portfolio

You can view my portfolio here:

https://gracesaigilu.github.io/web-foundations-/

Conclusion

Learning semantic HTML and accessibility has helped me understand that a good website should be meaningful, organized, and easy for everyone to use.

I will continue practicing and improving my web development skills.

My Web Foundations Portfolio

GRACE KAISAI SAIGILU — Sun, 04 Oct 2026 05:26:32 +0000

Hello everyone! 👋

I’m excited to share my Web Foundations portfolio. This project is part of my journey in learning web development.

What I learned

During this project, I learned how to:

Create a webpage using HTML
Structure a website properly
Use Git and GitHub
Publish a website using GitHub Pages
Build and improve my developer portfolio

My Portfolio

You can view my portfolio here:

https://gracesaigilu.github.io/web-foundations-/

Conclusion

This project has helped me understand the basics of web development and how to publish my work online. I’m looking forward to learning more and building better projects. 🚀

DEV Community: GRACE KAISAI SAIGILU

Semantic HTML and Accessibility:What I Learned

Introduction

What is Semantic HTML?

Before

My Portfolio

Welcome

About Me

Contact

My Web Foundations Portfolio

What I learned

My Portfolio

Conclusion