Text and Phrasing Content Elements

This section describes text and phrasing content elements that can be used to create a phrase of horizontal pieces.

The next level of HTML content structure below blocks is called phrasing content, which can be viewed as a horizontally run of data piece that forms a paragraph block. Each data piece can be a letter, a symbol, a predefined data entity, an image, a multi-media content, an interactive UI control, an integration point, etc.

When HTML document browser is displaying a phrasing content, it may wrap it around if the content is wider than the display window.

Phrasing content pieces can be created with Unicode characters and phrasing content elements following these guidelines:

1. Any Unicode code character not reserved by the HTML language represents a phrasing content piece by itself.

2. An HTML reserved character can be represented by its predefined entity like "<", ">", """, or "&".

3. "abbr" element represents a phrasing content piece of an abbreviation or acronym.

4. "audio" element represents a phrasing content piece of a sound or audio stream.

5. "button" element represents a phrasing content piece of an interactive button.

6. "canvas" element represents a phrasing content piece of an image created by a drawing script.

7. "command" element represents a phrasing content piece of an interactive UI control.

8. "embed" element represents a phrasing content piece of an integration point of an external application.

9. "img" element represents a phrasing content piece of an integration point of an external image.

10. "math" element represents a phrasing content piece of a mathematical formula created by a MathML code.

11. "object" element represents a phrasing content piece of an external resource.

12. "script" element represents a phrasing content piece of an integration point of a dynamic script.

13. "svg" element represents a phrasing content piece of an image created by a SVG code.

14. "video" element represents a phrasing content piece of a video stream.

15. "span" element represents a phrasing content piece acting as a wrapper of child pieces.

16. See HTML specification for other phrasing content elements.

Below is a good example of using phrasing content elements to create a phrase of horizontal pieces:

<!DOCTYPE html>
<!-- Phrasing_Content_Elements_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>Phrasing Content Elements Example</title>
<body>
<p><span style="border-style:solid">
Phrasing content is a horizontally run of text, images:</span>
<img src="HTML5_Logo.jpg" alt="HTML5 Logo"/>,
UI controls: <button onclick="alert('Hi there!')">Buy Now!</button>,
video clips: 
<video src="Video_Sample.mp4" width="300" height="240" 
controls="controls">
Too bad, your browser does not support "video" elements!
</video>,
<span style="border-style:solid">and many other data pieces.</span>
</p>
</body>
</html>

When the above HTML document is viewed in a Web browser, you will see something like this:
Phrasing 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