The Beauty Of Semantic HTML. Part 2

Hey! Welcome back to semantic HTML.

In this second segment, we'll be looking at these elements:

• <aside>

• <main>

• <article>

• <figure> and <figcaption>

• <details>

• <summary>

Sounds fun right! Let's dive right in shall we?

<aside> Element

<aside> is a section in the main content of your page that’s meant to be more flexible than the main content. It can provide a sidebar, an additional panel, or something else entirely.

It represents a section of a page that covers content to be displayed in a separate window or column on the screen, such as a sidebar and it is generally considered the same thing as being displayed in a small box on the side of the main content area.

Like other elements that define content categories, an aside can contain any number of other elements.

Let's give examples below

<p> The city of Lagos in Nigeria is considered to be the most populous city in the country and it is termed "the city that never sleeps". A term that could rival New York.</p>

<aside>

<h3>Lagos</>

<p>Lagos has a population of over 20 million residents and is the largest city on the African continent. Lagos is home to a diverse range of people including members of the larger Igbo ethnic group, who control shipping and business in Lagos, as well as the Yoruba ethnic group which dominates the nation's culture 
and art with major contributions in music, film, theatre, and literature.</p>

<aside>

With CSS, you can style the above content however you want to using the width, margin, padding, background-color properties, etc. to beautify it.

<main> Element

The main content of a page is the primary focus of the document. It’s the first thing that someone sees when they arrive at your site, so it should be well-designed and easily readable to increase user engagement.

Example

<main>
  <h1>Nigeria</h1>
  <p>Popular states in Nigeria</p>

  <article>
    <h2>Lagos</h2>
    <p>The most popular state by far lots of diverse people and thriving businesses.</p>
  </article> 

  <article>
    <h2>Abuja</h2>
    <p>Capital of Nigeria and often described as the city of the elites.</p>
  </article>

  <article>
    <h2>Port-Harcourt</h2>
    <p>Home to a number of Nigeria's seaports</p>
  </article>
</main>

This brings us to the next element we're going to look into;

<article> Element

The <article> element specifies independent, self-contained content and is similar in functionality to the <header> element. An article element’s contents should be useful on their own and can be relevant to the page as a whole.

This element represents a single, main content of a document or application.

Examples can be found above in the <main> element

<figure> and <figcaption> Element

The <figure> element defines a self-contained section of content and is used to display illustrations, photos, code listings and other types of images. While The <figcaption> tag specifies a caption for the figure element. It can also be placed either as the first or as the last child of the <figure> element.

Example

<figure>
  <img src="Lagos Bar Beach" alt="Lagos Beach">
  <figcaption>Fig1. - Bar Beach, Lagos</figcaption>
</figure>

details Element

The <details> tag is a container for an interactive content. It contains details that are hidden by default but reveal themselves when opened.

It can also be used together with the <summary> tag which will be explained below.

Example

<details>
  <summary>Lagos</summary>
  <p>Lagos is home to a diverse range of people including members of the larger Igbo ethnic group, who control shipping and business in Lagos, as well as the Yoruba ethnic group which dominates the nation's culture 
and art with major contributions in music, film, theatre, and literature.</p>
</details>

<summary> Element

The <summary> tag is used to specify a visible heading for the details. It is usually preceded by the <details> element, but can sometimes be used alone. You may also place this into your content if you don't want it to be visible by default.

An example can be found above in the <details> tag.

We have come to the end of this segment. In the next part, we'll be covering the last elements in semantic HTML. Stick with me.