HTML

created: 2021-03-03 · modified: 2021-04-14

tags: Programming languages

Semantic Tags

From the official W3 reference, the (main) tags and their descriptions are as follows:

  • <article>: defines an article
    • Should be used to indicate a standalone piece of content that could be taken out of the taken and placed elsewhere without context.
  • <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
    • Note that the <main> tag should only be used once within a document. It should contain content unique to the document, i.e. no sidebars, nav links, etc should be present.
  • <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

Perhaps the most important of these are the <header>, <main>, and <footer> tags. Note that the <main> should only be used once in a document, whereas <header> and <footer> tags are allowed to be used multiple times across sections.

Simple Outline

A simple semantic outline that I like to use is as follows:

<html>
    <head></head>
    <body>
        <header>
            <nav></nav>     
        </header>
        <main>
            <article>
                <header></header>
                <section>
                    <h1>heading</h1>
                    <p>body</p>
                </section>
                ...
                <footer></footer>
            </article>
            ...
        </main>
        <footer></footer>
    </body>
</html>