When learning about HTML, you will come across different resources that may use HTML elements and tags interchangeably. Chances are, that’s because they wanted to simplify everything and make it easier for you to understand. However, there is a difference when you refer to HTML elements and HTML tags.

What’s the difference?

Technically, HTML documents contain only tags. When they are accessed on a browser, HTML documents are then parsed so that these could be displayed using the Document Object Model (DOM). The tags are there in the HTML document, but HTML elements only appear after the document has been parsed.

But let’s not get into the technical stuff and instead simplify our lives by using what is commonly understood. To put it simply, HTML tags are the markup language that you use in HTML. These are generally the start or opening tag and the closing or ending tag. Tags are enclosed in angle brackets < >.

HTML elements, on the other hand, include the content.

So, given this: <p>This is the difference between HTML elements and tags. </p>
The tags here are <p> and </p> , while the whole thing is called an HTML element.

HTML Elements

Now that we have that out of the way, let’s take a look at HTML elements.

An HTML element has the following syntax:

1. An HTML element begins with an opening or start tag, i.e., <p>.
2. An HTML element ends with a closing or end tag, i.e. </p>.
3. The property of an HTML content is enclosed within the start and end tags, i.e., <p>This is the element content. </p>.
4. It may also contain an attribute.

1. Empty Elements

Some HTML elements do have content and are simply called empty elements. These elements are ended or closed with the opening tag, i.e, <br />.

2. Nestled Elements

Then there is also what is called the “nestled elements.”

Nestled elements are HTML elements that are found within other HTML elements.

For example, this is a nestled element:

<p>I do not know <strong>what it was</strong>.</p>

Lastly, an HTML element may contain attributes, which we will discuss later on.

3. Some Commonly Used HTML Tags Include:

<a> – which shows a hyperlink
<b>- which displays boldfaced text
<br> – which enters a line break into paragraphs
<div>- which introduces a section of the document
<em>- which shows emphasis
<h1>, <h2>, <h3>,through <h6>- display HTML headings
<hr>- which inserts a horizontal rule
<p>- which introduces a paragraph
<table>- which introduces a table

4. Uses of HTML elements

HTML elements serve a variety of purposes:

1. HTML elements can describe the purpose of the text, as well as give it structure. A good example of this type of HTML elements is <h1>, <h2> and other HTML headers. For instance,

<h1>Introduction</h1>

communicates that “Introduction” is a first level heading. Take note that structural HTML elements only provide structure and do not have specific standards for display. A browser, however, can have default display for this type of elements, hence you often see header tags being bigger than normal text on your browser.

2. HTML elements can dictate how certain content would appear. For instance, using <b> would render the text in boldface, while using <i> will display the text in italics.

3. HTML elements that link your HTML document to another documents. For instance, you can use <a> to link your document to another document.

Tips

1. Always put in the closing tag.

There are HTML elements that are not empty elements but may be written without a closing tag. Because browsers are able to recognize them, they present no problem. For example, the <p> element, which starts a paragraph, is often not closed.

<p>This is what we are talking about.

However, it is still best practice to close HTML elements.

Most Web browsers will consider the closing tag foro <p> optional and the paragraph will display properly. Yet, this would not be the case for all Web browsers. To be sure, always put the closing tag at the end.

How is this case different from empty elements? An empty element is when no closing tags are required. Additionally, no closing tags exist or are allowed in empty elements. For example, <br> does not have a corresponding closing tag: </br> does not exist in HTML.

Whereas, technically, you would need to close the HTML element above by using </p>.

2. Use lowercase when writing elements.

HTML tags are not case sensitive. This means that you can write <p>, <P> or even </P> or </p>.

However, standards and recommendations from the World Wide Web Consortium or W3C recommend using lowercase for HTML elements in HTML4 and requires it in XHTML. So you might as well start training yourself in writing HTML elements in lowercase.

Attributes

Another term you would need to know when it comes HTML elements are attributes.

Attributes modify the tags where it appears. Attributes are name-value pairs, which are separated by the equal sign.

The HTML element

<a href=”nextofkin.html”>Next of kin</a>

contains the attribute

href=”nextofkin.html”

Attributes usually use the following syntax:

<tag attribute=”value of attribute”>content</tag>

A lot of people confuse the alt attribute as a tag. It is not. The alt attribute modifies the <img>, <area>, <input> and <applet> tags, which makes it an attribute.

Some of the most commonly used attributes, aside from href and alt include:

align
bgcolor
src
height
width
value
href
hspace
id
class
style
title
dir
lang

These are the basics you need to know about tags, attributes and elements.

HTML for Beginners: Titles. Headings. Paragraphs. (Part 3)