HTML Quick Reference: Tags, Attributes, and Examples

Posted on Dec 21, 2024 in Computers

HTML Quick Reference

Simple Rules of HTML

Element names and attribute names are not case-sensitive; attribute values are.
Documents start with a <!doctype...> statement, followed by a header and a text body, all enclosed in <html>…</html>.
The header is enclosed in <head>…</head>.
The text body is enclosed in <body>…</body>.
Comments are written as .

Elements marked here with a pilcrow (¶) are in HTML3 (additions to or changes from HTML 2.0, RFC 1866) and may not yet be supported by all browsers. Elements marked with an asterisk (*) are obsolescent or deprecated. Optional attributes are given in [square brackets]. The full Document Type Descriptions (DTDs) of HTML 2.0 and HTML3 can be found at http://www.w3.org/MarkUp/.

All structural elements can have class (for styles), lang, id, clear (for positioning), and background attributes. Heading and list-oriented elements can have seqnum, dingbat, src, and nowrap. The align attribute can be used to affect visual positioning (e.g., align="center").

Sample Document

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
<html>
<head>
<title>Document title</title>
<link rev="made" href="mailto:info@itpuk.co.uk" rel="publisher" title="Publisher">
</head>
<body>
<h1>Top-level heading</h1>
<p>First paragraph of text.</p>
<ul>
<li><p>First list item</p></li>
<li><p>Second list item, with a hypertext <a href="info.html">link</a> to another file.</p></li>
</ul>
<h2>Second-level heading</h2>
<p>Another paragraph, <img alt="Picture of me" align="bottom" src="mypic.gif"> with an illustration.</p>
</body>
</html>

Header Elements

<title>…</title>: Compulsory document title (not part of the text), recommended maximum length 64 characters.
<link ...>: Relationships for the document as a whole; common attributes are rel, rev, href.
<base href="url">: Default structure for any partial (incomplete) URLs in the document.
<isindex>: Identifies the document as a script that handles processing (e.g., searches).
<meta ...>: Embed meta-information as if given by the server; attributes http-equiv, name, content.
¶ <range from="id" until="id">: Specifies a portion of the document needing special treatment; from and until are identified using <spot>.
¶ <style notation="CSS" href="url">: Identifies the notation used in an associated style sheet or in style attributes in the text.

Section Headings

<hn>…</hn>: Section headings, six levels available: <h1> to <h6>. May occur only between paragraphs, not within them.
¶ <div class="...">: Encloses a whole identifiable division (section, subsection, etc.) along with its heading.

Block-Oriented Elements

<p>…</p>: Paragraphs of regular text.
<address>…</address>: Address information blocks.
<blockquote>…</blockquote> (and ¶ <bq>): Block quotations (must contain paragraphs or other structural markup).
¶ <banner>…</banner>: Encloses static information to remain on display.
¶ <note role="...">…</note>: Identifies footnotes, sidenotes, etc.
<pre>…</pre>: Preformatted text (fixed-width characters; may also contain in-line markup).
<hr>: Horizontal rule.
Lists, <form> and <table>: See below.
¶ <fig src="url">: Encloses floating figures, giving an image reference, with optional <caption> and <credit>.
¶ <math>: Still under development.

Lists

¶ <lh>…</lh>: List header.
<ol>…</ol>: Ordered lists, items numbered consecutively.
<ul>…</ul>: Unordered lists, items bulleted.
<li>…</li>: List items within ordered and unordered lists (must contain paragraphs or other structural markup).
<dl>…</dl>: Definition lists.
<dt>…</dt>: Definition term in a definition list.
<dd>…</dd>: Definition discussion in a definition list (must contain paragraphs or other structural markup).

All lists may be nested. The <ol>, <ul>, and <dl> elements may have a compact attribute.

Inline Elements

Logical Markup

¶ <abbrev>…</abbrev>: Identifies an abbreviation.
¶ <acronym>…</acronym>: Identifies an acronym.
¶ <au>…</au>: Authors’ names.
<cite>…</cite>: Citations, such as literary references or product names.
<code>…</code>: Fragments of computer code.
¶ <del>…</del>: Marks text as having been deleted but kept for reference purposes.
¶ <dfn>…</dfn>: A defining instance (usually indexable).
<em>…</em>: Emphasis, often rendered in italics.
¶ <ins>…</ins>: Marks new text inserted.
<kbd>…</kbd>: Specific keyboard input.
¶ <lang>…</lang>: Identifies a language other than the basic one of the document.
¶ <person>…</person>: Personal names.
¶ <q>…</q>: Encloses quoted speech (browsers should add quotes automatically, according to the language in use).
<samp>…</samp>: Samples of literal characters (such as user input).
¶ <s>…</s>: Strikeout (such as in legal work) replaces <strike>.
¶ <spot id="label">: Marks a reference point for <range>.
<strong>…</strong>: Strong emphasis, usually rendered in bold.
¶ <sub align="...">…</sub>: Subscripts.
¶ <sup align="...">…</sup>: Superscripts.
<var>…</var>: Computer or other variable names.

