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 -
divtag 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 -
- Used to define paragraphs of text, much like you would see in a book.
A lot of text can appear within the
</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:
width="?"- Paragraph will occupy a fixed width or percentage of the page, default 100%
- 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.
spantag can be used within
ptags as it does not create a new horizontal block boundary.
- Line Break -
- 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 -
- 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 -
- 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.
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>
(*) 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.