Bookmark and Share

HTML - Formatting Text Elements w/ Tags

As you begin to place more and more text elements onto your website, you may find yourself wanting to incorporate bold or italic properties ing your text elements. HTML offers a handful of special tags that can be utilized to do just that:

Advertise on Tizag.com

HTML Text Formatting Tags:

<p>An example of <b>Bold Text</b></p>
<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>
<p>An example of <code>Computer Code Text</code></p>

HTML Formatting Text:

An example of Bold Text
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of superscripted Text
An example of subscripted Text
An example of struckthrough Text
An example of Computer Code Text

All of these tags add a pinch of flavor to HTML text elements, from paragraphs to lists and text links

HTML - About Formatting Text Elements

Formatting elements such as <b> should be used sparingly, and what we mean by that is that you should only use them to bold or italicize one or two words at a time. If you wish to bold an entire paragraph, the better solution would involve Cascading Style Sheets (CSS) and adjust the element's font-weight property. You may consult how to do that in our CSS Tutorial. Ultimately, the decision is in the hands of the web designer, but generally, it's best to keep the use of these tags quick and sparse.

HTML - Line Breaks

A line break is used in HTML text elements, and it is the equivalent of pressing Enter or Return on your keyboard. In short, a line break ends the line you are currently on and resumes on the next line. Earlier, we mentioned that each paragraph element begins and ends with a line break, which creates an empty space between the start of a paragraph element and the end of a paragraph element.

As we've mentioned, line break elements are a little different from most of the tags we have seen so far because they do not require a closing tag. Instead, their opening and closing tags are combined into a single line break element. Placing <br /> within the code is the same as pressing the return key in a word processor. Use the <br /> tag within other elements such as paragraphs (<p>).

HTML Format Text:

<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>

Address:

Will Mateson
Box 61
Cleveland, Ohio

We have created an address for a letterhead and used a line break <br /> tag inside of a paragraph element to add some line breaks to make this text appear more like an address. Here's another look as we add a signature element to the same letter.

HTML Text Format:

<p>Sincerely,<br />
<br />
<br />
Kevin Sanders<br />
Vice President</p>

Closing Letter:

Sincerely,


Kevin Sanders
Vice President
Bookmark and Share


Tips

  • Remember that there is a special tag for line breaks and horizontal rule tags.
  • Use this page as a reference if you ever need to format your website's text in the future.


Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials