HTML text formatting (part 3)

This is part 3 of our three tutorials on text formatting.

Read the Text formatting part 1 or Text formatting part 2 tutorials.

This tutorial focuses on:

Paragraphs
Horizontal lines
Line breaks
Presenting text exactly as it is typed
Changing text direction
Entities

Paragraphs

When you are typing a document in a word processing program (such as an essay or a novel), the document should have a certain format. Specifically, a certain formality commonly known as a paragraph. The same concept applies to content on the web. If you have a bunch of text on a webpage, it should be formatted in paragraphs.

The tag used to create a paragraph is . Using the  tag will place a line above and below the paragraph's text automatically.

Example:

So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming. Whatever your reason(s) for getting into computer programming, the road ahead is an interesting one. Computer programming is a challenging and rewarding discipline. In the past, the .htm extension was used for HTML files because of older operating systems which limited file extensions to three letters. Noawadays however, the .html extension is mostly used and using this extension is better convention.

Output:

So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming. Whatever your reason(s) for getting into computer programming, the road ahead is an interesting one. Computer programming is a challenging and rewarding discipline. In the past, the .htm extension was used for HTML files because of older operating systems which limited file extensions to three letters. Noawadays however, the .html extension is mostly used and using this extension is better convention.

You can align paragraphs using the align attribute. Set this attribute with the value "center" to center a paragraph or "right" to align a paragraph to the right.

Example:

So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming. So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming.

Output:

So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming. So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming.

Horizontal lines

Horizontal lines can be a useful tool to outline something important, to make a separation between content in a webpage, or to add style. Horizontal lines can be created with the <hr> tag. The <hr> tag takes the attribute width which specifies the width of the horizontal line.

NOTE: The <hr> tag has no end tag.

Example:

Output:

NOTE: Attributes of the <hr> tag are deprecated.

Line breaks

To perform a line break in HTML, the tag to use is  . This tag will break a line of text or other data and continue it on the next line.

NOTE: The   tag has no end tag.

Example:

Split text in half. Split this paragraph into three different lines.

Output:

Split text in half. Split this paragraph into three different lines.

Presenting text exactly as it is typed

Without using the appropriate tags, HTML will automatically remove various spaces and line breaks for you even if you did want them to be on a page. There is a tag that allows for preformatted text which allows you to present text exactly the way you want it without HTML removing spaces and line breaks. This tag is the <pre> tag.

Example:

<pre> The text in this paragraph is preformatted. You can have various spaces and line breaks without HTML automatically removing them. </pre>

Output:

The text in this paragraph is preformatted. You can have various spaces and line breaks without HTML automatically removing them.

Changing text direction

Text direction is changed with the <bdo> tag. The dir attribute in this tag specifies the direction the text will go. It can be set to "rtl" (right to left) or "ltr" (left to right).

You can use the <bdo> tag if you are working with a language that goes from right to left such as Arabic or Hebrew.

Example:

<bdo dir="ltr">Some text in English</bdo> <bdo dir="rtl">Some text in Arabic</bdo> <bdo dir="rtl">Some text in Hebrew</bdo>

Output:

Some text in English Some text in Arabic Some text in Hebrew

Entities

What if you want to display special characters on a webpage like the copyright symbol (©) or the trademark symbol (™)? You can't display such characters as you would display simple text. To display special characters, you would need to use the correct character entity for it.

Example:

Output:

Common character entities and what they will display:

& - ampersand sign ( & )
< - less than sign ( < )
> - greater than sign ( > )
™ - trademark symbol ( ™ )

For more information on character entities, read our HTML entities page.

For a full list of character entities, read our HTML entities reference page.