Elements, Tags and Attributes

Posted: September 1st, 2009 | No Comments »

Learning how to code in HTML can be difficult, especially when some sites take for granted that not everyone will know some of the terminology.

Here is an explanation of the difference between elements, tags and attributes in hopes that it will make some online tutorials a lot easier to understand.

Elements

An element consists of the opening tag, the content and the closing of the tag. Example:

<p>
The opening of the tag, this text and the closing of the tag are known
as an element.
</p>

Tags

The tag marks the opening and closing of an element, basically what the tag does is apply some meaning to the code that you are typing, by letting it know what the element is wanting to do, for example display a paragraph <p> or an image <img> .

Example tags:

  • <body>
  • </body>
  • <p>
  • </p>
  • <img>

Attributes

Think of an attribute as something that provide additional information to the element. The attributes for an element will appear within the opening tag to it define that elements properties.

An attribute consists of two parts, first what the attribute is, and second it’s value, which will always be with quotation marks, like this attribute=”value”

Example of Attributes in use:

<img  src="image.jpg" alt="An example attribute" class="attribute" />

<img> is a tag, so the attributes within this element are:

  • src – which defines the images location
  • alt – alternative descriptive text
  • class – defines the style of the element

Have Your Say

Your email is never shared. Required fields are marked *
To add code to a comment use this [code] your code here [/code]