Formatting Text

Posted in HTML | Posted on 15-03-2009-05-2008

When you create your web page, you might have content that you want to place emphasis on.   A few examples could be a header title for a paragraph or text in bold to catch the reader’s attention.  In this tutorial we will be introduced to some basic text formatting tags.

What we will do first is copy this example below and name it formatting-text.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Formatting Text</title>
</head>
<body>

<h1>Hello World</h1>

<h2>Hello World</h2>

<h3>Hello World</h3>

<h4>Hello World</h4>

<h5>Hello World</h5>

<h6>Hello World</h6>

<hr />

<small>small: Hello World</small>
<br />
<big>big: Hello World</small>
<br />
<sub>subscript: Hello World</sub><sup>superscript: Hello World</sup>
<br />

<br />
<em>emphasized(italic): Hello World</em>
<br />
<strong>bold: Hello World</strong>

</body>
</html>

When you view this page, you can see the output that these tags produce.  With this page you can experiment with these tags.

Understanding The Code

The <h1> tag outputs a first-level header.  This tag is commonly used for headers.  You can use a header for the title of a paragraph, or you can use a header to display the titles of your web pages.  <h1> tags are commonly used for Search Engine Optimization purposes.  SEO is the art of achieving higher rankings in search engines.  We will talk about this in the future.

The <h2> tag outputs a second-level header.  You can use this header as you choose.  This tag is also used for SEO purposes.

The other header tags also produce headers.  You can use <h3> as you choose.  The other tags are seldom used, but you can use them however you choose.  In some browsers there might not be a visual difference between them.

The <hr /> tag simply outputs a horizontal line.

The <br /> tag creates a line break.  When you insert a line break, your next line of code will display on the next line.

The other tags in the example are pretty much self explanatory.

Final Word

Out of the material we went over, the tags you will most likely use the most will be <h1>, <h2>, <br />, <strong>.  In addition you can also use the <b> tag for bold text and the <i> tag for emphasized text.  Another common tag you will use is the <p> paragraph tag.  Since we have used it in previous examples, we understand its function and that’s why it was not included in this tutorial.