Semantic HTML Tags

Highlighted Recommendations

My notes are mostly based on the articles published on oncrawls website.   The original article was published on OnCrawl.

 

Semantic HTML Tags

 

Article

The original article was published on Oncrawl

All the specific content for this page will go into the <article> tags.

Note here that “article” does not necessarily mean article in the sense of a newspaper article but just a thing, like an article of clothing, a product, a blog post, an “About Us” page, a recipe…

 

Article Tag Scheme

Page contents to include or exclude in the article tag
Page typeAdditional content inside the <article>Additional content outside the <article>
Blog articleAuthor information
Comments
Ratings
Associated articles
Links to other blog categories
Product promotions
Sign-up form
Any other unrelated content
Product pageReviews and ratings of the product
Comments about the product
Mentions of the product elsewhere on the web
Similar products
Links to blog articles associated with the product
Links to other product ranges
Products on special offer
Latest blog articles
Sign-up forms
Any other unrelated content
 

Aside

<main>
     <article>
          <h1></h1>
          Specific page content
          <aside>
               [Additional content directly associated with the article content]
          </aside>
      </article>
      <aside>
      [Additional content NOT associated with the article content]
      </aside>
</main>
 

Section

I think that the only valid usage of <section>'s is inside the <article> tag, if the article has chunks that have a meaning as self-contained blocks of information. <section> tags can tell the machine that this block of content can be indexed as fragment that has value in itself. Look at our example again.

Using <section> tag

<article>
      <h1>BMW 1 Series Hatchback</h1>
      <p>General page content about the BMW 1 Series Hatchback</p>
      <section>
           <h2>Standard equipment of the BMW 1 Series
Hatchback</h2>
           <p>Bla bla bla about equipment</p>
      </section>
      <section>
             <h2>Technical specifications of the BMW 1 Series
Hatchback</h2>
           <p>Bla bla bla about technical specs</p>
     </section>
     <section>
            <h2>How fast is BMW 1 Series Hatchback?</ h2>
           <p>Bla bla bla about speed</p>
     </section>
     <aside>
           Similar offers mentioning Audi, Mercedes and Jaguar.
           Blog articles specifically about the BMW series 1 or BMW in general.
      </aside>
</article>

 

Figure

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>