Visual Markup

<b>…</b>: Bold type.
¶ <big>…</big>: Designates bigger text.
<br>: Forced
linebreak.
<i>…</i>: Italic type.
¶ <small>…</small>: Designates smaller text.
¶ <tabstop id="label">: Sets tab stop at the current location.
¶ <tab to="label">: Tabs to the labeled position.
<tt>…</tt>: Typewriter type.
<u>…</u> *: Underlined.

Hypertext Links

May occur anywhere inline markup is valid.

<a href="url">…</a>: Link to another document or resource.
<a href="url#label">…</a>: Link to a specific destination in another document.
<a href="#label">…</a>: Link to a specific destination in the same document.
¶ <a id="label">…</a>: Labels the surrounded text as a target (destination). The use of name may continue to be honored.

An <a> element may contain both href and name attributes.

Uniform Resource Locators (URLs)

These specify the location of a resource for a hypertext link:

`http:`	`//`	`www.thomson.com`:80`/`	`catalog/`	`order.html`	`?`searchterm`#`location
one of… `http: gopher: ftp: telnet: mailto: news:`		Internet server hostname or IP address with optional port. Email address. Newsgroup name.	Path (directory or folder names).	Filename and filetype.	Options: `?` (searching) means the URL must be a script; using a `#` location implies the target label exists (see `<a>`).
Note `mailto:` and `news:` have no double slash.

Images

External images (those requiring a page to themselves) are specified with the <a> element as hypertext links. Inline images are specified with <img src="url" [align="..."] [alt="..."] [ismap|usemap]>…</img>. The value of align can be top, middle or bottom. The alt attribute provides text for non-graphical users and is strongly recommended.

A server-side image map is an <img> with ismap inside an <a> element pointing to a server map file:

     <a href="http://www.foo.bar/cgi-bin/imagemap/mypic">
     <img src="http://www.foo.bar/mypic.gif" alt="Image map" ismap>
     </a>

¶ Client-side image maps are done with a similar construction but using usemap instead, and providing the coordinates of hotspots with the <map> element:

     <img src="http://www.foo.bar/mypic.gif" alt="Image map" usemap="#mine">
     <map name="mine">
       <area name="circle" coords="20,30,..." href="url"<
     </map>

¶ Area names rect and polygon are also valid. The length of the coords value is limited to 1024 characters.

Forms

<form method="..." action="url">…</form>

The URL must reference a script unless it uses mailto:. The method is GET (for queries) or POST (for data collection). Within a form, input fields are defined with:

for multiline text input (surrounds prompting text):
<textarea name="..." rows="n" cols="n">…</textarea>
for single-line input: <input name="..." type="..." [...]>
The type can be one of text, checkbox, radio, hidden, password, reset, ¶ file, scribble, audio, or submit. Other attributes are align, checked, size, maxlength, src, and value. All <input> fields of a radio or checkbox group must have the same name.
for menus: <select name="..." [multiple]>…</select>
Options are given with <option [value="..."]>…[</option>] within the <select>…</select>. Individual options can have an attribute of selected or disabled.

If no value is given, the element content is used.

Example Form

 <hr>
 <form method="GET" action="http://www.ucc.ie/cgi-bin/uncgi/formtest">
     <p>Name: <input name="name" type="text" 0><br>
        Operating system: <select name="opsys">
       <option>Unix<option>VMS<option>Mac<option>DOS<option></select></p>
     <p><textarea name="comments" rows="4" columns="40">
        Please write your comments here...</textarea></p>
     <p><input type="submit"> <input type="reset"></p>
   </form>
 <hr>

Name:
Operating system: UnixVMSMacDOS

Please write your comments here…

Tables

<table [frame="..."] [border]>…</table>: Defines a table.
<caption>…</caption>: Supplies a caption.
<thead>, <tbody> (compulsory), and <tfoot>: Enclose table header, body, and foot.
<tr>…</tr>: Encloses a table row.
<th>…</th>: Encloses a column or row header inside a row.
<td [colspan=x] [rowspan=x]>…</td>: Encloses table data (a cell value or structural markup; be careful of mixed content).

<table frame="border">
 <caption>Table 1. Survey Frame</caption>
 <tbody>
  <tr><th>Item</th><th>Quantity</th></tr>
   <tr><td align="left">Population</td><td align="right">384,000</td></tr>
   <tr><td align="left">Sample</td><td align="right">384</td></tr>
 </tbody>
</table>

Table 1: Survey Frame
Item	Quantity
Population	384,000
Sample	384

Special Characters

< (< less-than symbol)
> (> greater-than symbol)
& (& ampersand)
¶ " (” unidirectional typewriter-style "double quote")
¶   (non-breaking space)
¶  (soft hyphen)

