HTML text formatting (part 3)
This is part 3 of our three lessons on text formatting.
Read the Text formatting part 1 lesson.
Read the Text formatting part 2 lesson.
This lesson 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 <p>. Using the <p> tag will place a line above and below the paragraph's text automatically.
Example:
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.
Why just print paragraphs when you can align them a certain way as well?
A paragraph can be aligned using the align attribute.
Justifying a paragraph:
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.
Centering a paragraph:
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.
Aligning a paragraph to the right:
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.
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 in HTML 4.01 and above.
Line breaks
To perform a line break in HTML, the tag to use is <br>. This tag will break a line of text or other data and continue it on the next line.
NOTE: The <br> tag has no end tag.
Example:
Output:
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:
Output:
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:
Output:
Entities
What if you want to display certain 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 certain 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 ( > )
- © - copyright symbol( © )
- ™ - 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.
