HTML Elements
HTML documents are made up of a series of HTML Elements. Elements are the building blocks of HTML.
What is an HTML Element?
An HTML element usually consists of an opening tag (start tag), some content, and a closing tag (end tag).
<tagname>Content goes here...</tagname><tagname>: This is the opening tag, e.g.,<p>.Content goes here...: This is the element's content, which can be text or other HTML elements.</tagname>: This is the closing tag, distinguished from the opening tag by a forward slash/before the tag name, e.g.,</p>.
An element refers to everything from the opening tag to the closing tag.
Examples:
<h1>My First Heading</h1>
<p>My first paragraph.</p>Here we have two elements: an <h1> element and a <p> element.
| Opening Tag | Element Content | Closing Tag |
|---|---|---|
<h1> | My First Heading | </h1> |
<p> | My first paragraph. | </p> |
Nested HTML Elements
HTML elements can be nested, meaning one element can contain other elements. In fact, all HTML documents are made up of nested HTML elements.
The example from the previous "HTML Basics" chapter demonstrates this well:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>- The
<html>element is the root element, containing the entire document. - Inside
<html>, a<body>element is nested. - Inside
<body>, the<h1>and<p>elements are nested.
Proper nesting is essential for building valid HTML structures.
Empty HTML Elements
Some HTML elements have no content. These elements are called empty elements or self-closing tags.
A common example is the line break tag <br>. It just represents a line break and has no content to wrap.
Empty elements don't need to be closed in HTML5. You just write <br>. In the stricter XHTML, you would write <br />.
Other common empty elements include:
<img>: Used to insert images.<hr>: Used to create a horizontal rule.<input>: Used to create form input controls.<link>: Used to link external resources.<meta>: Used to define metadata.
HTML Tag Case Sensitivity
HTML tags are not case-sensitive. This means <P> and <p> have the exact same effect.
However, the W3C (World Wide Web Consortium) recommends using lowercase tags in HTML, and in stricter document types like XHTML, lowercase is required.
Best Practice: Always use lowercase letters for your HTML tags.