{"id":801,"date":"2025-02-14T00:14:20","date_gmt":"2025-02-14T00:14:20","guid":{"rendered":"https:\/\/www.woodcentral.com\/-\/peter\/?p=801"},"modified":"2026-05-24T11:28:32","modified_gmt":"2026-05-24T11:28:32","slug":"how-to-use-html5-semantic-elements","status":"publish","type":"post","link":"https:\/\/www.woodcentral.com\/-\/peter\/how-to-use-html5-semantic-elements\/","title":{"rendered":"How to use HTML5 semantic elements"},"content":{"rendered":"\n

In HTML5, semantic elements like <section><\/code>, <article><\/code>, <nav><\/code>, <header><\/code>, <footer><\/code>, and others are introduced to improve the structure and readability of the web content. These elements help both developers and browsers better understand the content of a webpage. Here’s an overview of the most commonly used HTML5 semantic elements and how they should be used and nested:<\/p>\n\n\n\n

1. <section><\/code><\/strong><\/h3>\n\n\n\n
    \n
  • Purpose<\/strong>: The <section><\/code> element is used to represent a thematic grouping of content, often with its own heading. It helps to divide the page into sections of related content.<\/li>\n\n\n\n
  • Use case<\/strong>: It\u2019s commonly used for areas such as chapters, tabs, or any grouping of content that could be considered as a standalone section.<\/li>\n\n\n\n
  • Nesting<\/strong>: You can nest <section><\/code> elements inside one another if the content is related. However, each <section><\/code> should ideally have a heading (<h1><\/code>, <h2><\/code>, etc.) to define the section’s topic clearly.<\/li>\n<\/ul>\n\n\n\n

    Example<\/strong>:<\/p>\n\n\n\n

    <section>\n    <h2>Introduction<\/h2>\n    <p>This is the introduction to the article...<\/p>\n<\/section>\n\n<section>\n    <h2>Main Content<\/h2>\n    <p>This is the main content of the article...<\/p>\n<\/section>\n<\/code><\/pre>\n\n\n\n
    2. <article><\/code><\/strong><\/h3>\n\n\n\n
      \n
    • Purpose<\/strong>: The <article><\/code> element is meant for content that is self-contained and can be independently distributed or reused, such as a blog post, news article, or forum post. It’s typically used for any content that makes sense on its own and could be syndicated or shared independently.<\/li>\n\n\n\n
    • Use case<\/strong>: Articles are typically self-contained pieces of content, like blog posts or product reviews.<\/li>\n\n\n\n
    • Nesting<\/strong>: Articles can be placed inside sections. However, they should not be nested inside each other. A section can contain multiple articles, but each article should stand alone.<\/li>\n<\/ul>\n\n\n\n
      Example<\/strong>:<\/p>\n\n\n\n
      <article>\n    <h2>Article Title<\/h2>\n    <p>Article content goes here...<\/p>\n<\/article>\n\n<article>\n    <h2>Another Article<\/h2>\n    <p>Another set of article content...<\/p>\n<\/article>\n<\/code><\/pre>\n\n\n\n
      3. <nav><\/code><\/strong><\/h3>\n\n\n\n