HTML text

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. Nulla facilisi.</p>
<p>Nulla quam sem,
pulvinar id, adipiscing feugiat, aliquet vitae, velit. Curabitur pretium sem vel massa consequat vehicula.</p>

Output:

Line breaks

Maybe you've noticed the line break after Nulla quam sem, in the code of the second paragraph above and wondered why it doesn't look the same in the web page output. 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 (just a single tag without closing tag) and can be used just about anywhere you wish to add line breaks. Use it sparsely, though, as you'll soon learn about much better ways of adding controlled space between text blocks.

HTML line-break:

<p>Nulla quam sem,<br />pulvinar id, adipiscing feugiat, aliquet vitae, velit. Curabitur pretium sem vel massa consequat vehicula.</p>

Output:

Strong and emphasized text

If you wish to give extra weight to certain text parts you can use the strong tag <strong> or the emphasize tag <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:

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

Display:

Output:

Because these tags are meant to give more importance to the enclosed text, they should only be used for that purpose and not just to give text a bold or italic appearance. You'll soon learn in the CSS beginner tutorial of a much better way for doing exactly this. Remember that HTML is meant to be used for structure and semantics while CSS is for changing the style and appearance of a document.