Pa2sw0rd HTML Elements
An HTML document is defined by HTML elements.
HTML Elements
| Start tag * | Element Content | End tag * |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href=”default.htm”> | Here is a link | </a> |
| <br> | Line Break |
* The start tag is often called
the opening tag , and the end tag is often called
the closing tag .
HTML Element Syntax
- HTML elements start with a start tag
- HTML elements are terminated by a closing tag
- The content of an element is the content between the start tag and the end tag.
- Some HTML elements have empty content
- Empty elements are closed by the start tag (they end with the end of the start tag)
- Most HTML elements can have attributes
Note: You will learn more about properties 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 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 Example Analysis
<p> element:
<p>This is the first paragraph. </p>The <p> element defines a paragraph in an HTML document.
This element has a start tag <p> and an end tag </p>.
The element content is: This is the first paragraph.
The <body> element:
<body>
<p>This is the first paragraph. </p>
</body>The <body> element defines the body of an HTML document.
This element has an opening tag <body> and an closing tag </body>.
The element content is another HTML element (the p element).
The <html> 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 a end tag </html>.
The element content 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 will also work fine in the browser because the closing tag is optional.
Don’t rely on this behavior, though. Forgetting to use a closing tag can produce unexpected results or errors.
HTML Empty Elements
HTML elements with no content are called empty elements. Empty elements are closed by the start tag.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash to the opening tag, such as <br />, is the correct way to close an empty element and is accepted by HTML, XHTML, and XML.
Even though <br> works in all browsers, using <br /> is actually a better long-term solution.
HTML Tip: Use lowercase tags
HTML tags are not case sensitive: <P> is equivalent to <p>. Many websites use uppercase HTML tags.
The tutorial uses lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and will make it mandatory in future (X)HTML versions .
IT Resource Hub » HTML Elements
