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 always will 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

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

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

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.