Paragraph and Flow Content Elements

HTML Tutorials - Herong's Tutorial Examples

∟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 pre-formatted 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) 2009 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>