Text

In HTML, text has no meaning on its own – all meaning must be derived from tags that are applied to the text. When text has meaning, the browser can decide an intelligent way to display that text. The following tags are used to structure text within a webpage.

The Paragraph Tag

This is the most basic type of text tag. The paragraph tag represents a single, self-contained paragraph. The content between the opening and closing tags is displayed in its own block. Paragraphs automatically add space above and below the text, ensuring that nothing else is on the same line.

Example

The following code:

<p>Hello, world.</p>

<p>This is a paragraph.</p>

Would produce the following result:

Hello, world.

This is a paragraph.

Heading Tags

Heading tags are used to create titles and subtitles for sections of your webpage. Heading tags generate text of varying size which is bold and which represents concepts such as a chapter title, or a blog article title. The content between the opening and closing tags is displayed as bold text. Heading tags automatically add space above and below the text, ensuring that nothing else is on the same line.

Example

The following code:

<h2>Hello, world.</h2>

<p>This is a paragraph.</p>

Would produce the following result:

Hello, world.

This is a paragraph.

The Line Break Tag

Because of the way elements are spaced in HTML, pressing enter in your text editor is not enough to move text to a new line on the final web page. Instead, we must explicitly insert a line break tag to tell the browser to move text to a new line. This tag is a self-closing tag.

Example

The following code:

<p>
    Hello, world.<br/>
    This is a paragraph.
</p>

Would produce the following result:

Hello, world.
This is a paragraph.

The Horizontal Rule

The horizontal rule creates a full-width horizontal gray bar, to be used as a section divider between pieces of content. This tag is self-closing. The horizontal rule automatically adds space above and below, ensuring that nothing else is on the same line.

Example

The following code:

<h2>Hello, world.</h2>

<hr/>

<p>This is a paragraph.</p>

Would produce the following result:

Hello, world.

This is a paragraph.

Summary