Semantic HTML and Accessibility:What I Learned

#webdev #html #bigginers #accessibilty

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.

DEV Community