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 |
<h1> |
This is the heading content. | </h1> |
<p> |
This is paragraph content. | </p> |
<br> |
||
<hr> |
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 head and body elements are nested in the html element. The title element is nested in the head element while h1 and p elements are nested in the body element.
<!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.
Example:
<p>This is a paragraph <br> with a line break.</p>Case Sensitivity
HTML tags are not case-sensitive. Therefore <H1> and <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.
