• Home
• -
• -
• -
• -
• -

Summary of HTML Elements

This is a summary of the HTML <tags> or more formally, ‘elements’.   Examples follow below. First a brief explanation of markup, tags and attributes together with stylesheets and their properties.

The standards we use for computer text today were built on those used for telegraphs

Markup is needed because computer text files can contain little more than the typeable characters. Plain text has no character code to mean bold, heading, paragraph or list and there is no way to specify actions like a link to another file. The markup tags in HTML provide a standard way for text to specify this sort of thing.

Markup is added to text by surrounding it with tags.   The start tag is the less than sign < and the greater than sign > is the end tag. So if the phrase <markup> were to appear in an html file the word ‘markup’ would not appear on the screen; instead the browser evaluates it as a control word. Since the word ‘markup’ isn't normally used for control purposes it would actually be ignored and not printed .

Most markup is intended to apply to a selected portion of text, which might range from a single letter to a paragraph, page or the whole document. Tags are used in pairs so that <b> bold </b> tells the browser to make the word(s) enclosed by the tags bold.   The start tag <b> turns bold on and the end tag </b> turns it back off again.

HTML started as a small, practical language for scientific documentation in CERN around 1990. A lot of people had been looking for a practical way to interlink documents in an non-proprietray way. It quickly caught on, but has changed a bit. At one time "tags" were uppercase, they should now all be lowercase. Most browsers (sometimes called "visual user agents") will accept either. Things often have a fancy name like “visual user agent” as well as a common one like “browser”   “element” and “tag” are another example.

The first draft spec “HTML Tags” was about 6 sides of print and suggested fewer than 20 markup tags. The tags were used to indicate the structure of a document; breaking it down into headings, paragraphs and lists. The browser (or a print routine) would then use the structure to determine how to present things. So a heading <h1> might be in larger and heavier type depending on its importance, a paragraph <p> would form a block and a list <li> would be a block with list-items bullet-pointed on individual lines. However there were no enforceable standards and other people added tags for bold, underline, centered text, colours, fonts, tables and images - things that are often more concerned with a documents presentation rather than it's structure. There are now over 100 tags although many are rarely used and some are deprecated, meaning they may no longer work in future.

The look of a document and its structure are no longer necessarily connected but there are strong arguments that they should be. A stylesheet then controls any presentation beyond the browser defaults. The type of stylesheet used is generally a “CSS” file.   Use of both HTML and CSS is initially more complicated because a page is made from two rather different languages and two files. There are considerable benefits to CSS, though. For instance:

• Repeated markup can be eliminated. Font and colour are reiterated many times in non CSS markup.
• The look of a document can be rather dull at first but it can be transformed by changes to the CSS.
• Stylesheets fit in with the way the world often works. One group of people write content, another group are responsible for presentation.
• Furthermore there can be just a few CSS files controlling the look of an entire site, so changing them can give a radical overhaul to thousands of pages .

In the paragraphs above it is suggested that <markup> would not appear on the screen but be evaluated as a control word. The trick used to make it appear here is to use HTML special characters (“ character entity references ”) which get presented as the less than and greater than signs but are written quite differently as &lt; and &gt;. HTML is full of tricks like this.   If you want to know how they work look at the source-code for the page.

This list of HTML tags has been compiled for MindMachine internal use. It is not a definitve reference work - merely notes. The W3C publications such as the HTML 4.01 specification are the definitive references. The disadvantage with the W3Cs definitive work is that the HTML 4.01 spec runs to 389 pages long - whilst this is under 40 pages long.   This file can also be edited to meet local needs.

For information on measurements see W3C Cascading Style Sheets CSS2.1 sect 4.3.2

Wikipedia also maintains a good list of tags at the page   Html_tags.  As usual there is a caution that Wikipedia can be right one day, wrong the next. It is quite possible for this document to be wrong as well.

Main Elements:

Presentational Elements:

Web pages or ‘ hypertext ’ are entirely made up of text.   One part of the text behaves just like text in any other document, it displays on the screen. The <hypertext> enclosed in less than and greater than signs is not normally visible in a browser and specifies presentation, links and images.   There are no images, objects or links in an HTML file,   just text specifying where those things are.

