A friend of mine introduced me to roadmap.sh. It's honestly a good guide to follow to become a good developer for beginners or averagely experienced developers like myself.

I selected the frontend roadmap because I am a frontend developer though aiming to be full-stack. I wrote down the paths and started making my researches as regards them.

I would be sharing what I was able to gather during my researches. I would also be sharing these articles on my blog @ Dillion Megida - Dev.to.

Before I proceed, I recommend you go through the roadmaps for front-end development.

The first on the list is HTML, and the tags are:

Learn the basics
Writing Semantic HTML
Basic SEO
Accessibility

I won't be going through the first tag as I believe that you should know the basics of HTML. Else, you could read about HTML here. If you go through the platform well enough, you should see a thing or two about Semantic HTML. Though, that is what I'd be writing about today.

Writing Semantic HTML

Semantic HTML is HTML that gives meaning to the web page rather than just a presentation.

What do I mean?

Rather than just aiming to present the visuals (which may be attractive also), descriptive meanings are attached to the page.

By adding semantic tags to your document, you provide additional information about that document and this aids in communication. They make it clear to the browser what the meaning of a page and it's contents is. This clarity is also communicated with search engines thereby increasing SEO.

Semantic Elements

These are elements with meaning. Examples are <code>, <em>, <blockquote>, e.t.c

HTML5 offers new semantic elements that add meaning to a page. They include:

I am not going to be explaining each in detail, but we'll be looking at a few.

Before the introduction of these new semantic tags, most developers would do something like this;

...
<div class='navbar'>
    ...
</div>
<div class='content'>
    ...
    <div class='article-section'>
        ....
    </div>
    ...
</div>
...

With adequate stylings, you'd achieve the actual presentation you want. But then, no much meaning to your page.

With these new semantic elements, our code above can be transformed to,

...
<nav>
    ...
</nav>
<main>
    ....
    <section>
        ....
    </section>
    ...
</main>
...

The div tag is just a container that divides the pages into sections. That's all. But with <nav> and <main> tag as used above, we can already predict what such sections will contain.

N.B: You can choose to add classes, but at least, those sections now have meanings.

Like I mentioned above, these tags also aids faster SEO as the page is well described.

That's all in this section. You can read more here. Stay tuned for the second section.

Thank you : )

SEMANTIC HTML - Part 1 of Frontend Development Series

Writing Semantic HTML

Semantic Elements

N.B: You can choose to add classes, but at least, those sections now have meanings.