HTML Basics
Stanford University Libraries & Academic Information Resources

Tags

The components of an HTML document (head, body, headings, paragraphs, etc.) are identified by surrounding the text (or other component elements) with a start-tag and end-tag. For an element called hubcap The start-tag looks like this: <hubcap> and the end-tag like this: </hubcap>. Any text or other content that is part of the hubcap element appears between the start- and end-tags, thus:

    <hubcap>
        <marking>
            Acme Hubcap Company
        </marking
        <dentdescription>
            Really, really bad
        </dentdescription>
    </hubcap>

End-tag ommission

For some elements, HTML permits you to omit the end-tag, because the browser (or the SGML validating parser) can infer it from the context. This is meant to save a little work for the author, and perhaps to keep the marked-up document from becoming unreadable.

Of the elements used in SUL/AIR, the only elements for which the end-tags may be omitted are

• p Paragraphs
• dt Definition term in a definition list
• dd Definition text of a term in a definition list
• li List Item
• option (used in forms)

SUL/AIR authors are urged to use end-tags even for these elements (especially for paragraphs) because (a) the practice makes some machine operations easier and (b) it helps disambiguate the structure of the document. In some cases HTML's syntax rules don't mesh very well with author's sense of text structure and consistent use of end-tags can help clarify the matter. For examples, see the discussions of paragraphs and block quotes

Attributes

Some elements have associated with them one or more "attributes", additional pieces of data that tell the browsing software something it needs to know in order to make use of the element. Attributes are contained within the start-tag of the element (and are not repeated in the end-tag). Some attributes are required for a particular element, and others are optional.

For example, the Inline image element <img> has several attributes some optional, and one required. Let's look at one optional (but very valuable) attribute: alt and one required attribute src.

The required attribute src tells the browser which image file to retrieve and and insert into the output. The optional alt attribute provides the browser with some text to display if it is used in a non-graphical environment (so that, say, a user on a character-only terminal will see something that explains what s/he isn't getting to see). Attributes are included inside the start-tag like this:

    <img src="earth.gif" alt="picture of planet earth">

The key points to remember about attributes are:

• Attribute names are case-insensitive but the values are case sensitive.
• Attributes may occur in any order inside the start-tag.
• There may be whitespace around the equal sign if you like.
• The attribute values should be enclosed between double or single quotes. If you start the value with a single (or double) quote, you must end it with a matching single (or double) quote. You may not use inverted quotes or so-called smart quotes, so if you are preparing your document with a word processor, remember to check this.
• It is possible for the designer of a markup language to declare some attributes as having a default value. When this is done, it is possible to leave out the value altogether and the default value is used. In HTML, of the elements in use in SUL/AIR, the only attribute for which this obtains is compact which is used with each of the various types of list (unordered, ordered, definition, menu, dir). Hence the following usage:

  <ul compact>
  

  which is equivalent to this (which is rarely seen in practice):

      <ul compact="COMPACT">
  

The following variants are all legal and identical

    <img src="blubber.gif" alt=" [Blobs of blubber] ">
    <img alt=" [Blobs of blubber] " src="blubber.gif" >
    <img SRC  =  "blubber.gif" aLt= ' [Blobs of blubber] '>

EMPTY elements

In the HTML Document Type Definition, a very few elements are declared as EMPTY. This means two things:

1. They do not contain any text. They are used simply as markers (and in some cases are used for whatever is contained in their attributes.
2. EMPTY attributes are not permitted to have an end-tag. Thus <img src="blahblah.gif"></img> is illegal.

Of the elements used in SUL/AIR, the only EMPTY elements are

• hr Horizonal rule
• br Line break
• img Inline image
• input Input

<Hr> and <br> are used simply as markers and cause a horizontal rule or line break to be inserted in the output. <img> and <input> (which is only used in forms), are used for the attributes they carry. For example, <img src="globedfruit.gif"> tells the browser to insert the file "globedfruit.gif" into the output.

There are several other EMPTY elements (<link>, <isindex>, <base>, <meta>, <nextid>), but these are not normally used in SUL/AIR documents

Do not confuse an EMPTY element with an element that just happens to have nothing in it at the moment.

<br> is an EMPTY element; it is not permitted to have any content. But <p></p> is a paragraph that just happens not to have any words in it (the browser would insert an empty line into the output.