Web Publishing Curriculum Resources HTML Language Summary University of Oregon Libraries

Web Publishing Curriculum Resources
HTML Language Summary

Anatomy of an HTML Element

Notes:

  1. HTML is a structural markup language and includes very few presentational elements; presentation is provided through the use of style sheets, which are covered in the Web Publishing II & III workshops. The markup language is regulated by the World Wide Web Consortium (W3C); their web site has extensive information available on the HTML language, including specifications (what's allowed and what isn't) and current recommendations.
  2. The HTML language itself is not case-sensitive; however, XHTML, which is the next standard for markup languages, is case-sensitive, and we recommend that you adopt the XHMTL standard of writing your HTML in lower-case.
  3. HTML elements are generally mnemonic; the markup codes use easily memorized words, acronyms, or abbreviations based on the name.
  4. The three most common errors in HTML documents are:
    • typos: one small typing mistake can render the rest of your document unreadable. Be sure to include all your angle brackets and other punctuation. Note that quotation marks must surround all values.
    • missing pieces: if you don't include the ending or closing piece of the tag, the browser doesn't know when to stop applying it. For years, web browsers were very forgiving, but newer browsers and newer versions of older browsers are becoming much less so, mostly because the newer standards demand it.
    • nesting errors: if you nest one element inside another, you must close the inner element before you close the parent one (the same concept as applied in the Matryoshka – or Russian nesting – dolls). Incorrectly nested elements may produce garbled or otherwise incorrect displays.
      incorrect: <strong><em>this text is strong and emphasized</strong></em>
      correct: <strong><em>this text is strong and emphasized</em></strong>
  5. To ensure perfect HTML markup, use the W3C's HTML Validation Service to look for errors and diagnose problems. Or download and install the HTML Tidy utility to do the same thing offline.

This chart represents only a partial listing of the markup elements that are part of HTML 4.01. For a full listing, see the W3C specification.

Structural Elements (Required)
* Name Markup Description
WPI Document Type Definition (DTD) doctype Tells the browser which version of HTML is being used. The doctype always appears on the first line of an HTML document.
Notes: Because of its length and complexity, we recommend you "copy and paste" the DTD into your document. You'll find the DTD statement listed as part of the HTML specification. For our purposes, we'll use the following DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
WPI HTML <html> </html> Delimits the beginning and end of the entire HTML document
WPI Head <head> </head> Defines the document properties, such as the title and meta-data
WPI Title <title> </title> Defines the web page title and displays it in the browser window's title bar
Notes: Titles are an important element of every web page; they are used by search engines and web "bots" – when you use a search engine you're searching titles and the first few words of a web page. Titles should be as descriptive as possible.
WPI Body <body> </body> Encapsulates the content portion of an HTML document, which can include text, images, tables, etc.
 
Paragraph Formatting and Block Elements
* Name Markup Description
WPI Heading <h#> </h#> Formats page headings; # represents a number from 1 to 6 - h1 is the largest, h6 the smallest
WPI Paragraph <p> </p> Defines a paragraph
WPI Unordered List <ul> </ul> Starts/ends a bulleted, or unordered, list; used in concert with the list item (<li>...</li>) element
WPI List Item <li> </li> Defines each item within a list; used in concert with the unordered or ordered list elements
WPI Break <br /> Creates a line break; generally used to break short lines of text
WPI Horizontal Rule <hr /> Places a horizontal line, or "rule," across the page
WPII Address <address> </address> Encapsulates the signature, or "address" portion of a web page, which typically includes the author's name, email address, and the date the page was last modified
WPII Block Quotation <blockquote> </blockquote> Creates a block of indented text, as in a block quotation; not intended as a means to indent text in other situations
WPII Ordered List <ol> </ol> Starts/ends a numbered, or ordered, list; used in concert with the list item (<li>...</li>) element
WPIII Division <div> </div> Creates a block of text without adding specific formatting; most useful with style sheets
 
Other Important Elements
* Name Markup Description
WPI Anchor <a href="..."> </a> Creates a hyperlink on a web page. Anchors have a required attribute, href (or hypereference), that points to the source of the hyperlinked document.
Examples:
<a href="wp1/">Web Publishing I Outline</a>
<a href="http://www.uoregon.edu/">University of Oregon</a>
<a href="mailto:webmaster@somewhere.com">Contact the Webmaster</a>
<a href="uoseal.gif">University of Oregon Seal</a>
<a href="outline.html#handout">Handout for this workshop</a>
WPI Image <img src="..." alt="..." /> Inserts an image in a web page. There are two required attributes: 1) source (src) provides the name and location of the image file; and 2) alternate text (alt) provides a textual description of the image, which aids accessibility.
Examples:
<img src="uoseal.gif" alt="Seal of the university" />
<img src="http://www.uoregon.edu/images/library.jpg" alt="Photograph of Knight Library, North Face (entrance)" />
WPI Emphasized Text <em> </em> Emphasizes text, generally through the use of italics
WPI Strong Text <strong> </strong> Makes text stand out, generally by making it bolder (stronger)
WPII Named Anchor <a name="..."> </a> Creates a named spot within a web page that you can jump to using a URL like http://library.uoregon.edu/it/index.html#handout.
Examples:
<a name="handout"></a>
<a name="references"><h2>References</h2></a>
WPII Style <style type="text/css"> </style> Creates an embedded style sheet in an HTML document. The style sheet is placed in the Head of the document. The style element has a required Type attribute that tells the web browser which kind of style sheet is being used.
Notes: The format of the Type value is determined by the MIME type standards. Style sheet rules are usually enclosed within an HTML comment (<!-- ... -->) to hide them from browsers that don't understand this element; otherwise they will be treated as part of the page content and displayed on the screen. See Cascading Style Sheet Summary for more information.
WPIII Table <table> </table> Defines a table. Tables are used to format tabular data, but are often also used for layout purposes, especially those that cascading style sheets don't make possible. Used in conjunction with the table row and table data elements.
WPIII Table Row <tr> </tr> Defines a table row. Tables are read row by row, from top to bottom, then across from left to right by cell (see the table data and table heading elements).
WPIII Table Data <td> </td> Within a table row, defines a single cell (data element). The colspan and rowspan attributes are used to combine or merge columns and rows.
WPIII Table Heading <th> </th> Like the table data element, defines the individual cells within a table row, but this element is used to define headings for each column.
WPIII Link <link [+attributes] /> Links the current HTML document to an outside document. Its most common use is to link a style sheet, e.g.:
<link rel="stylesheet" type="text/css" href="mystyles.css" />
WPIII Metadata <meta [+attributes] /> Defines properties of your HTML page (always in the head of your document). Meta elements have two attributes: http-equiv and content.
Common uses include defining a description and keywords for search engines, and defining the character encoding, which tells the browser which character set to use (e.g., western, Japanese, Cyrillic, etc.). A typical example:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

* The workshop in which the element is first introduced.

1501 Kincaid Street, Eugene, OR 97403-1299 | T: (541) 346-3053 | F: (541) 346-3485