Elements, Tags and Attributes

HTML uses elements, tags and attributes to specify how the content of a web page should be displayed in a browser. We'll use the following snippet of HTML to illustrate each of these.

<body>
  <h1>This is a Heading</h1>
  <p>And this is a paragraph.</p>
  <img src="image.jpg" alt="Alternate text to be used if the 
image can't be displayed.">
</body>

Elements

An element is a structure, such as a paragraph or an image:

  • Elements always begin with an opening tag.
  • If an element contains content after the opening tag (such as text in the case of the paragraph element above), it will also have a corresponding closing tag. If an element contains only attributes but no content following the opening tag (as in the image element above), it will not have a closing tag.
  • Elements can have attributes which specify additional properties for the element.
  • Elements can be nested, so that one contains another. In the simple example above, the body element contains the others, but much more complex nesting is possible.

The elements in the example above are the body, level 1 heading, paragraph and image.

Tags

Tags are used to mark the beginning and often also the end of elements:

  • Tags are enclosed by the "<" and ">" characters.
  • If an element has a closing tag, it's the same as the opening tag with a leading "/" inserted just after the "<".

The tags in the example above are <body>, </body>, <h1>, </h1>, <p>, </p> and <img>.

Attributes

Attributes specify additional properties for elements:

  • Attributes are specified in the opening tag.
  • The format of an attribute specification is attribute_name="attribute_value".

The attributes in the example above are src and alt, which provide additional information for the image element.

<-- Previous Page

HTML Structure

Next Page -->

Intro to CSS