Built-in HTML Formatting Styles

HTML provides a number of built-in text formatting styles, for rendering addresses, code and quotations.

Four tags which have their own rendering style, affecting how the enclosed content is displayed are:

• Address
• Code
• Pre
• Blockquote

These tags are used to create a section of text which is isolated from the main flow to highlight the particular content, be it an address, a block of code or pre-rendered section of content, possibly taken from another document.

The tags are implemented with an opening and closing tag, wrapping the content to be rendered. For example the blockquote tag shown below.

<blockquote>CMS Website Development</blockquote>

It is considered to be good practice to use lower case when implementing the tags.

Unless you are developing your own website, from scratch using plain HTML, there is likely to be inherent styling within the site governing these styles. Many of the CMS website frameworks have a default rendered style configured which can be over-ridden as required to create the desired website appearance.

Address

<address></address>

Content within this tag pair is used to portray the contact details for the author of the document or page content.

The tag content can be the email address, telephone number and name of the author. The recommendation is not to use the tag to wrap arbitrary addresses.

The tag begins its embedded content on a new line separating it from the flow of text, with a gap above and below.

Neil
www.VNTweb.co.uk

Blockquote

<blockquote></blockquote>

The blockquote tag is used to group a quotation, or reference, from another piece of work.

The content wrapped by the tag is separated from the flow of text, placing it on a new line, with a gap above and below.

The default presentation of the tag is indented. In the example below a graphic is also added by the sites CSS configuration.

CMS Website

Design & Development

Pre

<pre></pre>
The pre tag preserves the enclosed white space.

Normally HTML renders multiple spaces as a single space. Using the pre tag this multiple spacing is preserved. New lines are also maintained.

By default the font used is Monotype, giving a distinctive appearance, separating it from the surrounding content.

CMS Websites
  WordPress
  DotNetNuke
  Joomla

Code

<code></code>
This tag is used to denote that the enclosed content is code. The text is shown in Monotype.


if (typeof(item) != "undefined") {
actions here
}


CMS Editors

CMS editors usually offer both the pre and address as paragraph styling options. Their selection is typically found under the paragraph formatting.

CSS

The default rendering of these tags is often overridden by the website.

Most CMSs will have their own default styling which is implemented for the various HTML tags, including those covered above.

Modifying the appearance of these built-in tags is by reference to the tag in CSS:

address{
  font-weight:bold;
  color:#00d;
}