Summary -

In this topic, we described about the below sections -

HTML element is a combination of starting tag + content + end tag. HTML element is everything from starting tag to ending tag. The starting tag is called as Opening Tag (<tagname>).

The ending tag is called as closing tag (</tagname>). HTML element is any tag with the content.

Syntax -

<tagname> Content </tagname>

Rules -

  1. HTML element starts with start/Opening Tag.
  2. HTML element ends with end/closing tag.
  3. Only some HTML elements have end tag.
  4. Most HTML elements are having attributes.
  5. Empty HTML tags are closed in same starting tag.

The below are some examples for the HTML elements.

Start tagContentEnd tag
<h1>Heading 1</h1>
<p>Paragraph</p>
<pre>Preserve Formatting</pre>
<div>Division</div>

In the above example, <h1>….</h1>, <p>…</p>, <pre>…</pre> and <div>…</div> are the HTML elements.

Note! Do not forget the end/closing tag; many browsers will produce unpredictable results. Some of the browsers will treat tags without end/closing tag as normal and provide expected results.

Nested HTML Elements -

HTML element contains HTML elements which called as Nested HTML elements. All HTML documents contain nested HTML elements. All HTML elements with content allowed nested HTML elements.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Nested HTML Elements example2..</title>
	</head>
	<body>
		<p><b>Nested text display</b> example</p>
	</body>
</html>

In the above example, <b> Nested HTML elements</b> is a HTML element. The HTML element <b>…</b> is in another HTML element <p>… </p>.

The Nested HTML element <p>..<b>…</b>..</p> is in another HTML element <body>… </body>.

EMPTY/VOID HTML Elements -

HTML elements with no content are called as EMPTY/VOID HTML elements. EMPTY or VOID HTML elements can’t have end tag. EMPTY or VOID HTML elements can be closed with forward slash in the starting tag itself.

In HTML5, the void elements don’t require the forward slash. For the prior versions of HTML, forward slash is mandatory including XHTML.

Syntax -

<br/>
<hr/>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>EMPTY HTML Elements example..</title>
	</head>
	<body>
		<pre>Line1 text here..<br>Line2 text here..</pre>
	</body>
</html>