Elements and Attributes in HTML

Elements and attributes are often times used together. It’s important to know what each are before getting yourself familiar with HTML.

What’s an Element?

An element in HTML consists of a start (opening) tag, and an end (closing) tag. Between these tags are content / information which also make up the element.

An example of an element would be:

<p> I’m learning web development from New2HTML and it’s great ! </p>

The <p> and </p> are  “tags”. Placing the text (content) between these tags creates an element.

It’s just a fancy term to describe the combination of the tags and the content. Every web page out there contains elements.

In fact, all of the following are elements.

What are Attributes ?

Attributes are tiny bits of information that can be added to an element to give it more meaning. They are added within the start tag.

Attributes are pretty important. In fact, some elements need this extra bit of information in order to properly function.

One such example is a link.

A link as you will learn later is created by using the anchor tags <a></a> . The href (hypertext reference) attribute is what truly creates the link by providing that extra bit of information to say where the link should go when it is clicked.

The following creates a link to New2HTML:

<!DOCTYPE html>
<html>
<head>
<title> My webpage </title>
</head>
<body>
<a href="http://www.new2html.com" title="A very awesome website !"></a>
</body>
</html>

Notice how the additional information is added via the href attribute? You can add even more information.

In the snippet above, the title attribute was  also added. This adds a tooltip to the link and the text is shown when a puts the mouseover the link.

Some other popular attributes include:

  • The style attribute (used in CSS)
  • The alt attribute (used to provide alternate descriptions for images)
  • The id and class attribute (used also in CSS when styling an element)
  • The lang attribute (used to specify a language for the content of an element)

You’ll come across a few more. Attributes vary from element to element.