Home and Learn: Web Design Course

HTML Text Formatting

In the next section of the course, we'll be taking a look at CSS. Cascading Style Sheets allow you to change the look and feel of all the elements you put on a web page. For now, let's take a look at just a few ways to format text on the page using plain HTML.

Centering Text in HTML

To center your text, you can use the align attribute along with the word "center":

align="center"

So, if you wanted to center a H1 heading, add the attribute and its value:

<h1 align="center">Center Text HTML</h1>

Note that the value for the align attribute comes after an equal sign (=). And the value itself needs to go between two double quotes.

The align attribute can be used on other tags. For example, whole paragraphs:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum tellus pellentesque eu tincidunt tortor. Turpis massa sed elementum tempus egestas. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Risus quis varius quam quisque id diam vel quam.

The align attribute doesn't work with images, however. You can't do this:

If you tried that, the image would still be left-aligned. You can, however, wrap an img tag in a p tag. Like this:

Now the image will be centered.

Left and Right Align Text in HTML

By default, text is always aligned on the left. So you don't need to do this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum tellus pellentesque eu tincidunt tortor. Turpis massa sed elementum tempus egestas.

You can, if you want. But it's a bit redundant.

To right-align your text, just add the value "right" after align:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum tellus pellentesque eu tincidunt tortor. Turpis massa sed elementum tempus egestas.

HTML and Fonts

You don't have to use CSS to apply a font to your text. You can just use the HTML tag FONT. The FONT tag has an attribute called FACE. The value for this can be a single font name, or a series of fonts. Like this:

Text with a font applied

Text with a font applied

If you add multiple fonts, the browser will try to use the first one on your list. If this font is not available, it will try the second one. If that's not available, a fall-back option can be used, sans-serif, in this case.You can use as many font names as you like on your list. Just remember to separate each font name with a comma.

Here are some popular font families to try:

Text with a font applied

Text with a font applied

Text with a font applied

Text with a font applied

Text with a font applied

The default font for a browser is sans-serif. In other words, that's what you get if you don't apply a font.

Font Color

You can also add a color with the COLOR attribute (note the American spelling, you Brits!).

Text with a font applied

You can use a hexadecimal code, like the one above, or a recognised color name:

Text with a font applied

You can also use an RGB vlaue:

Font Size 6

Of course, life is easier if you use CSS to do your text formatting, as you'll see soon. But it's always nice to know how to do things without CSS. In the next lesson below, you'll learn how to create a list using HTML.

<< Bold and Italic Text | HTML Lists >>

Back to the Home Page