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 (opening tag), and closing tags are often referred to as closing tags (closing tag).
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 in the opening tag (ending with the end of 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.
HTML Document Example
The above example contains three HTML elements.
HTML Example Analysis
<p> Element:
This <p> element defines a paragraph in the HTML document.
<body> Element:
The <body> element defines the body of the HTML document.
<html> Element:
The <html> element defines the entire HTML document.
Do Not Forget the Closing Tag
Even if you forget to use the closing tag, most browsers will display the HTML correctly:
The above example will display correctly in browsers because closing tags are optional.
But do not rely on this practice. Forgetting to use the closing tag can produce unpredictable results or errors.
HTML Empty Elements
HTML elements without content are called empty elements. Empty elements are closed in the opening tag.
<br> is an empty element without a closing tag (<br> tag defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash in the opening tag, such as <br />, is the correct way to close empty elements, and it is accepted by HTML, XHTML, and XML.
Even though <br> is valid in all browsers, using <br /> is a more long-term safeguard.
HTML Tip: Use Lowercase Tags
HTML tags are case-insensitive: <P> is the same as <p>. Many websites use uppercase HTML tags.
tutorialpro.org uses lowercase tags because the World Wide Web Consortium (W3C) recommends using lowercase in HTML 4, and requires lowercase in future (X)HTML versions.