Sections, Divisions & Lines
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 of a section of your 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
orright
(*)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 withindiv
andp
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 Line -
<hr>
- The horizontal rule, often referred to as the HTML line separator tag, 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>
See live demo of this example or open in a new window. (Note: close window or tab to return to the guide)
(*) Important Note:
Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.