Semantic markup is the use of HTML markup to reinforce the meaning of the information in webpages rather than merely to define its presentation or look. Semantic HTML tags provide beneficial effects on the accessibility, adaptability, and overall performance of your websites.
"But why does it matter in responsive design?" you might ask.
To answer this question, consider a city map. The map helps you understand locations and directions, where to find landmarks, restaurants, parks, and so forth. It gives meaning to the layout of the city.
Semantic HTML serves a similar purpose for your webpage. It acts as a guide for the browser displaying your webpage, assisting it in understanding the structure and offering suitable styles and configurations for different elements. While non-semantic HTML tags like <div> and <span> tell nothing about its content, semantic tags like <header>, <nav>, <section>, <article>, <aside> and <footer> describe precisely what kind of information you can expect within them. This ensures a consistent cross-screen layout as the browser knows how to correctly display these elements regardless of the screen size.
Have a look at this example:
In the above snippet, each HTML element plays a particular role. The <header> holds website's title, <nav> is for navigation links, <main> for the main content of the webpage, <article> for individual content block, <aside> for side content, and <footer> for the footer.
Using these semantic tags ensures the browser knows what each section is and how to display it relative to other sections, even on different screens. This makes your webpage layout consistent across a variety of devices making your web page truly responsive.
Remember, using semantic markup in HTML is not only a good practice but a journey towards creating more accessible, discoverable, and robust web pages. So, buckle up and start implementing these in your code today! 🚀
