HTML Elements
We learned from the previous tutorials that HTML is consist of elements. HTML Elements usually consist of a start tag and end tag wherein the content is inserted in between.
< tagname >Content goes here...< /tagname >
The HTML element is everything from the start tag to the end tag. It means, the start tag, content and end tag are called element.
| Start tag | Element content | End tag |
|---|---|---|
| < h1 > | My First Heading | < /h1 > |
| < p > | My first paragraph. | < /p > |
| < br > |
HTML elements with no content are called empty elements. Empty elements do not have an end tag like < img > element and < br > element (which indicates a line break).
Nested HTML Elements
All HTML documents consist of nested HTML elements. It means that , HTML elements can be nested (elements can contain elements). Let's see the example below to be more clearer.
The < html > element defines the whole document. It has a start tag < html > and an end tag < /html >. Now, there are elements between < html > and < /html > and that's the content. The content is another HTML element, the < body > element.
The < body > element defines the document body. It has a start tag < body > and an end tag < /body >. Now, between the start and end tags is the content which are another HTML elements, the < h1 > and < p > elements.
Did you see now how HTML elements can be nested or contain another HTML elements?
Do Not Forget the End Tag
Some HTML elements will display correctly, even if you forget the end tag. The example below works in all browsers because the closing tag is considered optional.
Never rely on this because it might produce unexpected results and/or errors if you forget the end tag. So I advise that never forget to close your tag.
Empty HTML Elements
Empty HTML elements are those elements that have no content and end tag like:
< br >, < img >, etc.
Empty elements can be "closed" by adding forward slash to the start or opening tag like this: < br />.
HTML 5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
Use Lower Tags
HTML tags are not case sensitive. You can write the tags in uppercase or lowercase. < H1 > means the same as < h1 >.
The HTML 5 standard does not require lowercase tags, but I recommend lowercase in HTML for stricter document types like XHTML.
Note: There should be no space in the HTML tags or between the angle brackets and element name. I just put a space for it to display the tags as it will hide or not display without a space. Remember, web browser don't display HTML tags.
HTML 5 Tutorials:
HTML 5 Tutorial #1 - Introduction
HTML 5 Tutorial #2 - HTML Editors
HTML 5 Tutorial #3 - HTML Basic