HTML element
The HTML document is defined by the HTML element.
HTML element
Start label |
Element content |
End tag |
|---|---|---|
< p > |
This is a paragraph. |
< / p > |
< a href= “default.htm” > |
This is a link. |
< / a > |
< br > |
New line |
The \* start tag is often referred to as the start tagand the end tag is often referred to as the closing tag.
HTML element syntax
The HTML element starts with the opening tag
The HTML element terminates with the closing tag
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 start tag (ends with the end of the starttag)
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 made up of HTML elements that are nested within each other.
HTML document instance
<!DOCTYPE html>
<html>
<body>
<p>This is the first paragraph.</p>
</body>
</html>
The above example contains three HTML elements.
Analysis of HTML instance
< p > element:
<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 a closing tag </p> .
The element content is: this is the first paragraph.
<body> elements:
<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 a closing tag </body> .
The content of the element is another HTML element (p element).
<html> elements:
<html>
<body>
<p>This is the first paragraph.</p>
</body>
</html>
<html> element defines the entire HTML documents.
This element has a start tag <html> and a closing 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 it correctly HTML :
<p>This is a paragraph
<p>This is a paragraph
The above examples can also be displayed normally in the browser, because the closing tab is optional.
But don’t rely on it. Forgetting to use the closing tag can produce unpredictable results or errors.
HTML empty element
A HTML element with no content is called an empty element. The empty elementis closed in the opening tag.
<br> is an empty element that does not close the tag <br> labeldefines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Add a slash to the opening tag, such as <br/> is the right way to closeempty elements, which are accepted by HTML, XHTML, and XML
even if <br> is valid in all browsers, but use the <br/> . In fact, it is a longer-term protection.
HTML hint: use lowercase tags
The HTML tag is case-insensitive: <P> equivalent to <p> . Many websites use uppercase HTML tags.
Rookie tutorials use lowercase tags because the World wide Web Consortium (W3C) recommends lowercase in HTML 4 and enforces lowercase in future (X) HTML versions.