Formatting Text in HTML
Objectives
Practice
More Info.

Displaying Text


Text can be easily displayed in HTML by simply typing text inside the body tags. However, this does not follow our standards. For a page to be valid, all body content must be in a block level container. While there are several such types of block level containers in html, we will be focusing on two of them: header tags and div tags. This page will also discuss an inline container called a span. All span tags must be contained inside a block level element.

Header Tags

Header tags are used to allow developers consistency in the size and design of their headings. For example, in a textbook, the title of the chapter would be in the largest print (level 1 header). Sections of the chapter would be in a slightly smaller print (level 2 header). Subsections would be even smaller (level 3 header) and so on. The html header tags automatically bold their content and provide consistent sizing. There are six different levels of headers that can be used: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Each should work with a closing tag as well.

Div Tags

Div tags are used to denote a page division. That division may be different sections or even paragraphs. Div tags do not have any type of pre-formatting defined (like the bold in a header). However, div tags do force a line break at the end. The div tags work in pairs: <div>...</div>

Span Tags

Span tags, like div tags, are non-formatted tags and place no pre-formatting on their contents. Unlike a div tag, a span tag does not force a line break AND is not a block level container. This means that span tags must be written inside div or header tags. Span tags are useful for formatting pieces of text, such as underlining a book title and bolding or coloring words for emphasis. Using a span tag for formatting requires the use of the style attribute and some basic CSS. <span>...</span>

Text Styles

Any html tags that allow text inside of them, will allow for the style attribute to be present, including body, div, h1, and span. Once the style tag has been placed, inline text formatting can be rendered using the following CSS options (value choices are separated by |).

Here are some examples of text formatting at work: