Text and Phrasing Content Elements

HTML Tutorials - Herong's Tutorial Examples

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