HTML Elements and Tags

What Exactly is an Element?

A web page consists of several elements in various combinations and order.  Elements are the fundamental building blocks of the web pages. Usually, an  element consists of three parts:

  1. starting tag or opening tag
  2. content
  3. ending tag or closing tag

structure of an element
The format for a typical HTML element is

<tagname>Content goes here...</tagname>

Here tagname is a placeholder for one of the actual HTML tags.

HTML Tags explained

In HTML tags are the basic concepts used for marking up the web pages. The purpose of HTML tags is to literally markup or enclose sections of web pages to describe the type of content the sections represent. A web page can be imagined as a simple text file marked up using tags.
The format for representing an opening tag in HTML is

<tagname>

The format for representing a closing tag in HTML is

</tagname>

Here tagname represents the type of content like para, image, video, audio, etc…

The combination of the opening tag and closing tag with the content makes up an element.

Characteristics of HTML tags

  • In HTML tags usually, come in pairs.
  • The first tag is called a start tag or an opening tag.
  • The other tag is called an end tag or a closing tag.
  • The content, if there is any, goes in between the two tags.
  • Both tags have the same name and both are surrounded by angle brackets(<>).
  • The only difference is that the end tag has a forward slash(/) prefixed before the tag name to differentiate between the starting and closing tags.

Empty HTML elements

Some elements in HTML have no content. Such HTML elements are called Empty elements. There are two ways of representing empty HTML elements:

    • Using the starting tag only. 
      <tagname>
    • Using tag name followed by a / character. 
      <tagname />

The second type visually implies that the tag is an empty element. But since both formats of representation are accepted in latest HTML5 standards, choosing any one method and sticking with it throughout the web page will make your style consistent.

For this tutorial, we will be following the much simpler first approach.

Nesting of HTML elements

HTML elements can be nested, i.e. elements can contain other elements as content. Nesting of HTML is a common practice in HTML to the extent that it is nearly impossible to find an HTML document without nested elements. In fact, all HTML elements must be nested inside the root element <html>.

An example of properly nested elements:


<p>May the <em>force</em> be with you.</p>

Dangers of improper nesting

We can say that the elements are properly nested if they are closed in the reverse order of opening. This is to ensure that the inner elements are completely wrapped around by their parent elements. This ensures that the browser knows exactly how to display the nested elements. When the elements are not properly nested, the browser tries to guess what the correct order would be. In some simple cases, it may even correctly guess the order and render the web page correctly. In other situations, it may fail to do so and some sections may be missing entirely. So it would be wise to properly nest the elements the first time around to avoid headaches in the future. Most of the modern code editors make this easy since they create the ending tags almost immediately in the correct order.

An example of an improperly nested code:

<p>This is supposed to be <b>bold.</p></b>