HTML element

An HTML document is composed of a series of HTML elements, forming the foundation of webpage structure.

What is an HTML element?

HTML elements are fromstart tagtoend tagthe complete structure between.

Start tag Element Content End tag
<p> This is a paragraph </p>
<a href="default.htm.html"> This is a link </a>
<br> Line break (empty element) None

Description:

  • Start tag is also calledOpening tag
  • End tag is also calledClosing tag

HTML element syntax rules

  • An element starts withStart tagstarts withEnd tagEnd
  • Element content is located between the opening tag and the closing tag.
  • Some elements areEmpty element, no content
  • Empty elements are usually self-closed in the opening tag (e.g.,<br />）
  • Most elements can containAttributes

Tip:Attributes will be introduced in detail in later chapters.

Nesting of HTML elements

HTML elements can be nested within each other, forming a tree-like structure:

  • An element can contain other elements
  • An HTML document is essentially a nested structure (DOM tree).

HTML document example

<!DOCTYPE html>
<html>

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

</html>

The example contains 3 core elements:html、body、p。

Example Analysis

<p> Element (paragraph)

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

Defines a paragraph containing text content.

<body> Element (body)

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

Defines the main content of the page and can contain multiple child elements.

<html> Element (root element)

<html>

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

</html>

The root node of the entire HTML document; all content must be contained within it.

About the end tag

In some cases, the browser will automatically complete missing closing tags:

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

Although it can display normally,It is not recommended to rely on this behavior, which may cause:

  • Broken structure
  • Style anomalies
  • Compatibility issues

HTML empty elements

Empty elements are elements without content, for example:

  • <br>(line break)
  • <img>(image)
  • <input>(input field)

Recommended syntax:

<br />

This syntax is compatible with HTML, XHTML, and XML, and is more standardized.

Best practice: use lowercase tags

HTML tagCase-insensitive, but recommended:

  • Use uniformlylowercase tags
  • Conforms to W3C specifications
  • Improves code readability and consistency
other extensions