Semantic HTML elements like <header>, <footer>, <nav>, <section>, and <article> serve the purpose of giving structure and meaning to a web page. Each one indicates the role of the content it contains. The <header> element typically holds introductory content such as a logo, site title, or navigation links and is often found at the top of a page or a section. The <footer> element appears at the bottom and usually includes copyright notices, contact information, or secondary navigation. <nav> is used specifically for blocks of navigational links that help users move through the site. The <section> element is for grouping content that shares a related theme or purpose, often introduced with a heading. <article> is used for content that stands on its own, like a blog post, news story, or forum post. Something that would make sense even if pulled out of the context of the page.
These elements are different from the <div> element, which is a generic container with no inherent meaning. A <div> is useful for grouping content for styling or scripting, but it doesn’t describe what the content is. While both semantic elements and <div>s can be styled using CSS, semantic tags offer the added benefit of making the structure clearer to developers, screen readers, and search engines. They improve accessibility and SEO by explicitly stating the role of the content, whereas a <div> requires additional labels or roles to convey that meaning. In short, semantic elements should be used when the structure and purpose of the content can be clearly defined, while <div> is best reserved for cases when no existing semantic tag applies.
