Anatomy of an HTML Element

Example 1: <li class="current">Contact Us</li>

  1. <li class="current"> is the opening tag, which defines the start of an element.
  2. </li> is the closing tag, which defines the end of an element.
  3. class is an attribute, which is a classification setting for an element. Some elements have multiple attributes. Some elements have no attributes.
  4. 'current' is an attribute value, used to specify what the attribute should be set to.
  5. Contact Us is content.
  6. <li class = "current">Contact Us</li> (the whole thing) is an element.

Example 2: <h3>Asparagus</h3>

  1. <h3> is the opening tag, which defines the start of an element.
  2. </h3> is the closing tag, which defines the end of an element.
  3. this element has no attribute or attribute value
  4. Asparagus is content.
  5. <h3>Asparagus</h3> (the whole thing) is an element.

Example 3: <img src='images/cactus_couch.jpg' alt='Ouch Couch—Couch made of cactus' />

  1. <img is the opening portion of the tag, which defines the start of an element.
  2. /> is the closing portion of the tag, which defines the end of a self-closing element.
  3. this element has two attributes
    • src defines the source attribute; 'images/cactus_couch.jpg' is the source attribute value for the path to the image file.
    • alt defines alternate text attribute; 'Ouch Couch—Couch made of cactus' is the alternate text so blind users and search engines can 'see' the image.
  4. Asparagus is content.
  5. <h3>Asparagus</h3> (the whole thing) is an element.

Rules

  1. tag names and attributes must be lowercase
  2. elements must close
  3. attribute values must be in quotes (either single or double)
  4. elements must be nested properly