Much of the text is like that from any plain-text file, it gets presented literally, so the character ‘X’ prints in the browser window more or less as it is in the HTML source. There is a difference, though. If nothing else is said the character will just print in whatever default style the browser provides. However in HTML we can also change the presentation by specifying a style or font.   So for instance X might be presented as X, X, X or X.

The different presentations of ‘X’ shown there were done with:

Notice that the last X has a succession of three elements applied and then closed, it is preferable (if not compulsory) to nest the closure of things last in-first out as above.

Presentational elements are often deprecated because they don't seem to contribute "structure" to a document.   There is a problem here. Structure is not always self evident to an author, sometimes it is emergent.   So a markup is useful for the stage where we feel a word might sensibly be emboldened but are not yet sure whether it is a heading of some kind or perhaps it should be shown by some sort of id on a span.

For instance, the phrase often used in material aiming for W3C conformance is

<span style="font-weight: bold;">Note</span>

it is much more complicated than

<b>Note</b>

Having a notation to say This needs bolding is helpful.

The <b> for bold presentational element is handy and quick to use, and has a sort of meaning as an inline heading. The others are more dubious, for instance underline is often used for links and might confuse users.

A couple of other elements that have an impact on the font are

<basefont>	Specify the font size
<bdo>	Bidirectional Override

this section needs expanding

Font Elements:

There is a font element.   First a warning.

The font tag is deprecated because almost everything it can achieve would be better done using stylesheets and the HTML structural elements such as the phrase-elements below ( <h1>, <q>)   - or if necessary the presentational elements ( <b>, <tt>) above. So if you are experiencing an urge to say “ font ” in html try to use one of the phrase elements such as a heading:

The <h3> type of tag provides markup of the structure rather than just specifying a font.   It has the advantage that the font, colour and size can be uniformly changed throughout the page and indeed throughout a site by one change to a stylesheet.   Headers have a range <h1> to <h6>  .   The headers do have a disadvantage, they don't act inline - i.e.they normally force an effective paragraph break.

A possible alternative is one of the presentational elements such as <b> for bold

Supposing something bigger, smaller or just not a header is wanted and just once so the specification should be right next to the literal text,   try inline style:

... End of the warning

Font elements are another way to specify how text is to be presented.   Specifying font directly like this is easy, but it is often frowned on because unless the the change of font is a one-off it becomes inefficient.

results in:

which looks pretty much like a heading.

The font elements often prove handy in simple single pages. If there are a collection of pages it is better to avoid them and use structural and phrase elements together with CSS.

Phrase Elements:

Using the phrase elements provides some measure of "semantic markup", particularly when combined with the "class=" and "id=" attributes

Lists & Tables

Unordered Lists and Ordered Lists provide "Bullet Points"

Definition Lists alternate left justified and indented lines - as might happen in a dictionary.

Tables are (ab)used more than any other construct to get page layouts

Tables are primarily intended for organising associations of information.   A grid-like divsion of space can be used as a principle for general page layout.   Many web-pages use tables as nothing more than a layout device. Tables tend to be quite stable as layout devices across a variety of browsers and screen sizes.

Ins & Del

"ins" and "del" are intended to mark up the revisions of a document.

Scripts

Practical Examples

A basic HTML page does little more than declare itself open with the <html> tag;   declare a <header>, <title>, <body> and then close in an orderly fashion.

Minimally

A minimum page looks like this:

<html>
<head>
<title>Some Title</title>
</head>
<body>
elements - sometimes called "tags" and text.
More tags and text.
</body>
</html>

The <!DOCTYPE>

The doctype is an instruction to the system on how to read the rest of the page. Specifically it specifies the Document Type Definition (DTD) that this particular document is supposed to conform to.

For SGML and XML a Document Type Declaration is important, it specifies the structure of the language to come and there will be a formal definition file that can be referenced

HTML does not necessarily need a DOCTYPE but new browsers intended primarily for HTML5 may perform better if it is present, if it is absent the browswer may use “ quirks mode ” to render the document in the same ways as older browsers which sometimes did odd things. In practice most pages and browsers work without it, most of the time. The page can say as little as:

Header

Headers look like this:

An alternative header looks like this:

<head>...</head>

The header tags surround the title, metas and any header style rules. Headers are not visible in the page although the title is likely to be displayed at the top of the browser window

<title>  ... </title>

