HTML documents are made up by HTML elements.
HTML Elements
HTML elements are written with a start tag, with an end tag, with the content in between:
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first HTML paragraph.</p>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> |
 | Some HTML elements do not have an end tag. |
|---|
Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains 4 HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Example Explained
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>
Don't Forget the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
The example above works in all browsers, because the closing tag is considered optional.
Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Empty element can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you need stricter validation, and make your document readable by XML parsers, please close all HTML elements.
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML4, and demandslowercase for stricter document types like XHTML.
| At UD we always use lowercase tags. |
|---|
0 comments:
Post a Comment