Semantic Elements in HTML

Semantic HTML elements , are the element introduced mostly in HTML's version 5, HTML 5, to make it easy for the programmers to lay out the different sections of a web page using the semantic elements like <header>, <footer> <nav> <section> <aside> etc. instead of struggling with CSS to design these page layout elements using <tables> or <div> as web developers would do before HTML 5.

But I feel with the advent of component driven javascript frameworks/libs like React or Angular, and CSS flex-box or frameworks like bootstrap, Material UI or tailwind , now it easy to use <div>s to design those layout sections and we don't see programmers these Semantic HTML elements.

One advantage of use of Semantic elements I could see is it would make the HTML code more readable, easy to understand compared to reading a bunch of nested <div>s, but again, with components, you can split that big bunch of <div>s to smaller components giving each component a meaningful, readable name, so I don't see any big advantage using Semantic elements, not yet.

Last updated