- HTML Course
- HTML Tutorial
- HTML Document Structure
- HTML Root Tags
- HTML Flow Tags
- HTML Interactive Tags
- HTML Basic Tags
- HTML Paragraph
- HTML Line Break
- HTML Horizontal Line
- HTML Images
- HTML Data Types
- HTML Attributes
- HTML Character Entities
- HTML Styles
- HTML Formatting Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML List
- HTML Tables
- HTML Forms
- HTML action Attribute
- HTML Multimedia
HTML Organizing Text
In a web page, the content is organized into the different formats, such as layers, paragraphs, lines, tables, and divisions, that we have already learned. Organizing text refers to the proper placement of all the HTML tags and their content on a web page.
By default, a web browser wraps text in a web page and displays the enclosed text in a single block, avoiding line and paragraph breaks. Now, if the content of a page is not separated by any line or paragraph breaks, it becomes very tedious for the readers to understand the given information.
Readers will have difficulty reading the desired information if the text on the web page is not organized.
To overcome this problem, you can arrange the text in different ways, such as paragraphs, lines, and tables. HTML provides a number of tags to arrange text into paragraphs and tables. For instance, you can display the text on the web page as paragraphs by using the P tag, or you can display a horizontal line in the web page to represent a break in the text. HTML also allows you to change the format of a specific text using the SPAN tag.
You will learn about organizing the text in the two separate sections that follow.
HTML Arranging Text
HTML allows you to arrange the text into different formats and styles, such as paragraphs, layers, and tables. By default, the Web browser displays all the text of an HTML page as a single paragraph.
You can format this text in different ways by using the various tags. For example, the P tags are used to arrange the text in multiple paragraphs, and the BR tags allow you to continue text from the next line. There are the following tasks involved in arranging the text of a web page:
- Allowing word breaks
- Defining the preformatted text
- Defining the DIV tag
- Defining the SPAN tag
- Organizing the text in tables
- Defining the Ruby (captioned) text
Allowing Word Breaks
HTML provides the WBR tag to insert word breaks between the words or paragraphs in an HTML document. However, if a break is required between the words, then you can use the WBR tag. The WBR tag does not force the Web browser to break the line, whereas the BR tag breaks the line irrespective of the space available in the web page.
The BR tag is defined in its own separate article.
Defining the Preformatted Text
In HTML, the preformatted tag, PRE, instructs the browser that the enclosed text is formatted and should not be formatted again. It is the default behavior of HTML that it disregards the space and the tabs to display format-free text. In such cases, you can preserve the intended formatting by using the PRE tag. This tag is commonly used when the formatting of the content is predefined, such as code snippets and poems. The browser displays the enclosed text in a monospaced font, such as Courier New.
According to the HTML and Extensible Hypertext Markup Language (XHTML) specifications, you can use the BOLD, ITALIC, and LINK tags within the PRE tag.
Example
<!DOCTYPE html>
<html>
<body>
<p>Following is a pre-formatted text</p>
<pre>
Hello,
what's up?
Is
everything alright?
</pre>
</body>
</html>Following is a pre-formatted text
Hello,
what's up?
Is
everything alright?
Defining the DIV tag
In HTML, the division (DIV) tag is used to divide the web page into different divisions or sections. The DIV tag basically works as a container for the other HTML tags.
Using the DIV tag, you can group the HTML tags into sections and apply the Cascading Style Sheet (CSS) to them.
The DIV tag is a block-level tag and cannot be used inside the P tag. The P tag is only used for creating paragraphs, while the DIV tag is used to divide the web page into different sections.
Defining the SPAN tag
The SPAN tag is used to change the style of the text enclosed within the tag using the style attribute. The SPAN tag provides additional formatting capabilities to the HTML tags and is used with the style sheets to set presentational attributes that define the style of the content.
Organizing the text in tables
HTML provides the TABLE tag for arranging the text in a tabular format, i.e., in rows and columns. The TABLE tag is used along with the TH, TR, and TD tags. The TH tag is used to define the header of a table column. The TR tag is used to specify the content of the table rows. And the TD tag is used to specify the content of a table cell.
You can set the width and height of the table columns and rows using the style attribute in the TABLE tag. Using the style attribute, you can also define the borders for the table, the font style for the table content, and the font size for the table.
You can also specify the table caption, which indicates the content of the table, by using the CAPTION tag.
The "HTML table" is defined in its own separate tutorial.
Defining the Ruby (captioned) text
You can define the caption for your text using the Ruby tag in your web page. This tag is used to specify ruby annotations that provide a reading or pronunciation guide for a particular language, such as Chinese or Japanese. A ruby is a part of an annotation pair in which a piece of text (known as ruby text) is associated with another set of text (known as ruby base).
In many Asian countries, such as Japan and China, ruby annotations are commonly used to provide a pronunciation guide in various types of publications, such as school books and magazines.The RUBY tag contains the following tags:
- RP: Includes parenthesis
- RT: Acts as the container for the Ruby text.
These tags are used to create a structural link between the ruby text and the ruby base.Structural association refers to various ways in which the ruby text and ruby base can be connected with each other. In the Ruby tag, the text appearing before the RT tag is called the base text. Whereas the text appearing after the RT tag is called the "notation."
HTML Displaying Lists
HTML allows you to display the information in the form of lists. The information in these lists may be presented in an ordered and sequential manner or in an unordered and random manner. Here is the list of tags used in displaying the list in an HTML document:
| Tag | Description |
|---|---|
| OL | used to display the list of information in an ordered sequence |
| UL | used to display the information in an unordered list |
| LI | defines a list item |
| DL | allows you to include the description of the items in the UL or OL lists |
| DT | defines the term in a description list |
| DD | defines the description in a description list |
The subsequent tutorial will provide the in-depth description, along with some examples pertaining to this subject matter.
« Previous Tutorial Next Tutorial »