Looking at the markup you just wrote, you'll realise that besides displaying elements differently, we used different tags to give some indication to the browser about the meaning of the content.

h1 tags which are used once, gives the text it wraps the meaning of central heading on your page, which is why it's the one with largest font size. However, looks are not everything.

Once you start learning about CSS, you'll quickly realise that even elements like an h4 or a p could potentially look exactly like the h1. So, you might be asking - why bother then?

HTML should be written to represent the data that it will be populated with and this brings some benefits:

• Search engines will rank your page according to how semantic your markup is.
• Screen readers can use it as a signpost to help visually impaired users navigate a page.
• It improves the experience of the developer who didn't write the markup but is now coming across it to make some changes.

So, when writing some content, you should be asking yourself:

• What element(s) will represent this data properly?

Before you proceed, please watch this video about screen readers.

Also, keep this link as a reference. It is a checklist on accessibility. A must if you decide to specialise in this area.

So, let's look at this image:

A list should be a list, a table should be a table, a paragraph should be a paragraph, and it goes on.

Here are some of the elements you should use:

• <header>
• <nav>
• <main>
• <div>
• <span>
• <section>
• <footer>

All of these elements have a closing-tag.

<header> and <footer> are self-explanatory.

<main> can be used for dominant piece of content in the document, as when you're expanding the central topic.

<nav> is used when we want to provide navigation links, either within the document or outside. We'll expand on this later.

Here's a list with 100 elements being referenced.

Strong & Emphasis

Some text elements are not intended to affect the structure of your web page, however they do add extra information to it.

The use of the <strong></strong> element indicates that its content has strong importance. For example, when a screen-reader is reading the content of a page, it will pronounce this content with a strong emphasis.

The same happens when we use <em></em>, which is the twin of <i>, but for a screen reader it indicates emphasis that subtly changes the meaning of a sentence.

Practical:

Now that we've learned how important semantics are, shall we make some changes to our file?

1. Your heading and sub-heading should now be inside of a header element.
2. Also, your "About Me" should be in its own section.
3. Add a footer section which contains the current year, followed by a reference to who created the document.
4. Everything between the header and footer would ideally be inside a main element. Make the appropriate changes.
5. Once you're happy with the result, add the file to the staging area, commit it with a meaningful message and push it to GitHub.

You'll realise that visually, it won't make a difference, but semantically it is more correct.