HTML documents are defined by HTML elements.
|Start tag *||Element content||Closing tag *|
|<p>||This is a paragraph||</p>|
|<a href=”default.htm”>||This is a link||</a>|
*The opening tag is often called the opening tag, and the closing tag is often called the closing tag .
HTML element syntax
- HTML element to start tag start
- HTML elements are terminated by closing tags
- The content of the element is the content between the start tag and the end tag
- Some HTML elements have empty content
- The empty element is closed in the opening tag (ends 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 are composed 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 analysis
<p>This is the first paragraph.</p>
This <p> element defines a paragraph in the HTML document.
This element has a start tag <p> and an end tag</p>. The content of the element is: This is the first paragraph.
<body> <p>This is the first paragraph. </p> </body>
The <body> element defines the body of the HTML document.
This element has a start tag <body> and an end tag </body>.
The element content is another HTML element (p element).
<html> <body> <p>This is the first paragraph.</p> </body> </html>
The <html> element defines the entire HTML document.
This element has a start tag <html> and an end tag </html>. The content of the element is another HTML element (body element).
Don’t forget the closing tag
Even if you forget to use the closing tag, most browsers will display the HTML correctly:
<p>This is a paragraph <p>This is a paragraph
The above example can also be displayed normally in the browser, because the closing tab is optional.
But don’t rely on this approach. Forgetting to use the end tag can produce unpredictable results or errors.
HTML empty element
HTML elements with no content are called empty elements. The empty element is closed in the opening tag.
<br> is an empty element without closing tag (<br> tag defines 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. HTML, XHTML, and XML all accept this method.
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 rookie tutorial uses lowercase tags, because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4 , and will force lowercase in future (X)HTML versions .