Html Elements
An HTML element is made up of a start tag, content, and an end tag.
The HTML element contains everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Some examples of HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
| Start tag | Element content | End tag |
|---|---|---|
<h1> |
My First Heading | </h1> |
<p> |
My first paragraph. | </p> |
<br> |
none | none |
Note: Some HTML elements like <br> have no content and are called empty elements. Empty elements don't have an end tag!
Nested HTML Elements
HTML elements can be nested, meaning elements can contain other elements.
All HTML documents consist of nested HTML elements.
In the following example, there are four HTML elements (<html>, <body>, <h1>, and <p>):
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained:
The <html> element is the root element, defining the whole HTML document. It has a start tag <html> and an end tag </html>.
Inside the <html> element, there's a <body> element:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <body> element defines the document's body, with a start tag <body> and an end tag </body>.
Inside the <body> element, there are two other elements: <h1> and <p>:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
The <h1> element defines a heading with a start tag <h1> and an end tag </h1>.
The <p> element defines a paragraph with a start tag <p> and an end tag </p>.
Never Skip the End Tag
Some HTML elements might display correctly even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
However, never rely on this! Unexpected results and errors may occur if you forget the end tag!
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break and is an empty element without a closing tag:
Example
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard doesn't require lowercase tags, but we recommends lowercase in HTML and demands lowercase for stricter document types like XHTML. We always use lowercase tag names.
Comments
Post a Comment