HTML - Elements

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags −

HTML elements are building blocks of web pages. They define the structure and content of a web document. Each element consists of a start tag, content, and an end tag, encapsulating specific information.

Start Tag	Content	End Tag
<p>	This is paragraph content.	</p>
<h1>	This is heading content.	</h1>
<div>	This is division content.	</div>
<br />
<img />
<hr />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

Anatomy of an HTML Element:

Start Tag: Begins the element and contains the element's name, surrounded by angle brackets (< and >).
Content: The information or text contained within the element.
End Tag: Concludes the element and mirrors the start tag but with a forward slash (/) preceding the element's name.

Importance of HTML Elements:

Understanding HTML elements is foundational for web development. They enable developers to structure content, create links, embed media, and enhance accessibility. Mastery of HTML elements forms the basis for building sophisticated web applications and websites.

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements

HTML elements can also be nested within each other, creating a hierarchical structure that defines the layout and content of a web page. This nesting allows for the creation of complex structures by combining different elements.

It is very much allowed to keep one HTML element inside another HTML element −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

HTML Empty Elements:

HTML empty elements, also known as void elements, are elements that do not have any content between opening and closing tags. They stand alone and do not require a closing tag. Examples of HTML empty elements include <br>, <img>, <input>, <hr>, and <meta>.

Let's take a closer look at the <br> element, which is used to insert a line break in a text. Its syntax is simple:

<p>This is a paragraph.<br>This is a new line.</p>

In the above example, the
element is used to create a line break between the two sentences within the

(paragraph) element. Notice that there is no closing tag for
. It's a standalone empty element.

Previous Page Print Page Next Page