1. What are HTML Elements?

HTML elements are the HTML code blocks that combine to build the structure of a web-page. Usually, the nesting of HTML elements is the prime way to write HTML markup. Moreover, an HTML element makes a separate code block and can work separately. However, certain HTML elements do not allow nesting and are called empty elements or empty tags. <h2>Some Text</h2> is an example of an HTML element. Usually, HTML elements have the following components:

  • The opening tag or starting tag of the element
  • The closing tag or ending tag of the element
  • Also, the content of the element
  • Further, HTML Element attributes specified to the element (if required)

Tutorial Contents:

  1. Intro to HTML Elements
  2. How to Properly Nest HTML Elements
  3. Detailed Example of HTML Elements
  4. Empty HTML Elements or Singleton Tags

Example

<tagname>The content of the element….. </tagname>

Note:

HTML elements have several children as described below:
HTML Tags, the content and HTML Attributes are also known as children of HTML elements.

The following example illustrates the children of the HTML element.

Example

<h1>Heading level 1 of the element….. </h1>
<h2>Heading level 2 of the element….. </h2>
<p>Paragraph of the element….. </p>
<span>The content of the element….. </span>

Try in CodeLab

2. What is the Nesting of HTML Elements?

Importantly, HTML elements also permit nesting of elements into each other. Resultantly, this adds additional functionality in HTML markup. It is also obvious from the above HTML example. Further, note that the HTML markup always comes nested. Usually, an HTML web page contains many HTML elements nested and it is impossible to create any web-page without the nesting of elements.

3. Detailed Example of HTML Elements

Example

<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
</head>
<!–The Content after this tag is visible–>
<body>
<!– This is a heading–>
<h2>HTML elements</h2>
<!– This is a paragraph–>
<p>This page contains HTML introductory information.</p>
</body>
</html>

Try in CodeLab

3.1. Explanation

<!Doctype > It tells the browser about the version of HTML
<html> <html> is the opening tag of any HTML document. It is the parent element of all the markup.
<head> This element contains meta-data about the document.
Meta-data is the information of the document information. e.g title, subject, location, etc
<title> The title of the document is defined by this element.
</title> It is the closing tag of the title element.
</head> </head> is the closing tag of head element.
<body> The body element, all visible content is contained in this element.
<h1> It is the heading of document. Most bigger heading is h1.
</h1> The closing tag of h1 heading.
<p> The paragraph element defines paragraphs in a document.
</p> The closing tag of paragraph.
</body> Closing tag of body element.
</html> And finally, the /html tag tells the end of the document.

<html> is the main building block element of any HTML document. It comes with an opening tag and closing tag. All other elements are nested within this element except <!DOCTYPE HTML>. Further, </html> is the closing HTML tag.
The two main elements of <html> are <head>…</head> and <body>…</body> elements.

3.2. The “<head>” element contains:

  • <title>Title of the document</title>, which is shown in the browser tab
  • Also, it may contain external stylesheets
  • Further, it may have on-page stylesheets
  • It may also contain external scrips linked
  • Moreover, it may have on-page scripts
  • HTML Encoding Type
  • HTML meta tags, etc

3.3. The “<body>” element contains:

  • All the visible content on the web page, appear in this element
  • Also, all headings, paragraphs, HTML forms, HTML buttons, HTML lists, tables, etc lies in the body element
  • Moreover, on-Page scripts may also come in this element, etc.
  • Links to external scripts may also lie in this element, at the bottom

Note:

There are two types of elements depending on the display:
  1. Block-level elements
  2. Inline elements

4. Empty HTML Elements or Singleton Tags

4.1. What is an empty Tag?

Usually, depending on the type of tag, they may contain only a singular tag or a pair of tags. Also, note that some elements come only with a single opening tag. Hence, there is no closing or ending tag. Thus, such HTML elements are considered as empty HTML tags or Void elements or Singleton HTML tags.

4.2. All 20 Empty HTML Elements

Following are all the 20 empty HTML elements alongwith brief explanation:

1-<br> Tag

This is a line break tag and often used to create a single line break in the paragraph. Importantly, we should not use this to make a visual separation between different sections or paragraphs.

2-<hr> Tag

It creates a horizontal rule to separate two sections on the screen. But we mainly get this result using CSS borders.

3-<input> Tag

This is HTML forms related tag. Its main use is to create a button, text input, checkbox, etc.

4-<link> Tag

It creates a linkage between the current document and an external CSS stylesheet. It has nothing to do with the HTML anchor links or hyperlinks.

5-<!Doctype HTML> Tag

This is the very first tag in every HTML document. It tells the browser how to interpret the subsequent tags or markup. For different versions of HTML, it has a different value.

6-<!-- comment --> Tag

It is the comment tag in HTML. This tag has this sort of representation with an exclamation mark and dashes. Also, it does not display on the screen. Rather it creates comments in the document for the developer.

7-<area> Tag

It denotes the area inside an image map.

8-<base> Tag

The base tag creates a base URL in the head section of the document and it must be in the head section. This URL is then interpreted by the subsequent URLs as their base URL.

9-<basefont> Tag

In HTML 4, the base font tag was utilized to set the base properties of text like font size, font color, font-family, etc. This tag is now deprecated and is not useable in HTML 5.

10-<col> Tag

A <colgroup> has this tag and it defines column’s properties for every column in a table.

11-<command> Tag

The command tag creates a command for a user to invoke.

12-<img /> Tag

Fortunately, when there is a need to enhance the aesthetics of the document, HTML facilitates us with <img /> tagged images to our content.

13<keygen> Tag

In HTML forms, this tag creates a key-pair generator field.

14-<meta> Tag

The meta tag has information about the document that is useful for Search Engines. Also, there are many meta tags and we add them in the HTML head section.

15-<param> Tag

A plugin defines its parameters with this tag.

16-<source> Tag

It allows us to add alternative file paths for media files like HTML videos, audios, or images.

17-<track> Tag

This tag sets a track for media files.

18-<wbr> Tag

Likewise <br> it tells the browser to add a word break/line break in a text or paragraph.

19-<embed> Tag

It defines a container for an external application or interactive content.

20-<isindex> Tag

It is a deprecated tag and was used to put a text field on the page for querying the document.

In conclusion, any browser will always display some rendered result on the screen whether there is a closing tag or not. It will produce the results based on the initial tag. But, if a developer forgets to enter the closing tag, then the results, rendered by the browser, might not be useful, distorted, incomplete, or different from the desired ones.

Note:

Never truncate the closing tag of HTML element. Although exceptions may come like <hr>, <br>, etc
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us