With the creation of a new HTML language, HTML5, comes new and improved semantic elements. According to freecodecamp.org, semantic elements “accurately describe the purpose of the element and the type of content that is inside them” (FreeCodeCamp, 2019). These include examples such as <header>, <footer> and <article>. By just reading it, you can clearly tell what the content is and it’s purpose.
This differs from some non-semantic elements that are common in previous versions of the HTML language. Non-semantic elements make it less obvious as to what they represented. For example, <div> is used to help classify different elements. Instead of writing out <footer>, you could write <div class= “footer”>. While in the early stages of HTML this was fine, but with semantic elements it helps create a more universal language that is easier to read. A great example is shown on FreeCodeCamp, where they compare semantic vs. non-semantic elements.
Coding written with semantic elements will look like this:
Coding written with non-semantic elements will look like this:
As you can see, with the use of semantic elements makes the coding much easier to understand. It also clears up any confusion that <div class> vs. <div id> brings, since they both mean the same thing. This creates a more universal language with consistency. I think that the consistency that it brings is the most important point. Every coder can use the same exact tags so there is no confusion as to what they are using throughout their code.
Basic Semantic Elements
Above represents the layout of your webpage. A <header> usually represents the main heading on your page above your navigation. A <nav> is any navigational menu you may have on your site (whether at the top of your page or in the sidebar or the <aside>. In regards to <section> and <article>, they are very similar and you can use them interchangeably. The main difference between the two is that articles can be used independently while sections bring together groups of content with an overarching theme. Other tags include <time>, <summary>, <figure> and <figcaption>. The latter two are for showing images and their descriptions.
Overall, the use of semantic elements makes HTML language easier to understand and easier to write. As someone who is just learning to code, these new HTML5 elements are a lifesaver. I think that if I tried to learn simply using <div class> and <div id> that it would seem extremely overwhelming. When using semantic elements I can understand why tags go in certain places rather than having to guess how pieces of the puzzle fit together.