An HTML document is made up of HTML elements. These elements are what web designers use to design their web pages. In turn, web browsers use the HTML elements to layout and render the web pages.
An element in HTML usually consists of an opening or start tag, a closing or end tag, and content inserted between them.
Some elements have no content and are made up of a start tag only. These elements are called empty elements or void elements.
The start tag may contain attributes as we will be seeing in the next chapter.
The format of an element is:
<tagname>Content goes here...</tagname>
Notice the end tag has a forward slash. Here is an example of a complete tag.
<h1>This is a heading</h1>
Let’s break it down:
|Start Tag||Content||End Tag|
|This is the heading content.|
|This is paragraph content.|
Nesting HTML Elements
HTML elements with start and end tags can be nested. That is, they can contain other elements as the element content.
In practice, all HTML documents contain nested elements.
In this example, the
body elements are nested in the
html element. The
title element is nested in the
head element while
p elements are nested in the
<!DOCTYPE html> <html> <head> <title>This is document title</title> </head> <body> <h1>A Simple heading</h1> <p>Hello World paragraph!</p> </body> </html>
Empty HTML Elements
Void or Empty HTML elements are elements that do not have an end tag and do not contain content. One example is the
<br> element that is used to represent a line break.
<p>This is a paragraph <br> with a line break.</p>
HTML tags are not case-sensitive. Therefore
<h1> are the same. By convention, we will stick with the lowercase examples in this tutorial series.
For a complete list of all available HTML tags, visit our HTML Tag Reference.