ColorCode

According to Wikipedia: "Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look."...

So what does that all mean?

In the Walter White example we made together, in the last video, we used <p> tags, <h1>, <h2>, <ul>, <ol> and <li>. But we didn’t have to. We could have used <p> tags for almost all of the content on that page (except for the image), and later made them look like lists and headers with CSS. But why didn’t we? Actually we didn’t even need to use any tags to be honest with you. We could have just put all the text inside the body tag and be done with it. Why didn’t we?

Consider this. You’re in Mexico drinking tequila...

...All of sudden you remember before you left for Mexico you messed up Mr. White’s name somewhere in the page. Instead of Walter White, you wrote Walter Black. But you’re in Mexico and you can’t update the website right now. You don’t even have your computer with you. So you call your programmer friend, Chad, and ask him to go in there and fix it.

You tell Chad 'Hey the error is in the family list header'. If your HTML has no structure or if it’s just a bunch of <p> tags, Chad will have to manually look for the mistake, maybe read until he finds the issue or search for the word "black". What if there are other instances of the word 'black' on the page and he changes those by accident, and not the one that you meant? You rely on Chad to skim through the page and change the right word. Are you really gonna trust Chad?

Now consider this, what if instead you could tell him 'Hey there’s an <ol>, a list of family members, the heading is wrong'. Chad will instantly be able to find the problem and fix it. Nice job Chad. You don’t have to rely on him looking through the content. In fact the content becomes kind of irrelevant. The HTML structure will be his guide, not the words themselves.

Using tags, the right tags, will bring meaning into your page and into each element. It will give everything in there a role to play. What I’m talking about here is readability. Code readability. Code is already complicated, it’s a new language, we need to simplify it as much as we can.

Similar to Chad, search engines like Google also read your code and try to make sense of it. A header means something to Google, a Navigation tag with elements inside it tells Google hey this website has a bunch of pages people can navigate to, please keep track of them for search results. (Disclaimer: How search results appear in google is more complicated than that),

But forget Chad, and even Google, there are other important reasons to write Semantic HTML. I mean obviously readability. Anyone, including yourself in 6 months, can read your code and know what it means and what goes where. It’s code organization. Things go where they belong. It brings consistency to your code and to all of your projects. Flexibility and scalability, when you can read and find something faster, you can copy, update or delete it faster. Some of this might not make a lot of sense to you right now because chances are you haven’t had to deal with these issues before. But trust me, it’s important to do this from the beginning. You’ll impress.

Ok, all this talk now what? Let’s review our page and add some semantics.