HTML Elements

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

Start tag Element content End tag
<p> This is a paragraph </p>
<a href="default.htm"> This is a link </a>

The start tag is often called the opening tag. The end tag is often called the closing tag.


HTML Element Syntax

  • An HTML element starts with a start tag / opening tag
  • An HTML element ends with an end tag / closing tag
  • The element content is everything between the start and the end tag
  • Some HTML elements have empty content
  • Empty elements are closed in the start tag
  • Most HTML elements can have attributes



Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.


HTML Document Example

[HTML]<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html> [/HTML] The example above contains 3 HTML elements.


HTML Example Explained

The <p> element:
[HTML]<p>This is my first paragraph.</p>[/HTML] The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.

The <body> element:
[HTML]<body>
<p>This is my first paragraph.</p>
</body>[/HTML] The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).

The <html> element:
[HTML]<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html> [/HTML] The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).


Don't Forget the End Tag

Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .


Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).


HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
The World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.