Text formatting
Block level elements
A block level element is something like a paragraph or heading. Typically, when browsers display them, they are shown with gaps above and below them to separate them from other elements. There are a few main block level elements that are of main interest at this stage. These are the headings, paragraph, preformatted text, and generic div elements. Browsers will have a default way of displaying these, so that even if there is no styling information, readers can still make sense out of the information.
Unless otherwise stated, these block level elements can only contain inline elements or text. They cannot contain other block elements.
<h1>- Generally this serves as the main heading on the page. It is often the same as the title, but it does not have to be. Normally, this would be the first element inside the BODY.
<h2>-<h6>- These are sub headings. You should step through these in sequence. If you need to give subheadings to anything after the main heading, then you should use H2. If you need to create subsections within these sections, they should use H3, etc.
<p>- This denotes a paragraph, just like a normal paragraph in a document. In theory you can omit the closing tag, but I advise you to always include it.
<pre>- This denotes a block of preformatted text. In general you should avoid this, but it can be useful for a few things, such as displaying a block of source code, or displaying a verse of a poem. Inside a PRE block, all spaces, tabs and linebreaks are preserved, and will be displayed on the page.
<address>- This denotes a special type of paragraph that contains contact information, such as a postal or email address.
<blockquote>- This is for use when quoting text from other pages, books, documents, speeches, etc. It cannot contain text directly, and should instead contain other block level elements. They can then contain the quoted text. It is also possible to use the cite attribute to give the URL of a page where the quote was taken from, but no current browsers have a useful way to use that.
<div>- This is a generic block element, and it can contain text directly, or it can contain other block elements. In pure HTML, it serves no purpose. The reason it exists is mainly to facilitate styling, or to allow you to denote arbitrary blocks of content, to give meaning where there is nothing more appropriate. For example, there is no footer element in HTML, but you may still want to create a footer for your document. If you cannot find a more appropriate element for what you want to put in your footer, you can create a DIV and use either the ID or CLASS attributes to give it an identifier of your choice. You can then use that identifier to denote a footer, which you can then style with CSS.
<hr>- Displays a horizontal rule between two blocks. Note that if you need to display horizontal rules, there are usually better ways, such as using CSS to apply a border to an element. The HR element itself has no real meaning in HTML.
Inline elements
Inline elements are fragments of the contents of a block level element. For example, a piece of emphasised text inside a sentence. HTML has a large number of these inline elements, and they each serve a specific purpose. Browsers may apply default styles to these elements, such as displaying a line through deteted text, and using italics for definition text. There is no strict rule as to how these should be rendered, and most users will be used to the response of their browser. If you need a specific response, use CSS to style the elements however you need.
Inline elements can contain other inline elements as long as they are correctly nested.
<em>- Indicates emphasised text - most browsers render this in italics.
<p>This is an <em>important</em> word.</p> <strong>- Indicates strongly emphasised text - most browsers render this in bold.
<li>This is <strong>very important</strong>.</li> <sub>- Indicates subscript text - most browsers render this in a small font, positioned near the bottom of normal text.
<h3>Oxygen is O<sub>2</sub></h3> <sup>- Indicates superscript text - most browsers render this in a small font, positioned near the top of normal text.
<p>This is the 2<sup>nd</sup> street.</p> <code>- Used for a short piece of programming code that is used as part of a sentence - most browsers render this in a monospace font.
<dd>This is done using the <code>x++</code> operator.</dd> <samp>- Used for a sample output from a program, script, or form - most browsers render this in a monospace font.
<p>This script would output <samp>Hello world</samp></p> <kbd>- Used to indicate a key combination or keyboard shortcut - most browsers render this in a monospace font.
<td>Press <kbd>Ctrl+C</kbd> to copy</td> <var>- Used to indicate a program or code variable - most browsers render this in italics.
<li>Here, we can use the <var>window.document</var> object</li> <dfn>- Used to indicate that the word(s) inside the DFN element are being defined in the current paragraph (or whatever the parent block element is) - most browsers render this in italics.
<p>A <dfn>heading</dfn> is a title for a section of a document.</p> <ins>- Indicates that the inserted text has been inserted into the document after its initial creation - generally used along with the DATETIME attribute to say when the change occurred.
It is also possible to use the cite attribute to give the URL of a page with more details about the change, but no
current browsers have a useful way to use that. Most browsers render this with an underline or in italics. The
underline can make it easy to confuse with links, but most browser have still adopted the underline convention.
<p>This is <ins datetime="2006-02-22T17:43:32GMT">not</ins> the only time this has happened.</p> <del>- Indicates that the inserted text has been deleted - generally used along with the DATETIME attribute to say when the change occurred - most browsers render this with a line through it.
<p>There are <del datetime="2006-02-22T17:43:32GMT">loads of</del> options.</p> <abbr>and<acronym>- Used to indicate that the word or letters are a contracted form of more words. There is a lot of confusion over
where each of these should be used, but in general, the ABBR indicates that the letters are not spoken as a word
(such as HTTP), whereas ACRONYM indicates that the contents are
spoken as a word (such as such as laser).
Future HTML versions will only have the ABBR element, so you may want to avoid the ACRONYM element
altogether, and use only the ABBR element for all abbreviations and acronyms.
The title attribute is used to give the full expanded form of the abbreviated word. Most browsers display this with a
dotted bottom border. Internet Explorer 6- does not recognise either of these elements. Internet Explorer 7+ recognises
both, but does not apply any styles to them by default.
<dd>This uses the <abbr title="HyperText Transfer Protocol">HTTP</abbr> protocol.</dd> <q>- This is for use when quoting text from other pages, books, documents, speeches, etc. In some browsers it will
automatically be given quotes at each end.
It is also possible to use the cite attribute to give the URL of a page where the quote was taken from, but no
current browsers have a useful way to use that.
<p>According to him <q cite="http://example.com/">there is no spoon</q>.</p> <cite>- Used to give the title of a cited source - most browsers render this in italics.
<li>More information can be found in <cite>A Tale of Two Cities</cite>.</li> <span>- This is a generic inline element. In pure HTML, it serves no purpose. The reason it exists is mainly to facilitate
styling, or to allow you to denote arbitrary inline content, to give meaning where there is nothing more appropriate.
For example, you may want to show how to work through a menu to find the desired option. Since there is no menu path
element in HTML, you could use a span, give it an appropriate CLASS or ID that you can use as
an identifier, then use that identifier to style it in the CSS.
<li>Open the options dialog using <span class="menu">Tools - Options</span>.</li> <br>- Inserts a line break into text, and does not have a closing tag. This should be avoided in most cases. There are very few cases where this is the
right thing to use. The only places where it should be used are where the parent element has no other means of
formatting but the contents require line breaks, such as a postal address inside an address element.
<address>22 Example Street<br>Exampletown</address> <b>,<i>,<big>,<small>,<tt>- These elements make text bold, italic, big, small, and fixed width font respectively. HTML transitional also allows a few others such as STRIKE or S (line-through), U (underline), and FONT (font families and colours). I recommend that you avoid these, mainly because there is almost always something much more appropriate.
Last modified: 6 May 2010