Filter (Advanced Search)
    Downloads
    0         Views
    223
    Video

    Video is not available... Embedded is previous playlist.

    HTML Watch on YouTube
    Details

    What are Semantic Elements?

    A semantic element clearly describes its meaning to both the browser and the developer.

    Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

    Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

    Semantic Elements in HTML

    Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.

    In HTML there are some semantic elements that can be used to define different parts of a web page:  

    • <article>
    • <aside>
    • <details>
    • <figcaption>
    • <figure>
    • <footer>
    • <header>
    • <main>
    • <mark>
    • <nav>
    • <section>
    • <summary>
    • <time>

    HTML Semantic Elements

     

    HTML <section> Element

    The <section> element defines a section in a document.

    According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."

    Examples of where a <section> element can be used:

    • Chapters
    • Introduction
    • News items
    • Contact information

    A web page could normally be split into sections for introduction, content, and contact information.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Semantic Elements</title>
    </head>
    <body>

    <section>
      <h1>GSSS KHOKHAR</h1>
    ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ  ਗਿਆ. 2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ।  ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.
    </section>

    <section>
      <h1>Computer Lab</h1>
    The computer lab serves as the center for teaching computer use to whole classes, usually by a specialist computer teacher. Well-designed and separate computer labs for students, run by a well-educated and qualified faculty, with one-on-one access, which means there is one computer for each child. School kids learn words through PowerPoint presentations, other software and HTML, C Programming.
    </section>

    </body>
    </html>

    Semantic Elements in HTML

    Below is a list of some of the semantic elements in HTML.

    Tag Description
    <article> Defines independent, self-contained content
    <aside> Defines content aside from the page content
    <details> Defines additional details that the user can view or hide
    <figcaption> Defines a caption for a <figure> element
    <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
    <footer> Defines a footer for a document or section
    <header> Specifies a header for a document or section
    <main> Specifies the main content of a document
    <mark> Defines marked/highlighted text
    <nav> Defines navigation links
    <section> Defines a section in a document
    <summary> Defines a visible heading for a <details> element
    <time> Defines a date/time
    Ad