HTML/Basic formatting

These are some of the simplest HTML tags to learn. These tags will help make your page more organized and interesting to read. Keeping a web page organized is key principle and helps keep the page more user friendly. For example, compare Google's homepage with Yahoo's home page. Google's homepage is simple and has one function, to search. Yahoo's homepage has many services listed so users can find a diverse range of services as opposed to only being able to search. The goal is to keep your page organized and efficient.

Bold, italics, underline and strikeout

Bold text

To make text bold, we use the <b> tag, like this:

 Normal text - <b>Bold text!</b>

Which would display like this:

Normal text - Bold text!

Note: You may have seen the <strong> tags used to make text bold. The <strong> tag bolds text, but it is meant to be used to stress important words and concepts. The visual is the same, but the semantic meaning is different. As computer algorithms become smarter and better able to interpret semantics and context, semantic clarity is becoming increasingly important.

Italic text

Italics are much the same, but using the <i> tag instead, like this:

 <i>This text is in italics</i>

This text is in italics

Note: You may have seen the <em> tags used to italicize text. The <em> tag italicizes text, but it is meant to be used to emphasize specific words and concepts. The visual is the same, but the semantic meaning is different. As computer algorithms become smarter and better able to interpret semantics and context, semantic clarity is becoming increasingly important.

	Activity: Using the <u> and <s> tags.
	Now try the same thing with the <u> and <s> tags, which are underline and strikeout respectively. The <s> tag is usually used to show that a correction was made to previous text. It could probably also be used to show that the text is not valid anymore. How about you find a new use for it?

Nesting Tags

HTML Tags should be nested. When you have text in bold and in italics, the "<b> </b>" and the "<i> </i>" should go around each other like Russian dolls.

 <b><i> Like this </i></b>

Like this

Not:

 <b></i> This is wrong </b></i>

Nor:

 <i></b> This is also wrong </i></b>

"<i><b> fine </b></i>" is fine.

Line breaks and horizontal rules

Browsers ignore single line breaks, so the following:

This is
HTML

Would still render as:

This is HTML

However, if you use a line break, you can force a new line to occur whenever you want. Take the following code:

 This is <br>
 HTML

Which would render as:

This is
HTML

Another (less common) formatting tag is the horizontal rule, which will produce a line across the page. A horizontal rule is as simple as this:

 <hr />

Which produces the following:

---

You can also alter the size of the line, like this:

 <hr width="70%" />

Which will make a smaller line:

---

Color can also be added to the <hr /> tag. Use the color atribute <hr width="70%" color="red" size="4" />. Used along with the size atribute for thickness, and defined by pixel size, this renders a nice red horizontal rule across the page.

The Center Tag

Note how the line is still on the left? This can be fixed using the <div style="text-align: center;"> tag, which aligns things to the centre of the page.

 <div style="text-align: center;"><hr width="70%" /></div>

This makes a nice, central line:

---

You can also use the <div style="text-align: center;"> tag around text. This works well for poetry, as in the following example, which combines a few tags we've learned:

 <div style="text-align: center;"><i>
 Twinkle, twinkle, little meatball,<br>
 Off my pasta did you fall!<br>
 From the plate piled so high,<br>
 Like a lump and landing with a sigh.<br>
 Twinkle, twinkle, little meatball,<br>
 3 second rule but the dog beat me to you!<br>
 </i></div>

Which would render like this:

Twinkle, twinkle, little meatball,
Off my pasta did you fall!
From the plate piled so high,
Like a lump and landing with a sigh.
Twinkle, twinkle, little meatball,
3 second rule but the dog beat me to you!

The <div style="text-align: center;"> is deprecated. This means that it is no longer a standard by the W3C standards. The standard now is the use of attributes and CSS, which you will learn later on.

The tag in use now is the div tag and its attributes are left, center and right such as div align="center" enclosed in the proper brackets<>. formatted would look like:

center

Learning HTML

Previous: What is HTML — Next: Fonts and colours in HTML

External links

• Alignment, font styles, and horizontal rules (w3.org)