HTML Elements and Tags


What is an HTML Element

An HTML element is defined by a start tag, some content, and an end tag:

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

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

In the example, the <body> element is nested inside the <html> element. The <h1> element and the <p> element are nested inside of the <body> element


Never Skip the End Tag

Some HTML elements will be displayed correctly, even without the end tag. For example, the following would still display correctly:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

However, you should never rely on this to work. Unexpected results may occur if you forget the end tag!


Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

<p>This is a <br> paragraph with a line break.</p>

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the exact same thing as <p>.

The HTML standard does not nesicarily require lowercase tags, but W3C reccomends lowercase in HTML.