Text and Fonts

Structuring Text

HTML provides several tags other than <p> for breaking text into pieces. Earlier sections discussed lists and tables, but some other containers are <div> (division) and <span>. Both of these tags are mainly used to apply styles to sections of an HTML document. For example, the following text can be written in two ways:

Click to view Live Example

<p style="color: maroon;">Maroon paragraph 1.</p>
<p style="color: maroon;">Another maroon paragraph.</p>
One way to color multiple paragraphs

Click to view Live Example

<div style="color: maroon;">
	<p>Maroon paragraph 1.</p>
	<p>Another maroon paragraph.</p>
</div>
Coloring multiple paragraphs using <div>

A single <div> element can contain multiple paragraphs, or even other containers. Since styles cascade, any styles added to the div element will be given to all of the paragraphs inside the div.

The <span> Tag

Another useful tag for styling text is the <span> tag. By itself, it doesn't do anything, but when given a style attribute, it allows only part of a paragraph to be styled:

Click to view Live Example

<p>This is normal text, but <span style="color: blue; font-weight: bold;">this is not</span>.</p>
Styling a few words in a paragraph

Which produces the following text. This is normal text, but this is not.

Block or Inline

The difference between <div> and <span> is that the div tag is called a block tag, while span is an inline tag. Block elements can contain other block or inline elements, but cause web browsers to add space around them. The <p> tag is a block element, which is why two paragraphs start on different lines.

On the other hand, inline elements do not start on a new line, but can only contain other inline elements. Putting a <div> inside of a <span> would work in modern browsers, but would not be correct (and is likely to not be consistent across different browsers). Plain text by itself is considered an inline element.

Font

Web browser automatically size header tags, but most times that's not enough. Changing font size was introduced in the previous section about styles, but there is also a CSS style property for setting the font for text. The font-family property allows you to set the font for any HTML tag to a list of choices. The first font that the web browser supports in the list will be used. For example:

Some of you will see Harrington font, but you may see Helvetica, Arial, or a generic serif font.

Click to view Live Example

<p style="font-family: madeupfont, Harrington, Helvetica, Arial, serif;">Some of you will see Harrington font, but you may see Helvetica, Arial, or a generic serif font.</p>
Changing a paragraph's font

The font-family property should always contain at least one "standard" font and one of the default fonts, serif or sans-serif. Otherwise the browser is free to choose whatever font it wants.