HTML Element

HTML documents are defined by HTML elements.

HTML element

start tag *element contentelement content
<p>this is a paragraph</p>
<a href=”default.htm”>here is a link</a>
<br>newline

* The opening tag is often called the opening tag , and the closing tag is often called the closing tag.


HTML element syntax

  • HTML elements start with a start tag
  • HTML element terminated with closing tag
  • The content of the element is the content between the opening and closing tags
  • Some HTML elements have empty content
  • Empty elements are closed in the opening tag (ending at the end of the opening tag)
  • Most HTML elements can have attributes

Note: You will learn more about properties in the next chapter of this tutorial.


Nested HTML elements

Most HTML elements can be nested (HTML elements can contain other HTML elements).

HTML documents consist of HTML elements nested within each other.

HTML document example

<!DOCTYPE html>
<html>

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

</html>

The above example contains three HTML elements.


HTML instance parsing

<p> element:

<p> This is a Paragraph</p>

The <p> element defines a paragraph in the HTML document.
This element has an opening tag <p> and an closing tag </p>.
The content of the element is: This is the first paragraph.

<body> element:

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

The <body> element defines the body of the HTML document.
This element has an opening tag <body> and an closing tag </body>.
The element content is another HTML element (the p element).

<html> element:

<html>

<body>
<p>This is a paragaraph</p>
</body>

</html>

The <html> element defines the entire HTML document.
This element has an opening tag <html>, and an closing tag </html>.
The content of the element is another HTML element (the body element).


Don’t forget the closing tag

Most browsers will display the HTML correctly even if you forget to use the closing tag:

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

The above example will also display fine in the browser because closing the tag is optional.

But don’t rely on this practice. Forgetting to use closing tags can produce unpredictable results or errors.


HTML empty element

HTML elements with no content are called empty elements. Empty elements are closed in the opening tag.

<br> is an empty element without a closing tag (the <br> tag defines a newline).

In XHTML, XML, and future versions of HTML, all elements must be closed.

Adding a slash to an opening tag, such as <br />, is the correct way to close empty elements, and is accepted by HTML, XHTML, and XML.

Even though <br> is valid in all browsers, using <br /> is actually a more long-term guarantee.


HTML Tip: Use lowercase tags

HTML tags are not case sensitive: <P> is equivalent to <p>. Many websites use uppercase HTML tags.

The rookie tutorial uses lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and enforces lowercase in future (X)HTML versions .