Gareth Redfern

The Paragraph Tag

This is used to create paragraphs in your HTML document and is one of the most commonly used elements on the web. The <p> element is used to mark the start of a paragraph and the </p> is used to mark the end of a paragraph. By default the browser will automatically add some space above and below the content but this can be adjusted or removed using CSS styles.

Paragraph Tag Example

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus arcu in eros eleifend eu tempor leo ornare. Donec neque dui, pharetra vel tristique a, convallis in nisi. Cras diam ligula, sagittis eget lobortis vel, iaculis eu nisl. Proin urna ante, pretium venenatis dictum vel, tempus at ipsum.</p>

The Heading Tag

In total there are 6 levels of headlines from h1 to h6, they are used to structure your html document starting with h1 to mark up the most important (or highest-level) heading on the page down to h6. Headings are also used by search engines and assistive devices (such as screen readers) to navigate through your document.

Heading Tag Examples

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The above heading tag examples produce a structure as shown below:

Headings as displayed in Chrome with the standard browser styles applied.

The Emphasis Tag

This is used to emphasise a point in your text, by default the browser will style text wrapped in the <em></em> tags in italics. The emphasis tag should not just be used to style text in italics though, as this can be done with pure CSS, rather it should be used to semantically emphasise a word or phrase.

The Strong Tag

This is used when you need to intensify a point in your text, by default the browser will style the text wrapped in the <strong></strong> tags in bold. Similar to the emphasis tag the strong tag should not just be used to style text bold as this can be achieved with CSS, the bold tag should add semantic meaning to words or phrases that you wish to apply stronger emphasis to.

The Horizontal Rule Tag

The <hr> tag is used when you want to specifically break up text on the page visually and semantically. The use of the horizontal rule tag is similar to the emphasis and strong tag in that the use of them is subjective as there is no technical guidelines, again if you are simply trying to add style to the page then the border style should be used instead using CSS.