<html>
<head><title>Page title</title>
<!-- header tags & metatags -->
<style> /* style defs */ </style>
</head>
<body>
<!-- Content & HTML content tags -->
</body>
</html>
| <!DOCTYPE > | Metatag that defines the language and parsing formality. (Not a container) |
| <html> </html> | Beginning and end of HTML document. Contains only <head> and <body> |
| <head> </head> | Contains the HTML header (NOT content!) |
| <meta> | Header tag to describe document for search engines, etc. (Generally not containers.) |
| <title> </title> | Header tag; Provides a title for the browser window |
| <style> </style> | Contains style definitions - should be in the header |
| <body> </body> | Contains the content of the HTML document. |
| <script> </script> | Contains scripts (typically JavaScript) - ideally in the header |
| <h1> </h1>;<h2> </h2>; etc. | Heading sizes. 1 is largest; 6 the smallest. 1, 2, and 3 are most common. |
| <p> </p> | Paragraph. Typically provides blank line before and after the text. |
| <br /> <br clear=[margin] /> |
Line Break; forms a new line with no blank line. Not a container. [Margin] is (left, right, all). |
| <hr /> | Horizontal Rule (inserts a line across the page). Not a container. Attributes include width, size, color, and align. (Style sheets are preferred for all). |
| <pre> </pre> | Preformatted Text- Preserves spaces, tabs, and carriage returns, but does process tags. |
| <center> </center> | (Use <div> with styles instead) |
| <div> </div> | "Division" - Generic Container tag for applying styles and identifying text blocks |
| <b></b> <strong></strong> | Bold. Note that <b> represents presentation; <strong>represents structure. |
| <emphasis></emphasis> | Typically bold; may italicize |
| <i> </i> | Italics. Use {font-style:italic} instead. |
| <u> </u> | Underline. Gets confused with hyperlinks. When really needed, use {text-decoration:underline} instead. |
| <code></code> | Contains "code" - HTML code, program code, etc. Displayed in a monospace font. |
| <font></font> | Font size, face, and color changes (Use <span> instead) |
| <big></big><small> </small> | Relative font size changes |
| <span> </span> | Generic tag for applying styles |
| <a href =[url]> text</a> | Hyperlink to document defined by [url] |
| <a href =[path/filename]>text </a> | Relative hyperlink; path is relative to the current document |
| <a href =[/path/filename]>text </a> | Root-relative (or absolute) hyperlink; path is from the root of the current web server) |
| <a name =[anchor]> text </a> | Define a hyperlink destination point (an "anchor") within a document |
| <a href =#[anchor]> text </a> | Hyperlink to a specific location (anchor or block element ID)in current document |
| <a href =[url]#[anchor]> </a> | Hyperlink to specific location in remote document |
| <a href =[url]><img src=[url]> </a> | Graphical Hyperlink |
| <ul> <li></li> </ul> | Unordered List- bullet points are placed next to each list item (<LI>) |
| <ol> <li></li> </ol> | Ordered List- numbers next to each list item |
| list-style-type:[styletype] | For <ul>: [disk | circle | diamond |etc.] - The web browser will
select different symbols at different indentation levels. For <ol>: [ decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | etc.] |
| list-style-image:url([url]) | Use image in place of shape for <ul> |
| list-style-position:[position] | outside or inside. Beware of browser differences. |
| <dl> <dt> <dd> </dl> | Definition List- definitions (<dd>) are placed under defined terms(<dt>) |
| Unordered List | Ordered List | Definition List |
|---|---|---|
<ul>
<li>Bulletted list item
<li>Bulletted list item
<li>Bulletted list item
</ul> |
<ol>
<li>Item #1
<li>Item #2
<li>Item #3
</ol> |
<dl>
<dt>Term
<dd>Definition
<dd>Definition
</dl> |
| <img src =[url]> | Image Source- Inline picture. |
| align=[direction] | Defines how text floats around the image. Use style sheet float attribute. |
| height=[distance] width=[distance] | Display size of image. May be different from the actual size. Can distort the image if the dimensions don't match. Style sheet height and width attributes do not apply. |
| border=[length] | Width of border. Border will use link colors if image is a link. |
| hspace=[space] vspace=[space] | Space outside of border. (Use padding CSS attribute instead.) |
| <img src =[url] ismap usemap=#[anchor]> | Clickable Image. Refers to an imagemap. |
| <map name=[anchor]> </map> | The Image Map, which defines hot (i.e. linked) areas. |
| <area shape=[shape] coords="[coords]" href="[url]" /> | One hot area of within an Image Map. (Not a container.) |
Image Map Example - Showing the mapping for 3 active areas of the map at www.clevelandclinic.org/maps/campus.htm