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. The
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
<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>
<p>Some modified horizontal lines:</p>
<hr width="50%" size="8" align="center">