HTML Additional Elements

These are elements that might not be used as frequently as the core elements.

Additional Block Level Elements
Additional Inline Elements
Additional Attributes

1: Additional Block Level Elements

Content goes into the <body> element, and then into block-level elements.

Text has two types of core container elements: headings and paragraphs. A third, blockquote, is for specialized use with quoted material.

Additionally, text can be marked up in other elements. Like the core elements, they cannot be contained within an inline element.

Pre

This element for pre-formatted text preserves (as much as possible) the formatting of a text, such as from an email message or a straight text document. The typical presentation in most browsers is in monospace typewriter type.

<pre>This block of text has carriage returns and 
some areas with several spaces:     ; five in all. 
The spaces and returns are preserved by the <pre> element.

In <pre> elements, the characters < and & must be 
entified by using &lt; and &amp; instead of the direct 
characters. It's a good idea to also entify the > with &gt;.
</pre>

Notice that <pre> elements force a width onto content, based on the longest line contained in the element.

Address

Internet addresses have a special markup also; the typical presentation is in italic or oblique. Officially, the <address> element is for electronic addresses only, much as the <cite> attribute and its value (not the <cite> element!) is for adding a URL to an element other than the <a> anchor element.

<address>JohnQPublican@somedomain.invalid   </address>

Divisions

This block level element <div> is most useful when there is no particular semantic markup element that can contain a section of a document. When used with CSS, <div> can be given properties such as color, background, alignment, borders, position, etc.

A <div> can contain any other content container element, such as <h#>, , <blockquote>, or <list>.

Additional Block Level Elements
Additional Inline Elements
Additional Attributes

2: Additional Inline Elements

Many elements can be used to affect the meaning (and thus the rendered appearance) of a segment of an HTML paragraph. These elements must be used inline, within the paragraph.

Deletions and Insertions

These two, <del> and <ins>are used to indicate changes to a document, such as might happen in a legal text. Deleted text is kept but struck out, and inserted text is underlined to indicate that it is new or different.

Some text was <del>~~Deleted~~</del>

Some text was <ins>Inserted</ins>

Citations

This element, <cite>, is used to indicate a reference to a literary or media work or to those associated with it, such as a book, movie, or webpage; and author or artist.

<cite>Book or Document Title, Author, Publisher </cite>

Code

The <code> element can be used to indicate that a short part of a paragraph is in some sort of computer language, such as HTML; usually, it is shown as monospaced typewriter text.

This is a sample of markup code: <code> </code>. As with <pre>, the characters <, &, and > should be entified.

Superscript and Subscript

Use these as footnote markers or exponents, or in chemical equations. They can be wrapped in  elements to suggest a change in scale from the normal text, or could be scaled in CSS.

Foot- or anchor note: ¹.
Foot- or anchor note: ¹.

Exponent: E=mc².
Exponent: E=mc².

Chemicals: H₂O
Chemicals: H₂O.

Quotations

Aside from long quotations, most short quotes occur within a paragraph text. For such short quotes, the <q> element would be used. This element is not widely rendered (2002) but could become more widely supported. The quotation marks used by the browser to render the quote are supplied by the lang= (language) attribute value of the document. Authors should not type quotes if the <q> element is used!

Einstein is most often remembered for his famous equation, <q>E=mc²</q>.
Einstein is most often remembered for his famous equation, E=mc².

Bold and Italic

The two elements   are useful only when the purpose of the typographic change of style or face is not semantically one of strength or emphasis. If a word or phrase should be strong, use ; if it should be emphasized or stresed, use . But, in a few situations, it might be useful to use italicizing instead of emphasis.

This tree is of the genus Quercus, or Oak.
This tree is of the genus Quercus, or Oak.

Span

The  element is the inline equivalent of <div>. It cannot, of course, contain other block level elements, but it might contain inline elements such as <cite>, , or .

As a semantics-free element, it is most often used to apply a CSS style from a style sheet, with either an inline style=" " attribute and value, or with a class=" " attribute and value.

Additional Block Level Elements
Additional Inline Elements
Additional Attributes

3: Additional Attributes

Title

Titles can be added to nearly all element start tags. The text might be shown in a browser as a "tool tip" or in the status bar. Don't rely on Title for essential information, though, as its presentation is not always accessible.

This paragraph has a title, so if your cursor lingers in one place a short text might show up.

Cite

This attribute, though named the same as the inline element <cite>, has a different purpose; as an attribute for an element, it points to an online resource, using a URL (either absolute or relative). This attribute can only be used with <blockquote>, <q>, <ins>, <del>.

There is an often-quoted remark by Einstein, to the effect that <q cite="#einstein"> E=mc²</q>. That is, Energy equals mass times the square of the speed of light.

There is an often-quoted remark by Einstein, to the effect that E=mc². That is, Energy equals mass times the square of the speed of light.

Most browsers are not yet clever enough to use this attribute yet; until they are, a standard anchor link with a URL should be provided to reach the resource.

Style and Class

Both of these atributes are most useful in conjuction with CSS. Each takes an HTML value that refers to a style sheet property and value.

This paragraph is styled to align to the right margin, which will show if there is enough text to make two or more lines.

This paragraph is styled to align to the right margin, which will show if there is enough text to make two or more lines.

This paragraph takes the class copyright from the external style sheet, and might therefore have a different color of text.

This paragraph takes the class copyright from the external style sheet, and might therefore have a different color of text.

Additional Block Level Elements
Additional Inline Elements
Additional Attributes