Miscellaneous Grouping Elements

Grouping Content – Part 4

Foreword: In this part of the series, I talk about the horizontal line, the div and the main elements in HTML5.

By: Chrysanthus Date Published: 24 Jun 2015

Introduction

This is part 4 of my series, Grouping Content. In this part of the series, I talk about the horizontal line, the div and the main elements in HTML5. These elements are to do with grouping other elements. You should have read the previous parts of the series before reaching here, as this is a continuation.

The hr Element
This is the horizontal rule element. It is a single tag element. It draws a horizontal line within its containing block. The tag is,

    <hr>

It can be typed between paragraphs or between a paragraph and some other element like a list element. The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

The div Element
The div element is a general purpose-grouping element. When you cannot identify any element we have talked about for your purpose, use the div element. This is HTML5 standard.  It was not really like this in HTML4 (depending on how you look at things). The div element is a double tag element, i.e.

    <div></div>

The div element is a block-level element, having an inherent line break element above and below it, and would normally fill the width of its containing element.

The main Element
This is a double tag element. The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. The main element is not sectioning content (element) and has no effect on the document outline.

Note: the main element must not be inside an article or aside or footer or header or nav element in the document. However, these elements can be inside the main element.

The main tag is:

    <main></main>

My browser displays the main element as a block level element (having an inherent line break element above and below it)

The following is a copy from the HTML5 specification:

Here is a graduation programme; the main content section is defined by the use of the main element. Note in this example the main element contains a nav element consisting of links to sub sections of the main content.

<!DOCTYPE html>
  <html>
  <head>
<title>Graduation Ceremony Summer 2022</title>
  </head>
  <body>

  <header>The Lawson Academy:
  <nav>
  <ul>
  <li><a href="courses.html">Courses</a></li>
  <li><a href="fees.html">Fees</a></li>
  <li><a>Graduation</a></li>
  </ul>
  </nav>
  </header>

<main>

  <h1>Graduation</h1>

  <nav>
  <ul>
  <li><a href="#ceremony">Ceremony</a></li>
  <li><a href="#graduates">Graduates</a></li>
  <li><a href="#awards">Awards</a></li>
  </ul>
  </nav>

  <H2 id="ceremony">Ceremony</H2>
  <p>Opening Procession</p>
  <p>Speech by Valedictorian</p>
  <p>Speech by Class President</p>
  <p>Presentation of Diplomas</p>
  <p>Closing Speech by Headmaster</p>

  <h2 id="graduates">Graduates</h2>
  <ul>
  <li>Eileen Williams</li>
  <li>Andy Maseyk</li>
  <li>Blanca Sainz Garcia</li>
  <li>Clara Faulkner</li>
  <li>Gez Lemon</li>
  <li>Eloisa Faulkner</li>
  </ul>

  <h2 id="awards">Awards</h2>
  <ul>
  <li>Clara Faulkner</li>
  <li>Eloisa Faulkner</li>
  <li>Blanca Sainz Garcia</li>
  </ul>

</main>

  <footer> Copyright 2012 B.lawson</footer>

  </body>
  </html>

You should get into the habit of using the main element.

That is it for this part of the series.

Chrys

Broad Network

Related Articles

Miscellaneous Grouping Elements

Grouping Content – Part 4

Introduction

Related Links

Comments