HTML 5 Grouping Elements

HTML5 Basics - Part 14

Forward: In this part of the series, we look at some grouping elements in HTML.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 14 of my series, HTML5 Basics. In the previous part of the series, I talked about background colors and foreground colors. I have published a list of colors that can be displayed by most browsers. The title of the list (article) is “HTML5 colors”. Just search for this in my blog and you should see it.

A grouping element is an element that has as content other HTML elements. A grouping element you already know is the body element. There are smaller grouping elements in HTML, some of which we shall look at in this part of the series. Other grouping elements we have seen are the paragraph, blockquote, pre and list elements; these elements have their different characteristics. The hr (horizontal rule) element is also considered as a grouping element, because you can use it to separate contents in the body element. In this part of the series, we look at some grouping elements in HTML. I assume you have read the different parts of the series before reaching here.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The span Element
The span element is an element that allows you to address a phrase. If you want to give a phrase in a paragraph a special background or foreground color, use the span element. In its simplest form, the syntax is:

        <span>content</span>

The content is the phrase. Inside the tags, the tag name should be in lower case. The start tag and end tag must be present. The start tag can take many attributes but we shall only mention the style attribute here. In the following code, “phrase two” has a background color of blue and a foreground color of red.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <h1>The Heading of Page</h1>
    <p>
        phrase one, <span style="background-color:blue; color:red">phrase two</span>, phrase three
    </p>
</body>
</html>

You can try the above code by saving it as an HTML file and opening in a browser.

The span element is not officially a grouping element since its content is mainly text; however, it groups text together.

The div Element
You have the body element that holds all your viewable elements (Headings, paragraphs, etc.). If you want a small portion of your web page to hold a set of HTML5 elements then you have to use the DIV element. In its simplest form, the syntax is:

            <div>content</div>

Content is all what can go into the body element. Inside the tags, the tag name should be in lower case. The start tag and end tag must be present. The start tag can take many attributes but we shall only mention the style attribute here.

By default, (everything being equal), the div element occupies a horizontal stripe from the left edge of the web page to the right edge of the web page. This is because a div element has an implicit line break element (<br>) just before it and just after it. However, you the web site designer cannot see the line break elements in the code; you only see the effects. So, two or more consecutive div elements would result in a corresponding number of consecutive horizontal stripes at the display (browser).

In the following code, the first div element has a background color of aqua; the second (next) div element has a background color of chocolate, and the third (next) has a background color of gold:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <div style="background-color:aqua">First DIV</div><div style="background-color:chocolate">Second DIV</div><div style="background-color:gold">Third DIV</div>
</body>
</html>

You should try the code.

The figure Element
Assume that your web page is a tutorial. You might have use a drawing program (such as Microsoft Paint) to draw a diagram and save it as an image file. This diagram (image) is a figure. The appropriate HTML5 element in which to display this diagram is the figure element. The figure element is a double tag element. The tags for the figure element are: <figure> and </figure>.

The figcaption Element
The caption to a diagram (figure) is like the title to the figure. The HTML5 figcaption element is used to give the caption to the figure element. The figcaption element is a double tag element. The tags are: <figcaption> and </figcaption>. The figcaption is placed inside the figure element. There should be one figcaption element in a figure element. The following code segment shows the use of the figure and figcaption elements:

<figure>
    <img src="URL">
    <figcaption> The Illustration </figcaption>.
</figure>

The figure element is a grouping element.

There are other grouping elements that we shall see in a later series.

That is it for this part of the series. Let us stop here and continue in the next part.

Chrys

Broad Network

HTML 5 Grouping Elements

HTML5 Basics - Part 14

Introduction

Related Links

Comments