Since you should now have a good understanding of tags, I won't go into a detailed explaination for each of these new tags. I'll simply show you what they do and you can view the sourcecode to see how they work. This page is going to be pretty long compared to the previous ones. It will show you a lot of ways to format your text from changing the font sizes, to making letters bold and italic, and more.

This sentence uses an italic tag.

This sentence uses a bold tag.

This sentence uses a strong tag. As you can see, "strong" and "bold" do the exact same thing. "Strong" is the newer version of "bold" tags. Computer-nerds will tell you not to use "bold" and only use "strong" instead. Do not listen to them. Use whichever one you want. They both work fine. I prefer "bold" simply because it's a lot less to type.

This sentence uses a strong tag. As you can see, "em" and "italics" do the exact same thing. "em" is the newer version of "italics" tags. Computer-nerds will tell you not to use "italics" and only use "em" instead. Do not listen to them. Use whichever one you want. They both work fine. I prefer "i" simply because it's a lot less to type.

Note that you can also "nest" these tags inside each other, in order to cumulatively add parameters to a font. That's a fancy way to say "make 'em do a bunch of stuff at the same time"...

For example, this sentence is bold AND italic.

Pay close attention when viewing the sourcecode for the previous sentence and see how the tags are nested. The most important thing to remember when nesting tags is to CLOSE THEM IN EXACT REVERSE ORDER. You can start with bold or italic - it doesn't matter which order you open them - just be sure to close them in the reverse order you opened them with.

Why is it important to close your tags in exact reverse order? Two reasons:
1. It's a lot easier to read the code and understand what is going on when things are organized in order.
2. Browsers will sometimes get confused and start acting all wonky if you start closing your tags in a haphazard order. This is especially true when you start using more powerful and sophisticated tags which control things like page layout. If you start opening and closing page layout tags in the wrong order, your whole page can break. So, get into the good habit of always closing things in reverse-order.

By the way, if you aren't viewing the sourcecode on this page yet, now might be a good time to start. Lots of instructions are starting to get buried in the comments here.

Fonts can also be colored to any color you want. And again, colors and other parameters can be combined - for example, colored fonts with bold and italics or both italic and bold simultaneously.

Font colors use a # symbol, followed by 6-digit code (called a "hexadecimal" or "hex") to determine the color being shown. How do you find the hexadecimal code (or "hex value") to create the color you want? There are many options - various image editors give hex values, a Google search for "hex color", there are even small applications that can help you out. Quick little side note - you can use a hex value to change the background color of an entire page too - click here to see an example.

Similar to "bold" and "paragraphs", there are 2 ways to color your fonts. You can use a "font tag" or you can use an "inline style" to get the same result. I highly recommend learning the "inline style" method.

Why use "inline styles" instead of "font-tags" for coloring your font?

Because "inline styles" are a direct relative to "cascading style sheets" (known as "CSS") which are a very robust and powerful way to control numerous aspects of your page such as text parameters. While both an "inline style" and a "font tag" only apply to a single instance of text, CSS can control text all over multiple pages of an entire website. In other words - if you change a specified CSS font color from red to blue, it will change all instances of that font, all over your site, instantly! If you use "font tags" or "inline styles" you'd have to change each font color individually. Hence, during the learning process, I suggest you apply customization to your text with "inline sytles" because by learning those, you will already understand 80% of CSS when it comes time to learn CSS functionality.

Not only can you make text bold using a bold tag or a strong tag, but can also do it with an inline style as well - in fact, this sentence uses all 3 methods. View the source and check it out.

This sentence is using an "inline style" for making this text bold and blue and for making this text italic.

This sentence is using "font tags" for making this text bold and blue and for making this text italic.

As you can see, the two sentences above look identical in a browser, but the code looks very different when you "view source" for this page. The "inline style" approach is a little more complicated, but, again, I recommend that you learn "inline styles", simply because it will make CSS far easier to understand, and you will really enjoy the power and flexibility you get from CSS.

Another HTML tag for text formatting is called a "headline" tag. One of the unique features of a "headline" tag is providing an automatic paragraph-break, underneath the text, once the tag is closed.

This uses a "H1" headline tag. Note the automatic paragraph break beneath this line.

This uses a "H2" headline tag. Note the automatic paragraph break beneath this line.

This uses a "H3" headline tag. Note the automatic paragraph break beneath this line.

This uses a "H4" headline tag. Note the automatic paragraph break beneath this line.

This uses a "H5" headline tag. Note the automatic paragraph break beneath this line.

Once again, the below text illustrates how an HTML tag for text formatting (namely the "headline" tag) can be "recreated" using an "inline style" instead. However, an "inline style" does not provide the automatic paragraph break - when using inline styles, the line breaks must be inserted manually.

This uses an "inline style" to attain a similar effect as a H1 "headline tag."

This uses an "inline style" to attain a similar effect as a H2 "headline tag."

This uses an "inline style" to attain a similar effect as a H3 "headline tag."

This uses an "inline style" to attain a similar effect as a H4 "headline tag."

This uses an "inline style" to attain a similar effect as a H5 "headline tag."

Now, let's cover another common need in text layout - numbering lines and bullet points. This is very simple code too. Be sure to view source and see how it was done. Here are examples of each:

First number item.
Second number item.
Third number item.
Fourth number item.
Fifth number item.

First bullet item.
Second bullet item.
Third bullet item.
Fourth bullet item.
Fifth bullet item.

Finally, let's show you how to change the font itself. We have just been using the default "Times New Roman" font. But, by using a font tag, we can change the font to be anything a user has on their system. For example...

This sentence uses the "Arial" font tag.
This sentence uses the "Courier" font tag.
This sentence uses the "Verdana" font tag.
This sentence uses the "Tahoma" font tag.

However...

With the dawn of HTML5 (the latest and greatest iteration of HTML) the "font face" tag is no longer officially supported. Therefore, you should use an inline style instead. That looks like this...

This sentence uses the "Arial" font style.
This sentence uses the "Courier" font style.
This sentence uses the "Verdana" font style.
This sentence uses the "Tahoma" font style.

So far, we have covered a lot of basics in a very short time. We covered many variations of formatting text, changing the color of a whole webpage, adding images to the page, linking text, and linking images. Of course, all our content simply runs down the lefhand side of the page and that's not a very compelling way to build a website. The next step is to start some real formatting and page layout.

This text links to the next page. Below, you will find links to all of the previous pages we have viewed.

First page
Second page
Third page
Fourth page
Fifth page
Sixth page