How to group HTML content?

In the previous post as part of this series I wrote about how to structure content in HTML.

In this post we will see how to group content. (Grouping is how to group related data together and structuring is more about where to place each type of content in a HTML document)

According to the html spec , you can group content using the following 15 elements:

• The paragraph element <pr>
• The paragraph break element <hr>
• The preformatted element <pre>
• The block quote element <blockquote>
• The ordered list element <ol>
• The unordered list element <ul>
• The list item element <li>
• The description list element <dl>
• The description term element <dt>
• The description definition element <dd>
• The figure element <figure>
• The figurecaption element <figcaption>
• The menu element <menu>
• The main element <main>
• The div element <div>

Why do we need to group content after all?

• To apply the same style to all the elements in the same group
• To give a semantic context

The div tag is often overused for this purpose. It need not be and should not be the case.

Let’s have a look at each of the grouping element.

The paragraph element <p>

A paragraph element as the name suggests is used to represent a paragraph.

Example:

<p> This post is part of the series on HTML on the full stack developer blog. This is the fifth post in the series. The content for this series have been referred the HTML spec documents <p>

Again <p> element should be used only to represent a paragraph. When any other specific element can be used instead of a paragraph they should be used instead.

For example , lists (ordered or unordered) cannot be grouped together in a paragraph. A better element to group them together is a div.

Also a footer or address element should not be part of a paragraph. They should be part of <section> element.

Here is an example from the HTML specs:

The p element should not be used when a more specific element is more appropriate.

The following example is technically correct:

<section>
 <!-- ... -->
 <p>Last modified: 2001-04-23</p>
 <p>Author: fred@example.com</p>
</section>

However, it would be better marked-up as:

<section>
 <!-- ... -->
 <footer>Last modified: 2001-04-23</footer>
 <address>Author: fred@example.com</address>
</section>

Or:

<section>
 <!-- ... -->
 <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: fred@example.com</address>
 </footer>
</section>

The paragraph break element:

The paragraph break element represents a horizontal line which separates two paragraphs or topics within a section . It is represented by the tag <hr>

The preformatted element:

If you type spaces and newline characters in a html document ,browsers will ignore them.

But if you group them within a preformatted element tag browsers will keep them as such.

The <pre> tag preserves formatting as specified.

Example:

<pre>Oh what

a nice piece

of poem

</pre>

The above poem will be printed exactly as represented above when the browser renders it.

The <pre> tag is also used to group elements which have their own formatting like <code> element which is used to represent computer code, <kbd> which is used to represent keyboard input and <samp> which represents a sample output from a computer program.

Example:

<pre>

<code>System.out.println(“Hello World”)l</code>

<samp>Hello World</samp>

</pre>

The blockquote element:

A blockquote element is used to quote content from another source , say a novel or a website. When browsers see the blockquote tag they usually indent the text to indicate they are copied from another source.

Example:

<blockquote cite="http://thenovel.com/chapter1">
It was a eerie silent night. David Copperfield woke up in the middle of his sleep and started sleep walking
</blockquote>

The cite element in the above blockquote is not shown to the user and is primarily used for server side processing.

The ordered list element <ol>

The ordered list element represents a list where the items are ordered. By default browsers assign numbers to each item starting from 1.

Consider the below code:

<p>I learned languages in the following order</p>
<ol>

<li>Java</li>
<li>Angular</li>
</ol>

Here the ordering is important as the languages are listed in the order they were learned.

Chrome browser renders the output as:

If you want to reverse the numbering you can add the boolean attribute “reversed” in the ol tag :

<p>I learned languages in the following order</p>
<ol reversed>

<li>Java</li>
<li>Angular</li>
</ol>

Now the output is rendered by Chrome as:

The numbering is reversed now.

The unordered list element <ul>

This represents an unordered list and browsers represent individual items through bullet points.

The same list in the previous example can be represented as an unordered list as :

<p>I know the following languages</p>
<ul>
<li>Java</li>
<li>Angular</li>

</ul>

And browsers render the output as:

The list item <li>

List item represents an individual item in ordered or unordered list as explained in the previous sections.

The description list elements <dl>, <dt> and <dd>

Description list represents a list of descriptions with name-value pairs. It could be a list of words and their meanings or questions and answers or terms and their definitions.

For example:

<dl>

<dt>Java</dt>
<dd> A server side technology </dd>

<dt>Angular</dt>
<dd>A client side technology</dt>

</dl>

This represents a list of languages and a short description about them.

Chrome renders the output of the above code as below:

It automatically indents the defnitions.

The figure elements <figure> , <figcaption>

The figure element is used to represent self contained content like an image and its caption .

Example:

<figure>
<img src="http://flickr.com/sachin.jpeg">

<figcaption>Sachin Tendulkar</figcaption>
</figure>

Not only images , the figure element can be used to represent other self contained content like – A poem and its title or a code snippet and a short description or a paragraph and its caption etc.

The menu element <menu>

The menu element is technically the same as an unordered list but semantically it represents a menu. It contains different menu items which user can navigate to.

For example , this blog has a menu item (HOME, HTML,SPRING etc) . They can be represented as:

<menu>
<li>HOME</li>
<li>HTML</li>
<li>SPRING</li>
</menu>

Probably WordPress internally uses menu element to represent these. By default browsers don’t apply any styling to the menu element. They just look like an unordered list.Developers should use CSS to style it.

The main element <main>

The main element represents the main content of the HTML document. Their ancestors should be either html,body,div or form elements. Thus they represent the top level in the DOM hierarchy.

Below is an example from the HTML specs:

<!doctype html>
<html lang=en-CA>
<meta charset=utf-8>
<title> … </title>
<link rel=stylesheet href=spa.css>
<script src=spa.js async></script>
<nav>
 <a href=/>Home</a>
 <a href=/about>About</a>
 <a href=/contact>Contact</a>
</nav>
<main>
 <h1>Home</h1>
 …
</main>
<main hidden>
 <h1>About</h1>
 …
</main>
<main hidden>
 <h1>Contact</h1>
 …
</main>
<footer>Made with ❤️ by <a href=https://example.com/>Example 👻</a>.</footer>

Each main element is used to represent a page and they are hidden so that they can be displayed when user selects the particular page through the navigation element.

The div element <div>

The div element is one of the over used elements. But it should not be. It has no meaning at all. The HTML spec document advises to use the div element as a last resort when you don’t find any other suitable alternative.

Technically div element can be used to group other HTML elements. You can then apply a common styling to all those elements.

Example:

<div>
<p> This is an example for div element </p>

<p> Avoid using it as much as possible as it does not convey any meaning </p>

</div>

That’s it!