Skip to content

05-HTML_SECTION_AND_ASIDE_CLASS.md

Latest commit

 

History

History
60 lines (40 loc) · 1.73 KB

05-HTML_SECTION_AND_ASIDE_CLASS.md

File metadata and controls

60 lines (40 loc) · 1.73 KB

Understanding Section and Aside in Frontend Development

In modern frontend development, semantic HTML elements play a vital role in improving code readability, accessibility, SEO, and structure of web pages. Two important semantic elements are section and aside, both introduced in HTML5 to provide meaning to the structure of a webpage or webapp.

The section Element

The section element represents a thematic grouping of content in a document. It is used when content needs to be grouped under a specific theme or heading.

Syntax

<section>
  <h2>Latest News</h2>
  <p>Federal Polytechnic Bida launches new ICT center...</p>
</section>

Characteristics

  • Groups related content under one class.

  • Always starts with a heading (h1>–h6).

  • Useful for breaking long documents into logical parts.

When to Use

  • When the content requires its own heading.

  • To divide chapters in articles or topics in a webpage.

  • For main body content, not for side notes.

The aside Element

The aside element is used for indirectly related content that complements the main content. It usually appears as a sidebar or note.

Syntax

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">ICT Centre Programs</a></li>
    <li><a href="#">Student Portal</a></li>
  </ul>
</aside>

Characteristics

  • Contains supplementary content like ads, references, related links.

  • Does not need a heading (but can have one).

  • Often placed beside article or section.

  • Example uses: sidebars, quotes, advertisements, call-to-actions.

When to Use

  • For complementary information (not main content).

  • To display advertisements, references, or links.

  • In blog posts for author info or recommended posts.