Think Like THIS Before You Learn HTML

Before you really start to learn HTML, it's important to understand semantics. Semantic HTML tags will give additional meaning to your page and make it "make sense." What's the point? You want the browser to understand exactly what you are trying to communicate, not just display.

Well, they look the same...

If there are tags that "look" the same in the browser, that does NOT mean they are the same. They actually convey completely different meanings. For example, if you use either the <em> tag or the <i> tag, you'll notice that both will make your content look italicized. However, they don't mean the same thing.

<em> tag is meant for emphasizing content, like you might hear in dialogue. If you have a screen reader, you'll hear the "verbal" emphasis when it comes across a word with the <em> tag. <i> tag is used just to italicize content (no "emphasis"), like titles of books.

For example, "why can't you do the dishes Bob?"

• I used the <em> tag for the word you.
• ^^^ Just in the sentence above, I used the <i> tag to simply italicize the word you.

I can use just div's...

No, honey. Please do NOT just use div's. This will make it harder for the browser and other developers to understand your code. div's should definitely be used when needed, but keep in mind that they don't hold semantic value. I made this a bad habit and literally used div's all the time. I was giving myself a hard time reviewing my own code.

If you are making a navigation bar, use the <nav> tag. If you want to make a sidebar for additional content, like an advertisement, use the <aside> tag. Check out this list of various kinds of tags you can use. Plan out what you want to create and then use the proper semantic tags to give it meaning!

Part of my #100Devs homework was to recreate the BBC homepage and I used various semantic HTML tags! Check out my code here!

Concluding Thoughts

Practice analyzing websites and think about what tags are being used. Scroll through the website and ask yourself, "is this heading using an <h1> or would it be an <h2>..." Make mock websites and compare your code.

Understand best practices (literally goes for anything you're learning)! This will help save your time and mental energy. Trust me. Don't make the mistakes I made when I was starting out!

Hope this is helpful!

Thanks for reading my friend!

Izzy

Follow me on Twitter: twitter.com/izaye_visuals

-- Note from Izzy:
Feel free to give me any feedback on the mock site I made for homework! I'm still learning and would love to hear your thoughts. Feel free to DM me on Twitter! I'm also in the middle of learning about Git and GitHub and how to put my projects on there. Thank you for being patient!!! I'll put everything that I'm working on in GitHub soon!