codescracker


html

HTML Arranging Text



« Previous Tutorial Next Tutorial »


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 and HTML page as a single paragraph.

You can format this text in different ways by using the various tags. For example, the P tags is used to arrange the text in multiple paragraphs and the BR tags allows you to continue text from the next line. There are the following tasks are involved in arranging the text of a Web page :

Note - Inserting line breaks, creating paragraphs, and creating horizontal lines have already been discussed in previous tutorials.

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 break the line irrespective of the space available in the Web page.

Defining the Preformatted Text

In HTML, the preformatted tag, PRE, instructs the browser that the enclosed text is a formatted text and should not be formatted again. It is the default behaviour of HTML that it disregards the space and the tabs to display a formatting 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.

HTML PRE Tag Attributes

The following table given here list and describes attributes available in the PRE tag:

Attribute Description
class Indicates the class name for the PRE tag
dir Indicates the direction of the enclosed text
id Indicates an unique id for tag
lang Indicates the base language used for the tag
style Indicates an inline style for the tag
title Indicates an extra information about the tag

HTML 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 in sections and apply Cascading Style Sheet (CSS) on 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 the paragraphs while the DIV tag is used to divide the Web page into different sections.

HTML DIV Tag Attributes

The following table describes attributes of the DIV tag.

Attribute Description
class Defines the class name for a tag
dir Defines the text direction for the content in a tag
id Defines an unique id for a tag
lang Defines the language code for the content in a tag
style Defines an inline style for a tag
title Defines an extra information about a tag

HTML SPAN tag

The SPAN tag is used to change to style of the text enclosed within the tag using the style attribute. The SPAN tag provides the 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.

HTML SPAN Tag Attributes

The following table describes attributes available in the SPAN tag.

Attribute Description
class Defines the class name for a tag
dir Defines the direction for the content in a tag
id Defines an unique id for a tag
lang Defines the language code for the content in a tag
style Defines an inline style for a tag
title Defines the title for a tag

Formatting 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 the 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, 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

HTML Ruby (Captioned) Text

You can define the caption for your text using the RUBY tag in you Web page. This tag is used to specify ruby annotations that provide reading or pronunciation guide of a particular language, such as Chinese and 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).

Ruby annotations are frequently used in many Asian countries, such as Japan and China to provide the pronunciation guide in various kinds of publications, including school books and magazines. The RUBY tag contains the following tags :

These tags are used to provide a structural association between the ruby text and 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 RUBY Tag Attributes

The following table describes attributes that can be used with the RUBY tag.

Attribute Description
class Indicates the class name for the RUBY tag
cols Indicates the number of columns used in the table
dir Indicates the direction of the enclosed text
id Indicates an unique id for a tag
lang Indicates the base language used for a tag
language Indicates the scripting language used for a tag
style Indicates an inline style for a tag
title Indicates the title of a tag
name Indicates the name of a tag

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test