Section Divisions

These are the tags used to divide your page up into sections. Effective use of these tags will mean that the page has a good structure and layout, making it more user friendly and easier to read.

Division - <div> </div>
The div tag defines a section or division within a HTML file. It typically contains headings, paragraphs, tables or other elements that need to be grouped together. Commonly used with css by setting the <div class="?"> attribute to set the look and feel for an entire section of a web page.
Paragraph - <p> </p>
Used to define paragraphs of text, much like you would see in a book. A lot of text can appear within the <p> and </p> tags, and browsers will automatically wrap the text onto the next line once it reaches the edge of the screen. When another <p> tag is used to start the next paragraph, the browser will add some blank space between the paragraphs. It has the following attributes:
align="?" - Alignment of text in the paragraph: left, center or right (*)
width="?" - Paragraph will occupy a fixed width or percentage of the page, default 100%
Span - <span> </span>
Used to group inline elements together, such as a few words within a sentence, in order to apply a css style to those words only. The span tag can be used within div and p tags as it does not create a new horizontal block boundary.
Line Break - <br>
Equivalent to one carriage return, it is used to start text on a new line. Multiple <br> tags in a row will create a large vertical space on a web page.
Horizontal Rule - <hr>
Also referred to as the HTML line separator tag, hr creates a horizontal line commonly used to visually separate sections on a page. It has the following attributes:
width="??%" - The line will occupy a fixed width or percentage of the default 100% width.
color="#??????" - Colour of the line (*)
noshade - Prevent the 3D 'etched' look and create a flat, solid line separator.
No Breaks - <nobr> </nobr>
If for some reason you want text to continue in one straight line, and not to wrap at the edge of the screen screen, you can use the nobr. Note: this will force a user to scroll to the right to see the rest of the line, which is considered bad design.

Example:

Below is an example of some of the tags explained above

<html>
 <body>
  <p align="right">The first paragraph of text, aligned to the right.</p>
  <p>This text is now in the second paragraph.
  <br>A new line, but still part of the second paragraph.</p>
  <p>A third paragraph, and then a horizontal line</p>
  <hr>
  <p>Some modified horizontal lines:</p>
  <hr width="50%" size="8" align="center">
  <hr noshade>
 </body>
</html>

Open this example in a new window. (Note: close the window or tab to return to the guide)

(*) Important Note:

Tags marked with (*) should still work, but have been superseeded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.