HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
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&lt;byte> data); void initSelfDestruct(); } </pre> </body> </html>
When the above HTML document is viewed in a Web browser, you will see something like this:
Table of Contents
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
Displayed and Printed HTML Documents
Responsive Design of Web Pages