HTML tutorial formatting text Free Web Design Tutorials
Home   HTML CSS JavaScript PHP MySQL Usability Glossary
HTMLBasicsCreating a DocumentHead and Body ElementsHTML Formatting TextFormatting TextCreating ListsEmbedding ImagesURLs ExplainedLinking to DocumentsCreating TablesForms - BasicsInput and TextareaSelect ListsFramesetsThe Frame ElementNested FramesetsTargeting FramesInline Frames

Home > HTML > Formatting Textprinter version

HTML - Formatting Text

HTML provides almost complete control of the text layout of web pages allowing you to create well-formed documents - something vital for usability, accessibility and good search engine placement.

Headings

The heading element takes the form <hn>My Heading</hn> where n can take a value between 1 and 6 and 1 is the largest and 6 is the smallest.

The heading element supports a number of attributes; two of the most important are shown below.



Headings are important since they not only summarise the text content below them but allow a hierarchy of ideas using successively smaller headings and this is the key to a well-formed document.

Line Breaks

Browsers ignore carriage returns and white space when a document is rendered therefore tags must be used to break up text. The <br> element breaks to a new line and if you wish to break for more than one line then multiple break elements can be used.

The break element, which has no closing tag, has a number of attributes, including class, but one to note is the clear attribute. This is used to extend the wrapping options of text around objects such as images to ensure that any subsequent text begins below the object.

Left means that the text will appear at the first clear left margin - right means the text will appear at the first clear right margin - all means that both margins must be clear for the text to appear. This takes the form below.
<br clear="left">

The paragraph element also breaks to a new line and appears similar to break however there's a major difference. Paragraph has a closing tag and is a container element. Containers are important in HTML since they can be referenced by style definitions and JavaScript.

Paragraph has the same attributes as heading and similarly allows all the text within the paragraph to be aligned left, right or center. Also, as with heading, the class element allows all the text within the start and end tag to be rendered according to a previously defined style. Examples of paragraph are shown below.

Paragraph Examples


Horizontal Rules

Horizontal rules can break up sections of a document. The <hr> element has no closing tag but supports a number of attributes, the most important of which are shown below.



Horizontal Rule Example
<hr align="center" size="10" width="50%">


Font

The font element is depreciated in HTML 4.01 since font can be set with style definitions. Setting font using style definitions is so much more useful than setting it with the font element that normally you shouldn't even consider using font tags and for this reason it's not covered here.

Emphasis

Sections of text can be emphasized using bold or italic tags. e.g. <b>Bold text</b> or <i>Italic text</i>

Special Characters

As already mentioned, white spaces are ignored by browsers therefore if you require more spaces than the initial space character, then &nbsp; has to be typed into the document.

The less than < and greater than > characters are treated by the browser as HTML tags therefore if you wish them to appear in your text then you need to type in &lt; for less than and &gt; for greater than.

Many characters that you may wish to use are not available from the keyboard therefore you need to type in special characters. These characters start with & and end with ; with the name of the character between e.g. © which is &copy;. Lists of these characters are readily available so are not reproduced here.

Previous - Head and body elements Previous - Head and Body Elements     Next - Creating Lists Next - HTML creating lists


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2009 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2009
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Recommended Reading
bullet proof web design

creating web sites

web redesign