Making markup easier

Earlier this week I went on a nostalgia trip through the old design of my websites, and although they had charm, the markup was mostly just 3 elements
<div>, <a>, and <img>.
I couldnt make any heads or tails of what I did. This, coupled with seeing the same kind of "div soups" in other places *cough*Twitter Desktop*cough*, motivated me to explain a better approach to markup I've seen in other places, called Semantic HTML

What is semantic HTML?

In simple terms, it's writing the HTML tags that are appropiate for each kind of content in your site, we are no longer bound to the sparse amounts of tags of HTML3, where most of those were just for different kinds of text transformations like <center>, or multimedia content like <object> or <audio>, ever since HTML5, we have a lot more tags, most of which are just to explain what kind of content goes into them, and support for them is pretty good too

Why use it?

Although I can only speak from experience, it leads to writing much clearer and more compact HTML, and since theres also a clear delineation of what is what, that also means much clearer CSS because you can target elements directly instead of using many classes, and that frees those up to do other things, like larger components; to supplement instead of implement.
Semantic HTML also helps for anyone who's visiting your website on a restricted device, like a Palm (they still exist!), or a screen reader, since they can infer more meaning from the markup and act accordingly.

How can I do it?

Well, begin looking at your website, think about what each part of it "means", and look it up on the element list!, then, you can start changing your divs for more semantic elements, and when youre done you can reorganize your css! however, this does not mean "change all your divs by something else", since divs still have the semantic meaning of not having meaning, which still has it uses, like the navigation at the bottom of this blog!

<nav class="navs row-flow">
	<div>
		<span>older</span><br>
		<a>older blog post</a>
	</div>
	<div>
		<span>newer</span><br>
		<a>newer blog post</a>
	</div>
</nav>

here we have an element which is only being used to contain the other elements (for styling purposes), so in terms of content, it doesnt exist, that's why a div was the correct choice!

Further reading

Why, How, and When to Use Semantic HTML and ARIA by Adam Silver