Other Formatting Tags

You can spice up the look of your text with special formatting elements. The can give your site some more structure as well as provide context for the information you're trying to convey.

Blockquote

If you're writing an article about people you've interviewed or a piece of literature it's often required to provide quotations from your source. HTML allows you to do this with the <blockquote> element.

A typical piece of blockquote text may look something like this:
<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <blockquote> "To dismiss front-end design as mere 'icing' is to jeopardize the success of any site." — Curt Cloninger, 2001 </blockquote> </body> </html>

And will produce

"To dismiss front-end design as mere 'icing' is to jeopardize the success of any site." — Curt Cloninger, 2001

Preformatted Text

Preformatted text will retain the whitespace it's written with. This is useful if your text needs to be displayed exactly as you've written it, such as poetry.

A typical piece of preformatted text may look something like this:
<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <pre>Some text here</pre> </body> </html>

And will produce

Some
  text
  here

Code

This element is semantic because it exactly describes the text it's presenting. Only lines of computer code (HTML, Javascript, C, etc) should appear within the tags. Keep in mind that the default behavior of most browsers will show code in monospaced fonts (Courier, System, etc.). Each of the code blocks presented throughout this site is written within code tags.

A typical piece of code text may look something like this:
<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <p> <code>Some programming language here</code> </p> </body> </html>

And will produce

Some programming language here

«...Standard Formatting Lists...»

Advanced Tips

Like many of the other elements we've discussed so far, <blockquote> is block-level so it will automatically break any paragraphs its inserted into. <pre> is odd in that it can be nested within a block-level element, but if there are breaks it will display them just as you typed them. The <code> element is strictly inline so you should always nest it within another block-level element such as paragraphs.

Blockquote, Pre, and Code were often used together to present coding examples within tutorial sites (such as this one) before CSS became popular. While still valid, the use of <blockquote> for this didn't make much sense semantically. You're not quoting anything, but showing an example.

Also, the use of <pre> to retain the whitespace formatting can be accomplished through CSS's whitespace property. That just leaves us with the <code> element in our HTML, which makes much more sense as markup.