Specifying Element Contents

HTML Tutorials - Herong's Tutorial Examples

∟Specifying Element Contents

This section describes how to specify element contents. Opening tags and closing tags are used to mark the beginning and ending of HTML elements.

Contents of HTML elements can be specified using these general guidelines:

1. For a regular element, it's content can be specified by enclosing it between the element's opening tag and closing tag. For example, there are two elements in the following HTML document code:

"em" can be nested in "strong" to represent
<strong>strong importance and <em>stress emphasis</em></strong>
contents.

The first element is a "strong" element, whose content is "strong importance and <em>stress emphasis</em>"

The second element is an "em" element, whose content is "stress emphasis".

2. For an empty content element, content is not allowed. Closing tag is also not allowed. An empty content element can be presented with the opening tag itself, or using the short-hand format of combining opening tag and closing tag together as shown in this example:

<img src="picture.jpg"
 alt="Blue_Sky"/>

3. For an element with implied closing tag, content can be ended by an opening tag of another element that is not allowed as a sub element. "dd", "dt", "li", "option", "optgroup", "p", "rp", are "rt" are defined with implied closing tags in HTML5. For example, there are two elements in the following HTML document code:

<p>The little kitten gently seated himself on a piece of carpet.
<p>Later in his life, this would be referred to as the time the
cat sat on the mat.
</p>

The first element is a "p" element, whose content is "The little kitten gently seated himself on a piece of carpet." ended by an implied closing tag triggered by the opening tag of the second "p" element, <p>, on line 2.

The second element is also a "p" element, whose content is "Later in his life, this would be referred to as the time the cat sat on the mat." ended by the closing tag, </p>, on line 4.

Relying on implied closing tags to end element's content is not recommended. You should always end every elements in a HTML document with closing tags explicitly.

Also note that implied closing tags can cause confusions when reading HTML document validation errors. For example, here is an HTML source code that looks correct:

<p>The following source code
shows the API of an interface:
<pre>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</pre>
where "PrimaryCore" is interface's name.
</p>

But the an HTML5 document validator will give us this error: "Line x, Column 4: No p element in scope but a p end tag seen." Why are we getting this error? The source code does have a single "p" opening tag on line 1 matching the single "p" closing tag on line 9. The root cause of the error is that the "pre" opening tag on line 3 inserts an implied "p" closing tag, which ends the "p" element early leaving the "p" closing tag on line 9 with no "p" element to close.