section tag in html

HTML <section> tag represents a section for grouping the contents that are related to a particular subject. There might be various sections covering different subtopics of some major topic as descendants of an article.

<article>
<h2>Color codes</h2>

 <section>
  <h3>Hexadecimal code</h3>
   A hexadecimal code consists of a hash (#) followed by rrggbb hexadecimal value of color. For example, the color code of blue color is #0000ff.
 </section>
 
 <section>
  <h3>Decimal code</h3>
  A decimal value consists of rgb() function containing decimal values of r, g and b as arguments. For example, the color code of red color is rgb(255,0,0).
 </section>
 
</article>

</>

Color codes

Hexadecimal code

A hexadecimal code consists of a hash (#) followed by rrggbb hexadecimal value of color. For example, the color code of blue color is #0000ff.

Decimal code

A decimal value consists of rgb() function containing decimal values of r, g and b as arguments. For example, the color code of red color is rgb(255,0,0).

It is a special type of element and not a generic container. The topic of each section is always explicit from the other sections. The topic of a section is identified by the heading (h1-h6) as descendent.

A webpage may contain different sections containing introduction, posts and other contact information.

Tag Uses

Specific uses of <section> tag

The section may be used to represent chapters or the sections of a thesis. For example, article is used to represent a whole book and this book contains sections of chapters and appendices.

Tag omission

Both starting and ending tags are necessary for the section element.

Global Attributes

All the global attributes are applicable on the section element.

Tip: div is a generic type container and it should be used only for stylish purposes. While <section> represents the content explicitly in the document tree.

Tip: <section> only covers sub topics of a topic. But <article> tag covers topics. Therefore, <article> tag should be used as the parent element of <section> for self-contained content. See the example given above to understand it.

Next Previous