HTML Elements

HTML Elements

HTML documents are defined by HTML elements.

HTML Elements:

Opening Tag * Element Content * Closing Tag

<p>  This is a paragraph.  </p>
<a href="default.htm">  This is a link.  </a>
<br>  Line break

Opening tags are often referred to as opening tags, and closing tags are referred to as closing tags.

HTML Element Syntax:

  • HTML elements start with an opening tag.
  • HTML elements end with a 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 within the opening tag.
  • Most HTML elements can have attributes.

Note: You will learn more about attributes 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 nested HTML elements.

Example of an HTML Document:

<!DOCTYPE html>
<html>
<body>
  <p>This is the first paragraph.</p>
</body>
</html>

The above example contains three HTML elements.

HTML Example Analysis:

<p> Element：

<p>这是第一个段落。</p>

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

<body>Element:

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

The <body> element defines the body of an HTML document. It has an opening tag <body> and a 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. It has an opening tag <html> and a closing tag </html>

Don't Forget Closing Tags:

Even if you forget to use closing tags, most browsers will display the HTML correctly:
 

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


The above example will display correctly in browsers because closing tags are optional. However, do not rely on this practice. Forgetting to use closing tags can lead to unpredictable results or errors.

 
HTML Empty Elements:

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

<br>


The <br> tag defines a line break and is an empty element without a closing tag.
 
In XHTML, XML, and future versions of HTML, all elements must be closed. Adding a slash in the opening tag, like <br />, is the correct way to close empty elements. HTML, XHTML, and XML all accept this method. Even though <br> is valid in all browsers, using <br /> is more future-proof.

 
HTML Tip: Use Lowercase Tags:


HTML tags are case-insensitive: <P> is equivalent to <p>. Many websites use uppercase HTML tags because the World Wide Web Consortium (W3C) recommended using lowercase in HTML4 and will enforce lowercase in future (X)HTML versions.
 
Before HTML4, HTML standards were inconsistent, resulting in less structured HTML code similar to XML, where uppercase tags were common. As HTML4 and HTML5 became widespread, websites followed the HTML4 recommendation of using lowercase tags. This is why most modern websites use lowercase HTML tags.