Text Styling

There are a number of ways that you can style text using HTML, but the preferred way to do so is actually with CSS. As a result, this HTML tutorial is not going to cover some of the outdated HTML tags that will control the design of text (like the font tag to change the text size, color, etc). All of this will be covered in the next class on CSS.

Ultimately, HTML wasn't really intended to be used for design, which is one of the main reasons why I don't want to teach too many of the design elements of it that do exist.

There are a few simple HTML tags that can easily be used to make some basic design changes to your text that are still worth using, even though these things can still be accomplished using CSS.

Bold

To make text bold, simply surround it with an opening and closing B tag.

The sample below provides example HTML code and the result of that code:

The STRONG tag is actually considered to be a semantic version of the B tag, which is really just intended to make text bold. STRONG actually indicates that there is some kind of significance for the text enclosed in the tags, making it a preferred method in many cases for SEO purposes. By default, the strong tag will bold the text that it surrounds, but CSS can alter this default behavior.

Italics

To make text italic, simply surround it with an opening and closing I tag.

This works just like the B tag for making text bold. The I tag is also just used for display purposes, while it's counterpart EM is used for semantic meaning and can be altered with CSS. By default EM will also produce italic text, but that can also be changed using CSS.

The sample below provides example HTML and the result of that code:

Underline

To underline text, simply surround it with an opening and closing U tag. This tag does not have a counterpart like the previous two tags.

The sample below provides an example of the usage:

Strike Through

One more useful HTML design tag for text is the S tag, which produces a line through the text. An example of this tag is shown below: