Understanding HTML5 Semantic Tags

What are semantic tags?

Sematic elements provide meaning and organization to developers and the browsers. Semantic tag don’t typically make any changes, although there are some exceptions, to a website that are visible to the end user or the average web surfer. However, semantic tags do tell a browser or developer what certain sections of a page are about or what type of content to expect for certain sections.

Additionally, semantic elements or tags are also good for SEO or Search Engine Optimization. Semantic tags will provide information to Search engine crawlers providing additional information about the specific content, which can help with indexing.

Standard Semantic Element HTML Page Layout

<header> Semantic Element

<header></header> – element defines a container for hold introductory content. Such content might include a logo or icon. You may have multiple header elements on a web page but you may not place a header element inside of a footer element.

<header>
       <h1>Heading 1</h1>
</header>
<p>
   The paragraph that goes with the h1.
</p>

<nav> Semantic Element

<nav></nav> – element is used to as a container for any content such as navigational links.

<nav>
    <a href="index.html">Home</a>
    <a href="aboutme.html">About</a>
    <a href="search.html">Search Page</a>
</nav>

<section> Semantic Element

<section></section> – element is used to define a specific section or grouping of content as long as the content has a heading.

<section>
        <h1>Heading 1</h1>
        <p>This is a paragraph that goes with the heading.
</section>

<article> Semantic Element

<article></article> – element defines some kind of stand alone story, or self-contained content.

<article>
        <header>
               <h1>Heading 1</h1>
               <p>Paragraph that goes with h1.</p>
        </header>

</article>

<aside> Semantic Element

<aside></aside> – element defines some content that is a side from the main content that it itself is a stand alone story but it is indirectly related to the main story.

<p>Some paragraph</p>
<aside>
      <h1>Heading 1</h1>
      <p>The paragraph that goes along with h1</p>
</aside>

<footer> Semantic Element

<footer></footer> – element defines a section of an HTML page that is always at the bottom of the page. This section can be composed of authorship information, sitemap link, copyright information, and possibly some contact information.

<footer>
       <p>Author: Rick Rodriguez</p>
       <p>Contact Me at: <a href="mailto:rickrod99@gmail.com">Email Me</a></p>
</footer>

<details> & <summary> Semantic Elements

<details></details> – element is one of those semantic elements that does in fact have a visual effect on a web page. It works to organize content but also add a little extra functionality visually.

The <details></details> will act as a container for a summary heading as well as a supporting paragraph. By doing so, it does two things. One, it will organize the content together as associative content. Two, it will provide additional details that a user can click on and open to read further information.

<summary></summary> tag is used inside the details tag. It provides a visible heading to the details tag.

<details>
        <summary>An article about technology</summary>
        <p>This is an article about technology.</p>
</details>

<caption> Semantic Element

<caption></caption> – defines a table caption or a title to a table.

<table>
      <caption>This table has a title</caption>
      <tr>
          <td>Hello World</td>
      </tr>
</table>