Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
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
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksMeta TagsTransition EffectsHTML GeneratorsCreate a DocumentCreate a ListCreate a Table
Got any HTML Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
bullet proof web design

creating web sites

web redesign