The title to appear in the page header or window title bar. Since users and user-agents may use titles out of context W3C suggests titles be context-rich "Introduction to Medieval Bee-Keeping" rather than just "Introduction". Unfortunately some browsers crowd the title bar with both the filename, title and browser name and then neither displays correctly. However a 5 or 6 word title is normally sufficient without being burdensome. If there really is a lot to say put it in the <meta> lines.

<meta content="..." name="...">

The meta content lines are primarily aimed at search engines and recording information we want coding up in some way but not showing on the page

<style>...</style>

<style type="text/css">
/*Add style rules */
hr.subdivision {color:blue; size:3px; width:80px}
p{color:#0030AA}
h3.html {font-size:14pt; font-family:monospace; }
p.html {font-size: 10pt; font-family:monospace; margin-left:5em; color:#000099;}
p.attribute {font-size: 10pt; font-family:monospace; margin-left:8em; color:#990099; }
</style>

Style for a page can be supplied by an external stylesheet using the <link> tag in the header. Usually having one or more external stylesheets will be most convenient as the stylesheets can then apply to the entire site.

Style can also be provided in the header of a file as shown here. This is convenient if a set of rules apply only to one or two pages.

<body> ... </body>

Delimit the beginning and end of a document body which contains the material that will be displayed on the web page. Things are either in the body or in the <head> elements.

Traditionally the body of a document would be a good place to choose a font, it's size and colour and to set things like the margins and background colours. Browsers do allow this, however the the standards bodies deprecate the idea in favour of extablishing these things using CSS.   For instance style applying to the whole document body can be set in a separate stylesheets, or in the head part of a page.

Attributes

Attributes traditionally provided, but now deprecated, are:-

alink=color - set the colour of active hypertext links

background=url - give the url of an image to be tiled in the background

bgcolor=value. Sets the background color.

bgproperties=value. Set fixed, stops background images scrolling with document content

leftmargin=value - set the size in pixels of the documents left margin

link=color - set the colour of unvisited hypertext links

text=color - set the colour of regular text

topmargin = value - set the size in pizels of the document top margin

vlink=color - set the colour of visited links in the document

Rather than assigning attributes directly to the body element it will generally be better to use a linked or embedded stylesheet.

<head> can be followed by either <body> or <frameset>

Body may be replaced by Frameset elements (but we don't use frames)

<a> ... </a>

Anchor elements provide both the links and the defined locations in a document.   The anchor element is used both as a hyperlink position to leave from or as one to go to. Using the anchor with an href=attribute and a URL make it an origin or "link". Using the anchor with a name= and a fragment identifier makes it a target anchor.

href="url" - the site and location to link to

Specifying href= and a URL as a target makes this anchor into an ‘origin hypertext reference’ - usually called a link. The example URL is “absolute”, it fully specifies what has to be done to find the resource. The URL will be broken down by the browser into scheme, DNS, and path-filename. If no filename or location are specified, as is true here, then the top of the default homepage called index.html is the default.

This short URL is a relative link, it doesn't fully specify where the resource is. The browser will only find it if there is a file called details.html in the path it last used (or in a “base” reference). The <a> … </a> tag pair surround the link-text. Instead of text the link can be an image <img>. Most browsers colour the link-text blue and put an underline so users can spot that it's there. If this rather staid behaviour is too gaudy it can be stopped - see below . Browsers also change the cursor to a pointing hand when it is over the link as standard.

The rather odd <a> for anchor name is actually used for links. The <link> element itself is given in the header of an html document and specifies its relationships with other documents - for instance the css to be used.

If the cursor hovers over a link and there is a title= attribute then the content of the title will be shown, usually in a pale yellow pop-up box. The anchor tag can also support an alt= as well.

name="#fragment" or id="#fragment"

Specifying name= and a fragment identifier makes this a target hyperlink. Browsers can then move straight to the document and the specific fragment using the US-pound sign # to identify the fragment. So an origin of

Should go to that URL and to the target within it called "ingredients".

Within the "soup" page the target can be marked by

Scattering destination anchors through a document isn't always convenient and isn't necessary. Any element with an id can be a destination.

<a href="#section1">Introduction</a><br/>
<a href="#section2">Background</a><br/>
... 

<h2 id="section1">Introduction<h2>
...section 1...
<h2 id="section2">Some background<h2>
...section 2...

As said, most browsers colour links blue and put an underscore. To suppress this default behaviour and remove underlines on links one way is to put an inline style

A link defined by <a> or <link> can have roles specified via the "rel" and "rev" attributes. For instance:

<head>
...other head information...
<title>Chapter 5</title>
<link rel="prev" href="chapter4.html">
<link rel="next" href="chapter6.html">
</head>

Attributes

class="..." - any classname. stylesheets may apply

id="..." - any id unique to the page. stylesheets may apply

href="url" - the destination for a link expressed as a URL

name="#fragment" - the name of this location within a page

title="..." - a text which will display if the cursor hovers

style="background:red"- styles should generally be provided by stylesheets but can be provided inline where something specific is required.

<img src="url" alt="alt text">

Insert an image inline into the current text flow.

The <img> tag was created by Marc Andreesen as part of NCSA Mosaic, contributing to its meteoric rise in popularity and the foundation of Netscape. The tag has been standard since the HTML 2 specification. Some of the Web's developers have never been happy with how it was implemented and Dave Raggett tried to introduce an alternative ‘ <fig> ’ tag.

The <img> tag might have been replaced by <object>, an all-purpose method for inserting non-text objects into pages. However <img> is widely used. The problem with <object> might be over complexity of the options when all that is wanted is an image. (see below)

Attributes

src="url"

specify the source URL of the image to be displayed

alt="test image"

Give an alternative text to present if the image can't be displayed. This is considered compulsory because some browsers and some users can't see images. Safari and Chrome do not display the "alt". Text can also be supplied using the title.

title="test image"

Give a text explanation of the image on ‘mouseover’. Text can also be supplied using the alt.

align="type" [ top | middle | left | right | bottom ]

Align the image to one of the types: top, middle, left, right or bottom (default).

The original HTML 2 specification supported top, middle and bottom attributes. TOP aligns text after the <img> tag to the top of the image. Bottom places the bottom of the image in line with the text baseline - which looks odd in many cases but has the least effect on text flow. MIDDLE aligns text to the middle of the image - and may look right if the image is inline with the text.

Left and right alignment values were added in HTML 3.2. If left is specified the image will appear at the left margin and text flow around it's right hand side. If right is specified the image will be at the right margin of the window with text round its left hand side.

The <br> tag can be used to push text clear of the image - eg <br clear=all>. The alignment attribbute is deprecated in favour of using stylesheets.

Minor Attributes

border="n"

Set the pixel thickness of a border around images, the default is usually none. Border colour is the text colour of the document

<img src="icon.jpg" border="1">

height="n"

width="n"

Vertical and horizontal width overrides giving the desired dimension of the image in pixels. In no dimensions are given those of the image are the default. The height and width attributes can be used to fit a large image into a smaller space or to spread a small image across a larger one. User agents do their best to scale objects to match the dimensions. Where dimensions are expressesd as a percentages they are based on the space available, not on the netuarl size of the image, objkect or applet. Designers sometimes spread one or two pixels over a space to achieve the effect of a colour wash. It is usually better to scale the picture to fit the expected space.

hspace="n"

vspace="n"

Puts a margin of whitespace around images, applets or objects. There is usually a small, unspecified default value. Use of these attributes is deprecated in favour of stylesheets.

lowsrc="URL" a lower resolution image browsers may choose.

ismap

Images with this attribute are clickable imagemaps. Clicking on the image sends pixel coordinates to a sever imagemap CGI application. Client side imagemaps are now more popular. See usemap.

usemap

Gives the URL of the document that contains map data

datasrc=url - Specify the URL of tabular data

datafld=url - Identify a column in previously identified tabular data

dynsrc=url - Specify the URL of a video clip to be displayed

vrml=url - Specify a VRML world to embed in a document

controls - add playback controls for embedded video clips

start=[fileopen, mouseover] - event that triggers dynamic behaviour

loop=[n, infinite] number of times dynamic behaviour repeats.

class="..." - any classname. stylesheets may apply

id="..." - any id unique to the page. stylesheets may apply

name="..." - a name which bookmarks, scripts and applets can use to reference the image.

name="#fragment" - the name of this location within a page

title="..." - a text which will display if the cursor hovers

style="background:red"- styles should generally be provided by stylesheets but can be provided inline where something specific is required.

Minor Attributes

lang, dir,

onclick, ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,

onkeypress, onkeydown, onkeyup,

<object>...</object>

Insert an object into a page. The object can be any MIME-type the browser understands. This element can be used to specify pictures, applets, OLE controls and other media objects including an embedded HTML page.

Attributes

data=url - Specify the URL of the data used for the object

type="..." - indicates the MIME type of the embedded object

codebase=url - codebase to be used by the object, base directory for files

codetype=codetype - Specify the MIME media type of the code

declare -defines the embedded object without actually loading it

standby="..." - message to display whilst the browser loads.

<param name=playback> Parameters for the object. The param attribute should only be used as a child of object although it was originally introduced with <applet>.

align="type" [ texttop | middle | textmiddle | left | center | right | bottom | baseline | textbottom ]

Align the image to one of the types listed below.

align="texttop" - aligns the top of the object with the top of the surrounding text.

align="textmiddle" - aligns the middle of the object with the middle of the surrounding text.

align="textbottom"- aligns the bottom of the object with the bottom of the surrounding text.

align="left" - embeded object floats left between edges of the window, similar to the the align attribute of the <img> tag

align="center" - embeded object floats center between edges of the window.

align="right" - embeded object floats right between edges of the window.

align="middle" - aligns the middle of the objecct with the baseline of the surrounding text.

align="baseline" - aligns the bottom of the object with the baseline of the surrounding text.

Setting object position using attributes is deprecated, stylesheets should be used instead.

height="n" - vertical dimension in pixels

vspace="n" - margins at the top and bottom of the object

width="n" - horizontal dimension in pixels

hspace="n" - margins to the left and right of the object

border="n" - width in pixels of a border round the object

class="..." - any classname. stylesheets may apply

id="..." - any id unique to the page. stylesheets may apply

name="..." - a name which bookmarks, scripts and applets can use to reference the image.

title="..." - A text to show as a tooltip or context-sensitive help. Depending on the object embedded there may be no opportunity to show a tooltip; images do, web pages don't

tabindex="n" - position in the browser tabbing order.

classid="..." - the URL of an object resource

datafld="..." - selects a column in a block of tabular data

datasrc="..." - location of tabular data to be bound within the document

shapes - indicated that the embedded document has shaped hyperlinks (imagemaps)

usemap="URL" - client side imagemap to use with the embedded object.

... etc - "object" needs more work.

Here is an example of an embedded object - put in with:

Note that embedding a page in another slows things down - so its commented out at the moment.

The HTML 4.01 Specification says "The behavior of a user agent in cases where a file includes itself is not defined." - if you use recursion be ready to press reset when memory fills up.

<applet>

<applet> ... Java applet

Only works for java applets. Deprecated in favour of <object>.

<base>

Specify the base URL for all relative URLs in this document

Special values are _blank _parent _self and _top

<p> ... </p>

The <p>tags indicate that the selected text forms a paragraph. The browser should set the material out slightly separated from surrounding blocks of text. <p> tags are paired, a paragraph opens with <p> and closes with </p>. Historically the pairing was optional and a paragraph closed when a construct that stopped a paragraph came along, such as the next <p>

Attributes

align=type [left | center | right ]

Align text within the paragraph to left, center or right.

style="..."

background:red; colour:white

Specify inline style commands for this paragraph

class="..." - any classname. stylesheets may apply

id="..." - any id unique to the page. stylesheets may apply

width="n" specifies a horizontal width for the paragraph in pixels

title="..." - a title to be used, typically shown as a tooltip when the cursor is over the paragraph.

Specifying the alignment and width of the paragraph should normally be done by giving structural information as to what is special about this paragraph using class or id, and then making provision in the stylesheets.

lang, dir,

onclick, ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,

onkeypress, onkeydown, onkeyup,

<div> ... </div>

Create a block level division within a document. Visually <div> on its own does very little. Unlike most block-level elements, <div> inherently creates just a line break not a paragraph break. The <div> element is intended to hold logical divisions of a text perhaps greater than a paragraph in size which can then be styled with CSS using descendant selectors. <DIV> was introduced in HTML3.2.

<span> is the inline equivalent of <div>. Visually <div> does (usually) create a paragraph, whilst <span> has no effect until styling is used.

Align=type [ left | center | right | justify ]

Gives all selected text the required alignment. Both margins can be aligned with align-justify.

DIV elements can be organised heirarchically, and in combination with style sheets the different divisions can have a different appearance.

Attributes

nowrap

title="..." - Text to show as a tooltip or context-sensitive help.

class="..." - any classname. stylesheets may apply

id="..." - any id unique to the page. stylesheets may apply

style="..."

style commands can be applied within a <div> for instance

Minor attributes

lang, dir,

onclick, ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,

onkeypress, onkeydown, onkeyup,

<span> ... </span>

Create an inline division within a document. Visually <span> does nothing, it just provides the markup for a logical subdivision in a document that can then be tyled using selectors. <SPAN> was introduced in HTML 4.

"The DIV and SPAN elements, in conjunction with the id and class attribute, offer a generic mechanism for adding structure to documents. These elements define content ... but impose no other presentational idioms on the content."   Span and div elements have no innate meaning other than to divide the document up in a way that might be used for

• presentation in conjunction with style sheets.
• structure in conjunction with document parsing software.

Attributes

The attributes most likely to be used with span are class, id and style

class="..." - any classname. stylesheets may apply

id="..." - any id unique to the page. stylesheets may apply

style="..."

Style commands can be applied within a <span> - and often are. For instance:

minor attributes

lang, dir,

onclick, ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,

onkeypress, onkeydown, onkeyup,

<br/>

Breaks a line of text and resumes at the next line. Prevents text alignment around images. The <br> tag is not paired; because of this it is preferable to write it with a built in tag closer <br/>.

Attributes

clear=margin [ all | left | right | none ]

clear=left

Break the text and move downward until the margin is clear. Margin can be left, right or all to force text to clear pictures set at the margin.

clear=right

clear=all

clear=none

To prohibit a break use the &nbsp; entity (&#160; or &#xA0) to act as a space but not create a line break.

class="..." - any classname. stylesheets may apply

id="..." - any id unique to the page. Note the id applies to only one <tag>

style="..."

title="..."

The <br/> does allow a style and title. Heres a br ‘
’ with a style and a title. But since <br> is not visible what can it do with them?

<font>... </font>

Sets and changes the browsers font for selected text. Superficially this sounds like a good idea but in practice it is almost always better to use the document structure and stylesheets or the ‘style’ attribute on any other tag rather than the font tag. The <font> tag was standardised in HTML 3.2 and then deprecated in HTML 4.

HTML WYSIWYG editors (Composer, Komposer, Seamonkey, Dreamweaver etc) are usually obsessed with respecifying the font so that as much as half the markup in a file can be reiterations of it.

Attributes

color=value [ red | green | blue | #rrggbb ]

Sets the text color to one of 100+ named colors or to a color specified by the symbol # followed by either 3 or 6 hexadecimal digits giving the red, green and blue brightness.

face=list []

Set the typeface to the first available in the comma separated list

size=value [ 1 ... 7 | or -3 | +3 | ... -1 | -3 | +1 | +3 ]

Set the size to an absolute value (1 to 7) or relative to <basefont> using +n or -n

<basefont>... </basefont>

Sets the normal text within a page. Specific font size values are then relative to this setting.   The <basefont> setting is made in the header. It is almost always better to use the document structure and stylesheets rather than to explicitly set basefont.

Attributes

<basefont size="5">

Attributes

color=value [ red | green | blue | #rrggbb ]

face=list []

size=value

<b>, <i>, <u>, <s>, <big>, <small>, <tt>

The font style elements are covered as a group here because they all do similar tricks and have the same attributes of class, id, style and title.

Font style tags appeared in HTML 2 and more were added in HTML 3.2. Some of them are deprecated in the HTLM 4.01 specification. The phrase elements are prefered. Font style elements like <b> for bold and <i> for italics have proven useful and are not (yet) deprecated in favour of <em>. The current draft of HTML 5 includes <b>, <i> and <small>

<b> ... </b> Format the enclosed text in a bold typeface.

<p>How do <b>you</b> do? </p> - How do you do?

<i> ... </i> Format the enclosed text in italic typeface..

<p>How do <i>you</i> do? </p> - How do you do?

<u> ... </u> Enclosed text formats with an underline. May look like a link. Deprecated

<p>How do <u>you</u> do? </p> - How do you do?

<big> ... </big> Format the enclosed text in a bigger typeface.

<p>How do <big>you</big> do? </p> - How do you do?

<small> ... </small> Format the enclosed text using a smaller typeface.

<p>How do <small>you</small> do? </p> - How do you do?

_... - Format enclosed text as a subscript.

<p>How do _you do? </p> - How do _you do?

^... - Format enclosed text as a superscript.

<p>How do ^you do? </p> - How do ^you do? or more sensibly E=MC²

<strike> ...</strike> - Format the enclosed text struck through with a horizontal line.

<p>How do <strike>you</strike> do? </p> - How do you do?

<tt> ... </tt> - Format text monospaced or "teletype"- usually in Courier.

<p>How do <tt>you</tt> do? </p> - How do you do?

<bdo> Bidirectional Override

<p>How do <bdo>you</bdo> do? </p> - How do you do?

Phrases

Phrase elements convey a meaning. Browsers may attempt to display them differently from unmarked text; and this can be ensured using style sheets. Search engines and indexers can use phrase elements more reliably than font information.

<Hn> ... </Hn> Format the enclosed text as a level n header, n can be 1 to 6 with 1 most important. More important headings will generally be rendered in larger fonts.

<h3>A Small Headline</h3>

A Small Headline

<em> ... </em> - Format with addtional emphasis (often italicised by default)

<p>How do <em>you</em> do? </p> - How do you do?

<strong> ... </strong> - indicates strong emphasis (often bold by default)

<p>How do <strong>you</strong> do? </p> - How do you do?

<cite> ... </cite> - The enclosed text is a citation or reference to other sources (see also "q" and "blockquote").

<p>How do <cite>you</cite> do? </p> - How do you do?

<code> ... </code> - The enclosed text is a code sample. Use pre for segments longer than one line.

<p>How do <code>you</code> do? </p> - How do you do?

<dfn> ... </dfn> - Format the enclosed text as a definition- this is the defining instance of the enclosed term.

<p>How do <dfn>you</dfn> do? </p> - How do you do?

<abbr> ... </abbr> - indicates an abbreviated form ( eg WWW, HTTP, URI, etc)

<p>How do <abbr>you</abbr> do? </p> - How do you do?

<acronym ... </acronym>- indicates an acronym (eg WAC, radar, etc)

<p>How do <acronym>you</acronym> do? </p> - How do you do?

<samp> ... </samp> - designates a sample output from a program or script

<p>How do <samp>you</samp> do? </p> - How do you do?

<kbd> ... </kdb> - indicates text to be entered by the user

<p>How do <kbd>you</kbd> do? </p> - How do you do?

<var>... </var> - indicates an instance of a variable or program argument

<p>How do <tt>you</tt> do? </p> - How do you do?

eg
To copy a file type <samp>cp <var>file1</var><var>file2</var><samp> then press enter.

<pre> ... </pre> - designates a fragment of computercode

See section on <pre> Below.

<blockquote>  ... </blockquote>

Normally gives left and right indentation of enclosed text to make it evident that the material is being quoted. "blockquote" is intented for long quotations, so presentation only differs over several lines.

Attributes

cite="..." - specifies a reference URL for the citation.

The cite attribute is supposed to be a URL

class="..." - any classname. stylesheets may apply.

id="..." - any id unique to the page.

style="..." - for instance style="background:red;" and suchlike.

title="..." - the usual context sensitive help and tooltip possibilities.

minor attributes

lang, dir,

onclick, ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,

onkeypress, onkeydown, onkeyup,

When the two teams finally met Stanley is reported to have said <blockquote> Dr Livingston I presume. </blockquote>

Examples

A blockquote really needs a big bit of text to make the difference in the margins quite noticeable.

<q> ... </q>

The <q> tag is intended for short quotations that don't contain paragraph breaks. The browser should respond by wrapping the text in quote marks.

Attributes

class="..." - any classname. stylesheets may apply.

id="..." - any id unique to the page.

style="..." - for instance style="background:red;" and suchlike.

title="..." - the usual context sensitive help and tooltip possibilities.

cite="..." - specifies a reference URL for the citation.

The cite attribute is supposed to be a URL

A browser should respond to the <q> tag by putting the selected text in quote-marks. Not all browsers are compliant.

It would (of course) be quicker to type the quotation marks than the <q>...</q> tag pair. The same idea can be expressed with the «&laquo; &raquo; » quote marks or “&ldquo; and &rdquo;” duo. The markup value of the HTML tag is higher, for instance we could give the name of the character in a speech by:

And the size and colour of the quotes could be varied.

<pre> ... </pre>

Allows inclusion of pre-formatted text. The browser will attempt to reproduce what it is given, typically using a fixed pitch font such as courier and preserving white-space given in the text.

If the text overflows the screen the browser will not automatically wrap it.

Character codings like &amp; and html are still interpreted. So if the text has natural linebreaks and you add <br/> there will be double line-spaces.

<pre> can contain any inline element except <img> and <object> and the font tags <big>, <small>, <sup> and <sub>.

<pre> ought to make it easy to scrape and paste program code and output samples as they appear on the screen. It isn't that massively helpful if they might overflow a typical browser window.

The <pre> tag is a partial escape from the world of browser-interpreted HTML to that of plain text. There used to be a <PLAINTEXT> tag and <pre> replaces it. Its supposed to replace <xmp> as well.

Attributes

class="..." - any classname, stylesheets may apply.

id="..." - any id unique to the page (or is it unique to the <pre> tag).

style="..." - for instance style="background:red;" and suchlike.

title="..." - the usual context sensitive help and tooltip possibilities.

width="n" - horizontal dimension allowed. Not widely supported and deprecated

Example

<pre style="width:600px; border:1px solid orange;>
Allows inclusion of pre-formatted text. The browser will attempt to reproduce what it is given, typically 
using a fixed pitch font such as courier and preserving white-space given in the text.
If the text overflows the screen the browser will not automatically wrap it.
Character codings like &amp; and html are still interpreted. So if the text has natural linebreaks and you 
add <br/> there will be double line-spaces.
</pre>

Allows inclusion of pre-formatted text. The browser will attempt to reproduce what it is given, typically 
using a fixed pitch font such as courier and preserving white-space given in the text.
If the text overflows the screen the browser will not automatically wrap it.
Character codings like & and html are still interpreted. So if the text has natural linebreaks and you 
add <br/> there will be double line-spaces.

The <pre> tag is covered in section 9.3.4 of the HTML 4.01 Specification.

The <pre> tag can be irritating because if a line length exceeds the screen width the whole document and not just the <pre> block gets a horizontal scroll bar. That keeps on implying to the user that there is something at the right hand side when for the most part there is not.

<address> ... </address>

A block intended to hold any kind of page-author address information. It seems to be mainly intended to help search engines and indexers.

Attributes

class="..." - any classname, stylesheets may apply.

id="..." - any id unique to the page (tag?).

style="..." - for instance style="border:1px solid orange;" and suchlike.

title="..." - the usual context sensitive help and tooltip possibilities.

align=[ left | center | right ] - deprecated in favour of stylesheets.

Examples

The address tag doesn't seem to do much beyond putting a wrapper around text. The "HTML tags" document suggested it might right-justify or otherwise change the format but that is now left for stylesheets to achieve. So <address> is really just a public tag for a specific purpose.

Unfortunately spammers are indexing all the site-names they can find, so highlighting the address in this way may have limited appeal.

<hr/>

break the current text flow and insert a horizontal rule. This is typically used as a section marker, giving the user extra visual cues about their position in the text. Another use is to put horizontal emphases around a text without using a box border.

Since presentational lines can be drawn by stylesheets the <hr> might not be needed but it is used.

Attributes

align="type" [ left | center | right ]

Alignment wont make a difference unless the line is shorter than pagewidth.

color=value [ red | green | blue | #rrggbb ]

"noshade" - Do not use a 3-D shading on the rule

size="pixels" - set the thickness to an integer number of pixels.

The default size seems to be about 3

width="value" - Set the width to an integer number of pixels or percent of pagewidth.

class="..." - any classname, frequently used to distringuish types of line.

id="..." - a unique id (why would you assign an id to line? ).

style="..." - for instance style="width:50% ; color: red" or"border:1px solid orange;" and suchlike.

title="..." - the usual context sensitive help and tooltip possibilities.

Alignment, size and width are all deprecated in HTML 4 in favour of stylesheets.

Examples

<hr style="width:20%; color:lime">
<hr width="40%" color="red">
<hr width="60%" color="yellow" size="4px">
<hr width="80%" color="blue" size="1px">
and
<hr class="subdivision" title="this one has a tooltip demonstrating it works" />

<center> ... </center>

Display the enclosed text centre justified, that is with text an equal distance between the left and right edges of the page.

Center came into widespread use so it got included in HTML 3.2 but then deprecated in HTML 4. If there is some reason to not use style the same job can be done with <div>