Header Elements

Just as in a rich text editor you can create headers. In HTML / XHTML we can use up to six different headers. Below is an example of these headers and how they will appear. Please note that additional formatting for these tags is possible using the style attribute or by using CSS.

<h1>Header1</h1>
<h2>Header2</h2>
<h3>Header3</h3>
<h4>Header4</h4>
<h5>Header5</h5>
<h6>Header6</h6>

Paragraph Element

The paragraph element as you have probably guessed is usually used for paragrahps! Once again you can apply additional formatting to this element by making use of the style attribute or by using CSS. Let's see the paragraph element in action:

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

List Element

The list element is used to create lists. Lists can be very useful when formatting a HTML or XHTML document but we will just cover the basic usage of this element here.

<ul>
	<li>this is a list item</li>
	<li>this is another list item</li>
	<li>this is another list item</li>
	<li>this is another list item</li>
	<li>this is another list item</li>
</ul>

Comments

At some point you may want to insert comments into your code. Comments are ignored by browsers and do not get displayed. They can be useful for you to mark areas and explain parts of your own code, or they can be used if you have scripts that parse your document. A comment will appear like the example below with <!-- as the start tag, and --> as the end tag.

<!-- This is what a comment in action looks like --/>

Line breaks

Almost every element will ignore extra line breaks, spaces and tabs. You can force a line break within almost any element with the <br /> tag. The line break element does not require an end tag.

<p>This is a paragraph
with a bunch of text
and will show you how to <br />
force a line break just about
anywhere you need to</p>

Notice that there is a line break when the code is displayed forced right after howto.

Horizontal Rule

Inserting a horizontal rule can be very useful when making a web page. It can allow you to visually separate parts of an element. The <hr /> tag requres no end tag. By default the horizontal rule will take up the entire width of the containing element, although you can optionally specify the width and other formatting using the style attribute or CSS.

<p>This is a paragraph element.</p>
<hr />
<p>This is another paragraph element.</p>

Notes about this section

Note that most of these elements are 'block' elements. The paragrahps element is a 'block' element and the browser will automatically place a line break both before and after this element. The header elements are also block elements, as well as the horizontal rule. You can actually change this behaviour using the style attribute or CSS.