HTML Text

March 09, 2008

Text is king

No matter how many fancy effects and animations websites may have, the primary driving force of the internet has and will always be text content. Therefore, one of the first things you should learn about HTML is how to properly structure and present textual information.

Paragraphs

The most basic tool HTML offers is the paragraph element <p>...</p>. It encloses text between its opening and closing tags and adds by default an extra blank line before and after it. Here's an example with two paragraphs:

HTML paragraph:

  • <p>Donec at enim. Nunc ac leo. Proin nec odio. In id odio sed neque varius rutrum. Sed tellus. Vestibulum enim lacus, cursus id, tempus nec, consequat ac, nibh. Nulla facilisi. Donec vestibulum ante.</p>
  • <p>Nulla facilisi.
  • Nulla quam sem, pulvinar id, adipiscing feugiat, aliquet vitae, velit. Curabitur pretium sem vel massa consequat vehicula.</p>

Display:

Donec at enim. Nunc ac leo. Proin nec odio. In id odio sed neque varius rutrum. Sed tellus. Vestibulum enim lacus, cursus id, tempus nec, consequat ac, nibh. Nulla facilisi. Donec vestibulum ante.

Nulla facilisi. Nulla quam sem, pulvinar id, adipiscing feugiat, aliquet vitae, velit. Curabitur pretium sem vel massa consequat vehicula.

Line breaks

Maybe you've noticed the line break at the start of the second paragraph in above example and wondered why it doesn't look the same in the web page. HTML ignores line breaks and two or more consecutive spaces. If you want to add a line break you have to tell HTML explicitly by using the line break tag <br />.

<br /> is a self-closing tag and can be used just about anywhere you wish to add line breaks. Use it sparsely, though, as we'll soon learn about much better ways of adding controlled space between text blocks.

HTML line-break:

  • <p>Donec at enim. Nunc ac leo. Proin nec odio. In id odio sed neque varius rutrum. Sed tellus. Vestibulum enim lacus, cursus id, tempus nec, consequat ac, nibh. Nulla facilisi. Donec vestibulum ante.</p>
  • <p>Nulla facilisi.<br />
  • Nulla quam sem, pulvinar id, adipiscing feugiat, aliquet vitae, velit. Curabitur pretium sem vel massa consequat vehicula.</p>

Display:

Donec at enim. Nunc ac leo. Proin nec odio. In id odio sed neque varius rutrum. Sed tellus. Vestibulum enim lacus, cursus id, tempus nec, consequat ac, nibh. Nulla facilisi. Donec vestibulum ante.

Nulla facilisi.
Nulla quam sem, pulvinar id, adipiscing feugiat, aliquet vitae, velit. Curabitur pretium sem vel massa consequat vehicula.

Strong and emphasized text

If you wish to give extra weight to certain text parts you can use the strong tag <strong>...</strong> or the emphasize tag <em>...</em>. Semantically they have the same meaning of giving more importance to the enclosed text. However, browsers traditionally render strong text bold and emphasized text italic.

HTML strong and emphasize:

  • this is <strong>strong</strong> text<br />
  • this is <em>emphasized</em> text

Display:

this is strong text
this is emphasized text

Don't be tempted to use this if all you wish is to give text a bold or italic appearance. We'll soon learn how to do this with CSS. Remember that HTML is meant to be used for structure and semantics while CSS is for changing the style and appearance of a document.