Using HTML Semantics
HTML can be confusing.
Its never as straight forward as you want it to be, with a seemingly infinite amount of options, all coming together to make a site that can stand on its own.
With div, image and p tags everywhere, how can web developers simplify it?
That is where HTML semantics come in, giving users an easier way to clearly define sections or aspects on your page without needing to throw everything in a generic div tag.
Well, what is semantic element?
Semantic elements are tags that clearly define its meaning or purpose to both the web browser and the developer.
A common example of this is a <nav> tag. This is often used to describe the nav bar for the site, containing all the code within used to create the bar.
This is extremely useful for developers, especially when the site being worked on is large and has multiple active developers. These semantics ensure that everyone is on the same page.
It goes beyond just <nav> as well, with some of the most common elements used being: <main>, <header>, <section> and <footer>.
These can be used to help better layout elements within your site, allowing for developers to quickly jump in to fix a problem in the footer, or change out a link in the nav bar.
Lets take a look at a real life example.
Below is a screenshot of Apple’s website, with Chrome’s Inspect Element open. Here we can see clear how Apple’s developers use HTML semantics to more easily define different sections of their site, using <nav>, <main> and <footer> just as a start.
While not necessary, new developers should be looking for ways into incorporate HTML semantics into their next project, giving themselves a leg up, while also submitting cleaner code that a future client can better understand and appreciate.
Overall, HTML semantics prove to be an excellent way simplify the coding process, making your work easier to come back to, months or years down the line.
Semantic HTML: What it is and how to use it correctly. Semrush Blog. (n.d.). https://www.semrush.com/blog/semantic-html5-guide/
W3Schools. (n.d.). HTML semantic elements. W3Schools. https://www.w3schools.com/html/html5_semantic_elements.asp