HTML5 Semantics

Last Updated : 27 Jul, 2026

HTML5 semantic elements provide meaningful tags that clearly describe their purpose, improving readability, accessibility, and SEO for both humans and browsers.

  • Clearly define the role and content of elements.
  • Improve code readability and structure.
  • Enhance accessibility for screen readers.
  • Help browsers and search engines understand page content.
  • Examples include
    , ,
    ,
    , and
    .

    Semantic Elements

    Here are some of the fundamental HTML5 semantic elements that you should use to structure your web content:

    html-sementics-layout
    HTML 5 Semantic Based Page Structure

    1. The
    Tag

    The

    tag is used for content that stands alone and can be independently distributed or reused, such as a blog post or news article.

    html 
    

<html>
<head>
    <title>title>
    <style>
        h1 {
            color: #006400;
            font-size: 50px;
            text-align: left;
        }
        p {
            font-size: 25px;
            text-align: left;
            margin-top: 0;
        }
    style>
head>
<body>


    <article>
        <h1>GeeksforGeeksh1>
        <p>A Computer Science portal for geeks. It contains well written, well thought, and well explained computer science and programming articles, quizzes, and practice/competitive programming/company interview questions.p>
    article>


body>

html>

    2. The

    The