ISO Latin-1 Characters

À À  capital A, grave accent      ï    ï  small i, dieresis/umlaut
à à  small a, grave accent        Ð     Ð  capital Eth, Icelandic
Á Á  capital A, acute accent      ð     ð  small eth, Icelandic
á á  small a, acute accent        Ñ  Ñ  capital N, tilde
Â  Â  capital A, circumflex        ñ  ñ  small n, tilde
â  â  small a, circumflex          Ò  Ò  capital O, grave accent
Ã Ã  capital A, tilde             ò  ò  small o, grave accent
ã ã  small a, tilde               Ó  Ó  capital O, acute accent
Ä   Ä  capital A, dieresis/umlaut   ó  ó  small o, acute accent
ä   ä  small a, dieresis/umlaut     Ô   Ô  capital O, circumflex
Å  Å  capital A, ring              ô   ô  small o, circumflex
å  å  small a, ring                Õ  Õ  capital O, tilde
Æ  Æ  capital AE ligature          õ  õ  small o, tilde
æ  æ  small ae ligature            Ö    Ö  capital O, dieresis/umlaut
Ç Ç  capital C, cedilla           ö    ö  small o, dieresis/umlaut
ç ç  small c, cedilla             Ø  Ø  capital O, slash
È È  capital E, grave accent      ø  ø  small o, slash
è è  small e, grave accent        Ù  Ù  capital U, grave accent
É É  capital E, acute accent      ù  ù  small u, grave accent
é é  small e, acute accent        Ú  Ú  capital U, acute accent
Ê  Ê  capital E, circumflex        ú  ú  small u, acute accent
ê  ê  small e, circumflex          Û   Û  capital U, circumflex
Ë   Ë  capital E, dieresis/umlaut   û   û  small u, circumflex
ë   ë  small e, dieresis/umlaut     Ü    Ü  capital U, dieresis/umlaut
Ì Ì  capital I, grave accent      ü    ü  small u, dieresis/umlaut
ì ì  small i, grave accent        Ý  Ý  capital Y, acute accent
Í Í  capital I, acute accent      ý  ý  small y, acute accent
í í  small i, acute accent        Þ   Þ  capital Thorn, Icelandic
Î  Î  capital I, circumflex        þ   þ  small thorn, Icelandic
î  î  small i, circumflex          ß   ß  small sharp s, German sz
Ï   Ï  capital I, dieresis/umlaut   ÿ    ÿ  small y, dieresis/umlaut

¶ Mathematics

<math [model="..."]>…</math>: Encloses a formula.
<box>…</box>: Surrounds symbols to be treated as a whole, optional delim attribute.
<over> and <atop>: Separate lined and unlined fractions.
<above>…</above>: Identifies the numerator.
<below>…</below>: Identifies the denominator.
<root root="n">: Root, degree specified as n.
<array>…</array>: LaTeX-like arrays.
<arow>…</arow>: Row within an array.
<item>…</item>: Item within a row in an array.

To minimize typing, <sub> and <sup> tags can be replaced with the underscore (_) and caret (^) respectively, and <box> tags can be replaced with {curly braces}, e.g., E=mc^2^.

¶ Additional Characters from ISO 8859-1

&#160; &nbsp;   non-breaking space        &#177; &plusmn; ± plus-or-minus sign
&#161; &iexcl; ¡ inverted exclamation mark   &#178; &sup2;   ² superscript two
&#162; &cent;  ¢ cent sign                   &#179; &sup3;   ³ superscript three
&#163; &pound; £ pound sign                  &#180; &acute;  ´ acute accent
&#164; &curren; ¤ general currency sign      &#181; &micro;  µ micro sign
&#165; &yen;   ¥ yen sign                    &#182; &para;   ¶ pilcrow (paragraph sign)
&#166; &brvbar; ¦ broken (vertical) bar      &#183; &middot; · middle dot
&#167; &sect;  § section sign                &#184; &cedil;  ¸ cedilla
&#168; &uml;   ¨ umlaut/dieresis             &#185; &sup1;   ¹ superscript one
&#169; &copy;  © copyright sign              &#186; &ordm;   º ordinal indicator, male
&#170; &ordf;  ª ordinal indicator, fem      &#187; &raquo;  » angle quotation mark, right
&#171; &laquo; « angle quotation mark, left  &#188; &frac14; ¼ fraction one-quarter
&#172; &not;   ¬ not sign                    &#189; &frac12; ½ fraction one-half
&#173; &shy;    soft hyphen                 &#190; &frac34; ¾ fraction three-quarters
&#174; &reg;   ® registered sign             &#191; &iquest; ¿ inverted question mark
&#175; &macr;  ¯ macron                      &#215; &times;  × multiply sign
&#176; &deg;   ° degree sign                 &#247; &div;    ÷ division sign

HTML Quick Reference: Tags, Attributes, and Examples