Jobs Hub

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

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

HTML Code
<!DOCTYPE html>
<html>
<body>
      
<p>Following is a pre-formatted text</p>
<pre>
   Hello,
      what's up?
Is 

            everything alright?
</pre>

</body>
</html>
Output

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:

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.

HTML Online Test

« Previous Tutorial Next Tutorial »