Common Formatting Tags

« Previous: Required tags | Next: Nesting and element types »

Now you know how to build the basic structure of a web page, you can try out some of the tags which are most commonly used to add content to pages. These tags can be placed anywhere within the <body> tag.

<h1> to <h6>

The <h1> to <h6> tags define headings. <h1> is the largest heading; <h6> is the smallest heading.

Code Output

Code	Output
`<h1>Heading 1</h1> <h2>Heading 2</h2> <h4>Heading 3</h4> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>`	Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

<h1>Heading 1</h1>
 
<h2>Heading 2</h2>
 

<h4>Heading 3</h4>
 
<h4>Heading 4</h4>
 
<h5>Heading 5</h5>
 
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p>

The <p> tag defines a paragraph. A browser will usually add a small amount of space before and after a paragraph.

Code Output

Code	Output
`<p>Here is a paragraph</p> <p>Here is another paragraph</p>`	Here is a paragraph Here is another paragraph

<p>Here is a paragraph</p>
 <p>Here is another paragraph</p>

Here is a paragraph

Here is another paragraph

<br />

The <br /> tag inserts a single line break.

The <br /> tag is an empty tag - it has no end tag, so <br></br> is wrong.

Code	Output
`This here is<br />a line break`	This here is a line break

<img />

The <img /> defines an image. The src attribute tells the browser where to find the image. The alt attribute defines alternate text to display if the image can’t be shown.

Like <br />, <img /> is a single tag, with no closing tag.

Code	Output
`<img src="elephant.png" alt="Indian Elephant" />`

<em>

<em> defines emphasized text, rendered by most browsers in italics.

<strong>

<strong> defines strongly emphasized text, rendered by most browsers in bold.

Code	Output
`<em>Emphasized text</em><br /> <strong>Strong text</strong>`	Emphasized text Strong text

The  tag adds a comment in the html code. Everything inside the comment tags will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code later.

Code	Output
`<!-- this text will not show up! --> <p>but this will!</p>`	but this will!