Paragraph and Flow Content Elements

This section describes the 'p' paragraph element and other flow content elements that can be used to create a flow of vertical blocks.

The next level of HTML content structure below sections is called flow content, which can be viewed as a flow of vertical blocks in Western language reading style. Each block can be a text paragraph, a list of items, a spreadsheet of tabular data, etc.

Flow content blocks can be created explicitly with flow content elements following these guidelines:

1. "p" element represents a flow content block with a paragraph of text and phrasing content elements.

2. "ul", "ol" or "dl" element represents a flow content block with a list of items.

3. "table" element represents a flow content block with a tabular data items.

4. "pre" element represents a flow content block with a block of preformatted text and phrasing content elements.

5. "address" element represents a flow content block of contact information.

6. "header" element represents a flow content block of introductory information.

7. "footer" element represents a flow content block of foot notes.

8. "figure" element represents a flow content block of reference data.

9. "hr" element represents a flow content block acting as a flow breaking marker.

10. "div" element represents a flow content block acting as a wrapper of child blocks.

11. See HTML specification for other flow content elements.

Below is a good example of using flow content elements to create a flow of vertical blocks:

<!DOCTYPE html>
<!-- Flow_Content_Elements_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>Flow Content Elements Example</title>
<body>
<p style="border-style:solid">A block of text paragraph -
While paragraphs are usually represented in visual media by blocks of
text that are physically separated from adjacent blocks through blank
lines, a style sheet or user agent would be equally justified in 
presenting paragraph breaks in a different manner, for instance using
inline pilcrows.
</p>

<ul style="border-style:solid">
 <li>Item 1 of a list block.</li>
 <li>Item 2 of a list block.</li>
</ul>

<hr/>

<table style="border-style:solid" border="1">
 <tr><td>Weekday</td><td>Weekend</td></tr>
 <tr><td>Closed</td><td>Open</td></tr>
</table>

<pre style="border-style:solid">
interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&amp;lt;byte&gt; data);
 void initSelfDestruct();
}
</pre>

</body>
</html>

When the above HTML document is viewed in a Web browser, you will see something like this:
Flow Content Elements Example

Last update: 2014.

Table of Contents

 About This Book

 Introduction of HTML

 Introduction of HTML5 Features

HTML Document Structure and Content

 HTML Document Top Level Structure

 HTML Document Metadata Elements

 Headings and Implicit Sections

 Elements for Explicit Sub Sections

 Sectioning Contents with Heading Elements

Paragraph and Flow Content Elements

 Text and Phrasing Content Elements

 HTML Document and Elements Syntax

 References

 PDF Printing Version