Learn to Code: Episode 009 – Semantic Elements – Intro to HTML Part 6

HTML Sementic Elements

In the last episode, I’ve mentioned that we will start to discuss CSS next. However, there are few more important HTML Tags that I forgot to discuss.

In this episode, we will take a quick look on what is called Semantic Elements. These HTML elements clearly defines its content. <div> and <span> are examples of non-semantic elements because it does not tell anything about its content without the class attribute. <form>, <table>, and <header> are examples of semantic elements because it clearly says something about its content.

As you can see from the example above, semantic elements are not new. <form> and <table> has been around since the early days of HTML. However, in the case of <table>, it is not clearly used back then in the way that it is intended to be used. I used it personally to layout my HTML contents, but it was intended to be used to show data.

Fast forward to 2014 when HTML4 was upgraded to HTML5 includes some new “semantic” elements like <header>. Before we commonly use <div> and <span> with id and class attributes to differentiate (e.g., styling and programmability) or simply describe the contents within. Using the new semantic elements, both humans and machine can easily read the contents especially for developers who deal with thousands of lines of code everyday. It also adds to a more consistent code.

Visit w3schools for more information about Semantic Elements.

VSCode Live Server

Also in this episode, I will introduce a very useful Visual Studio Code extension called Live Server. This is helpful to quickly see the updated HTML rendered in the browser.