How I learned HTML (Part 1)

Part 1 of 2 on how I learned HTML (accessibility)

Photo by Tim Gouw on Unsplash

In my last post, I mentioned how when I first started learning HTML I tried to remember everything. I tried to jam pack all the information I could remember. However, this was not the best idea. I eventually found a way to learn HTML by looking at the core concepts. With this knowledge, I want to share some things that helped me with learning HTML. This is part 1 of 2 in learning HTML.

Things to practice doing if you aren’t already

  • Use more semantic tags (nav, section, article, header, main etc) you can find more about these things from w3schools.
  • Make sure it’s accessible!

HTML (SEO accessibility)

Web accessibility means the elements on the page needs to describe what the content is. Screen readers can understand this, which makes it easier for people with disabilities to navigate around.

Semantic tags

*Not recommended*

<div class="header"><div class="nav">I'm the navigation content</div></div><div class="main_content"><div class="my-button">Click me!</div></div>

*Recommended*

<header><nav>I'm the navigation content</nav></header><main class="main_content"><button class="my-button">Click me!</button></main>

Headings

using h1-h6 headings

<h1>Large size</h1><h2>Semi large size</h2><h3>Medium size</h3><h4>Small size</h4><h5>Smaller size</h5><h6>Very small size</h6>

Alternative text

Using the alt text in mages text the browser if there is no image the alt text will say what the image was supposed to be.

<img src="dog.jpg" alt="picture of dog" />

Links

Make sure your links are clearly stating where the link is taking you by clicking it.

*Not recommended*

<a href="#">Click here</a><a href="#">read more</a><a href="#">tickets here</a>

*Recommended*

<a href="#">Find out more about HTML language</a><a href="#">Buy tickets to concert here</a><a href="#">Learn how to eat healthy</a>

This wraps up this post with hopes that this was helpful for you guys to understand that accessibility is very important to know and to practice among future projects. Of course, there is a lot more information about the topic on W3Schools and MDN I’m just going over the ones I use on a daily basis. Stay tuned for my part 2 of learning HTML were I’ll go over creating the structure a.k.a layout while being accessible.

*UPDATE* link to part 2 is here

--

--

--

A passionate web developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajea Smith

Ajea Smith

A passionate web developer

More from Medium

How do I start to design my website?

How to create more accessible media with these tips

Man taking video of woman on rooftop

How To Make It Easier For People To Reach Out To You On Your Website

Should Frontend Devs Care About Performance?