Paragraph And Flow Content Elements - Herong's Tutorial Examples

Trang chủ » Html Flowing Content » Paragraph And Flow Content Elements - Herong's Tutorial Examples

Có thể bạn quan tâm

HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang

HTML Tutorials - Herong's Tutorial Examples

∟HTML Document Structure and Content

∟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>

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

Flow Content Elements Example
Flow Content Elements Example

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

 Displayed and Printed HTML Documents

 Responsive Design of Web Pages

 MathML Integration in HTML Documents

 References

 Full Version in PDF/EPUB

Paragraph and Flow Content Elements - Updated in 2023, by Herong Yang

Từ khóa » Html Flowing Content