leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML element

Estimated reading: 4 minutes 39 views

HTML documents are defined by HTML elements.

HTML element

Start tag Element contentEnd tag *
<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 called the closing tag .

HTML element syntax

  • HTML elements start with a start tag
  • HTML elements are closed 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 the first 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 the first paragraph.</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 the first paragraph.
<p>This is the first paragraph.

The above example also works fine in browsers because closing tags are 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 opening tags.

<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 longer-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 beginners tutorial uses lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and enforces lowercase in future (X)HTML versions .

Leave a Comment

CONTENTS