HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Elements

HTML makes use of various tags to format the content and these tags are enclosed within angle braces <opening tag> content here...</closing tag>.


What is an Element?

In HTML a tag is used for creating an element. The name of an HTML element is the name used in angle brackets such as <p> for paragraph. Note that the end tag's name is preceded by a slash character, </p>, and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.

An element is a part of a webpage. In XML and HTML, an element may contain a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some attributes, enclosed text content, and a closing tag.


Elements vs Tags

Elements and tags are terms that are widely confused.

A Tag is just opening or closing entity for example: <p> or </p>.

An Element encompasses opening tag, closing tag and content, for example:

  • <h1> I am Heading </h1>
  • <p> I am paragraph </p>
opening tag Content closing tag
<h1> I am Heading </h1>
<p> I am paragraph </p>

The HTML element is everything from the opening tag to the closing tag:

There are some HTML elements which don't need closing tag, such as <img...>, <input...>, <hr> and <br>. These elements are called empty elements.


Empty elements

HTML elements with no content are called empty elements. They don't need closing tag.

Empty elements are also konwn as void element and self closing tags.

The <br> is an empty element without a closing tag (the <br> tag defines a line break).

Below is a list of empty elements available in HTML:

Empty element Description
<area> Defines an area inside an image-map
<base> Specifies the base URL/target for all relative URLs in a document
<br> Defines a single line break
<embed> Defines a container for an external (non-HTML) application
<hr> Defines a horizontal line
<img> Defines an image
<input> Defines an input control
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<meta> Defines metadata about an HTML document
<source> Defines multiple media resources for media elements
<track> Defines text tracks for media elements
<wbr> Defines a possible line-break

HTML Nested Elements

HTML elements can be nested (elements can contain elements).

That means it is allowed to keep one HTML element inside another HTML element.

Run code

HTML tags should be "nested" in a proper order, meaning that the tag opened most recently is always the next tag to close.