Today's lesson on my road to becoming a fullstack developer was all about semantic HTML, courtesy of freeCodeCamp.

Ttoday I learned that the tags themselves carry meaning and using them carelessly has real consequences for accessibility, search rankings, and devex

First, What Does "Semantic" Even Mean?

Semantics means: the meaning of words or phrases in a language. And since HTML is a language too, its elements have their own semantic meaning.

The easiest way to picture this is to think of your HTML document like a text document. A text document has headings, images, bold text, and other formatting and HTML has elements that represent each of those.

The semantic meaning of an element is the special information that element conveys. A p element, for example, says "this is a paragraph of text":

<p>
  Let me tell you about my fantastic holiday in Paris.
  I saw the impressive Eiffel Tower up close!
</p>

Most elements have semantic meaning. The div element is one of the very few that doesn't — it's just an empty, meaningless box. Using divs isn't a crime  but as I learned today, leaning on them for everything is a habit worth breaking.

Why Should You Care? Three Big Reasons

Proper semantic HTML isn't about being pedantic — it comes with three very practical benefits:

1. It makes your site work better for people using assistive technology. Screen readers read pages out loud, and they rely on meaningful elements to understand and describe what's on the page. 
2. It can improve your search rankings. This is called search engine optimization, or SEO
3. It makes development way less painful. Instead of sifting through a pile of divs to find your navigation bar, you can edit the nav element directly and know exactly what you're changing.

Heading Hierarchy

The most important part of building a structural hierarchy is using heading elements properly.  h1, h2, h3, and so on. That number is the heading's level, and much like in a text document, you don't want to use them in the wrong order.

• h1 is your top-level heading. You'll rarely have more than one per page, and it should typically come before all of your content.
• h2 is your subheading. It always comes after the h1 sometimes after a bit of introductory text, and unlike h1, you can have multiple h2s on a page. You'll often use them to split your content into sections.
• h3 comes after an h2. You should never skip directly from h1 to h3 — but you can have multiple headings at the same level.

For example, this structure is correct:

<section>
  <h1>freeCodeCamp</h1>
  <h2>Learn Front-End Development</h2>
  <h2>Learn Back-End Development</h2>
</section>

using h1 just because you want big text is not preferred. You should use CSS to do that.

Why this matters:

• Accessibility screen readers rely on the structure of a page to decide how to parse and announce it.
• SEO: search engines use automation to parse your page. So bad structure results in bad ranking
• Validity: depending on how incorrect your structure is, your HTML may not even be technically valid.

Presentational HTML: The Old Way (deprecated method)

Presentational HTML focuses on the appearance and style of content. In the early days of the web, developers used elements like center, big, and font. Modern web development has moved on, and you shouldn't use these types of elements anymore. For example:

The font element was used to set the font size and color of text:

<font size="5" color="blue">This text is blue and large.</font>

Note: the size attribute ranges from 1 to 7 

The center element was used to center content horizontally within its container:

<center>
  This text is centered.
  <p>HTML is awesome.</p>
</center>

And the big element made text one level bigger than the surrounding text:

<p>
  This text has a normal font size.
  <big>This text is larger.</big>
  Some other text.
</p>

As you might have noticed, we don't need these anymore because we have a better tool to do this in the form of CSS.

Semantic HTML: The Modern Way

Semantic HTML is the recommended practice today. Instead of describing how content should look, it describes what the content is. That makes it much easier to read, understand, and maintain.

It also helps the machines that read your page: search engines can easily understand your website, and screen readers get the semantic information they need to describe what's on it.

A few examples:

• header — for defining the header of the document or a section
• nav — for sections with navigation links
• section — for grouping related information
• figure — for illustrations and diagrams

Here's a header element containing a navigation section:

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

The purpose of each element is right there in the name — the elements clearly show their role within the structure.

A Little Cheat Sheet

Element	What it means
p	A paragraph of text
h1 – h6	Headings in order of importance — h1 is the top level
header	The header of the document or a section
nav	A section with navigation links
section	A grouping of related information
figure	An illustration or diagram
div	Nothing at all — a generic container with no semantic meaning

My Takeaways from Today's Lesson

A few things I want to remember from today:

• HTML is for meaning, CSS is for looks. The moment I stopped asking "which tag makes this look right?" and started asking "what is this content?", the whole thing clicked.
• Accessibility isn't an afterthought. Someone using a screen reader experiences my page through the tags I choose. That alone is reason enough to do this properly.
• Skipping heading levels is more than a style problem. It actively confuses screen reader users and search engines — it's not just untidy.
• "It works" isn't the same as "it's right." Deprecated elements still render in browsers, but that doesn't make them a good idea.
• Personal mission: stop using div for everything. If something is a navigation bar, it deserves to be a nav.