Home > Resources > Web Development > Web Tips > Hypertext Markup Language (HTML)

HTML

Hypertext Markup Language (HTML)

What is HTML?

HTML is a coding language used for creating hyperlinked documents that can be displayed in Web browsers.

HTML Links

A Quick Guide to HTML

Web authors familiar with WYSIWYG authoring tools like FrontPage or Dreamweaver can benefit from knowing more about the code these tools generate. This guide introduces most of the elements and attributes you should need, along with CSS, for creating standards-compliant HTML code for CSU Libraries Web pages.

Elements

  • An element consists of an opening and closing tag and maybe some content. <p>This is a paragraph</p>
  • An opening tag is surrounded by angle brackets. <p>
  • A closing tag has a forward slash before the element name. </p>
  • Empty tags that do not have a closing tag use a space and forward slash at the end instead. <br />
  • Opening tags can have attributes to define them further, such as the id attribute in <p id="intro">

Document Structure

  • DOCTYPE is a declaration at the beginning of every XHTML document.
  • html should enclose the rest of the document.
  • head should be the first element inside the html element.
  • body should also be inside the html element, following the head.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Document Title</title>
</head>
<body>
  Document Contents
</body>
</html>

Elements in the Document Head

  • title is required in every document. It should begin with CSU Libraries: and include the subsite name and page title.
    • <title>CSU Libraries: Research and Development Services: HTML</title>
  • meta is used to include information about the document. It has several possible attributes. Generally the name (or http-equiv) and content attributes are set.
    • author is used to associate the name of a CSU Libraries web author to the page. If the page contains any broken links, an e-mail will be sent to this author on the first and 15th day of every month.
      • <meta name="author" content="Your Name">
    • description is used to create a document description that is displayed in search engine results.
      • <meta name="description" content="Description of this page">
    • keywords are used to tell search engines which search keywords are important. It is now ignored by many search engines.
      • <meta name="keywords" content="keyword1, keyword2, ...">
    • The following refresh tag will redirect the browser to the CSU Libraries home page after 5 seconds. This is useful for some pages that have moved, though using an .htaccess file is usually a better way to redirect a document.
      • <meta http-equiv="refresh" content="5;url=http://lib.colostate.edu/">
  • link is used to include an external stylesheet.
    • <link rel="stylesheet" type="text/css" href="styles.css" />
  • style is used to include an internal stylesheet.
    • <style type="text/css">body { background-color: white; }</style>
  • script is used to include JavaScript or other code.
    • <script language="javascript" type="text/javascript" src="script.js"></script>

Headings

  • h1 is for the most important heading in a document. In general, only use one h1 tag for the heading at the beginning that describes the document. This heading should be the same as or similar to the document title.
  • h2 is for second-level headings. h3 is for third-level headings, and so on.

Paragraphs

  • p defines a paragraph.
  • Use paragraphs and styles instead of br for line breaks.

Comments

  • A comment is defined by an opening <!-- and a closing -->. It is not displayed by the browser and is used for explaining the code or temporarily removing code from being displayed in the browser.

Document Sections

  • div is a block that can hold other elements and be formatted using a stylesheet. Think of it as a rectangular box, much like a table with one cell.
  • span is an inline element (section of text within a block element such as a paragraph or heading) that can be formatted using a stylesheet.
  • div and span generally have a class and/or id attribute that stylesheets use to format them.

Lists

  • ul is for an unordered (bulleted list). ol is for an ordered (numbered) list. li is for a list item within the list.
  • dl is for a definition list. dt is a definition term. dd is the term's definition.

Tables

  • table defines a table and contains the following elements.
    • caption is a caption that describes the table contents.
    • tr is a table row. A table can have multiple rows.
      • td is a table cell within a table row. th is similar but is used as a heading for a row or column.
    • thead, tbody, and tfoot are sometimes used to specify parts of a section.
    • colgroup is sometimes used for accessibility to specify that a cell is part of a column group.
  • Use a summary attribute to summarize the table content for accessibility.
  • Use div elements and stylesheets instead of tables to create more accessible page layout.

Links

  • a with an href attribute defines a hyperlink.
    • <a href="http://lib.colostate.edu/">Home</a>
  • a with a name and id attribute defines an anchor (link target within a page).
    • <a name="contents" id="contents">Table of Contents</a>
      <a href="#contents">Back to Table of Contents</a>
  • To produce a tool tip in most browsers, links containing images should have a title attribute that is the same as the alt attribute of the image.
    • <a href="index.html" title="Home"><img src="logo.gif" width="100" height="60" alt="Home" /></a>

Images

  • img defines an image. All images should have src, width, height and alt attributes.
    • <img src="logo.gif" width="100" height="60" alt="My Logo" />

Formatting

  • strong gives boldface text. em gives italicised text.
  • Use strong and em instead of b and i. Avoid using u because underline is confused with links.
  • Use headings or styles instead of the font tag for defining font size, color and style.
  • Use styles and borders instead of br and hr for line spacing and horizontal lines.
  • Use styles instead of color, bgcolor and border attributes.
  • Use styles instead of width and height attributes (except for image width and height).

Forms

  • form defines an online form for user input and contains the following elements. The action attribute determines where the form is sent.
  • input is a control for user input. It has one of the following type attributes:
    • type="checkbox" (the user can select multiple options)
    • type="radio" (the user can select only one)
    • type="text" (a single-line text box)
    • type="hidden" (a variable for use in scripts such as FormHandler)
  • select is a list of menu items.
    • If the size attribute is greater than 1, more than one item will be shown in a scrollable list. Otherwise, the list will be displayed as a pull-down menu.
    • If the multiple attribute is set, the user can select more than one list item.
  • textarea is a multiple-line box for the user to input text.
  • label indicates that the text goes with an input, select or textarea control.