HTML elements are the basic building blocks of HTML. Each element gets to have its own tag or tags. Usually, elements have two tags: an opening tag and a closing tag. However, there are some odd ones that have just one (opening) tag; such elements are called empty elements or void elements.
You might find some folks using the terms HTML elements and HTML tags interchangeably. Technically, that is not correct. An HTML element is a collection of tag (or tags) and the content that goes with it. In fact, we can have an element even if the tag is absent! For example, we can have the head element present in the document, even if the tag is not there since tag for the head element is optional.
An HTML page consists of four top-level elements. First, the element that declares the type of HTML page. It is mandatory to have the declarative element -- without that, the HTML document is considered invalid. Second, the HTML element itself -- this element is the main element in an HTML page and pretty much everything resides within it. This element, in turn, embodies the next key elements: the head element and the body element. The head element contains meta-information for the page. The body element is where all the contents that needs to be displayed goes.
Here is an example (given below) that contains the above four elements.
<!doctype html>
<html>
<head>
<title> Learning HTML Elements! </title>
</head>
<body>
<!-- The content in the body element -->
<p> The body-content goes here. </p>
</body>
</html>
Elements can also nest other elements. The rather obvious example is the html element that is nesting two other elements: head and body. Another example is the body element that is nesting a comment element (identified by <!-- and --> tags) and a paragraph element (identified by <p> and </p> tags).
In fact, it is possible that an HTML element can nest even a non-HTML element! Examples for this is when we add script or style (CSS) content to an HTML page. We provide below an example that does the same. If we load this page, then we would see a JavaScript alert box showing "Hello World".
<!doctype html>
<html>
<head>
<title> Learning HTML Elements! </title>
</head>
<body>
<!-- Example of a script element. -->
<script type="text/javascript">
var strHello = "Hello World";
alert(strHello);
</script>
</body>
</html>
Before we move on, it is important to note that we cannot have HTML element embedded inside the enclosed non-HTML element. Thus, if we were to get over-enthusiastic and try to embed HTML elements within the non-HTML element, then that would not work. Due to this reason, the following example would not work because it is adding a <p> element within a script element, which is non-HTML.
<!doctype html>
<html>
<head>
<title> Learning HTML Elements! </title>
</head>
<body>
<!-- Example of a script element. -->
<script type="text/javascript">
var strHello = "Hello World";
alert(<p>strHello</p>);
</script>
</body>
</html>
One way to understand the above constraint is that when we enclose the content between script tags, the content is a script and is not HTML code. To be more accurate, when we specify the script type (using the type attribute of the script element) as "text/javascript", we are saying that the script is JavaScript. So, adding content that is syntax-wise not JavaScript would be an error.
In addition to the elements mentioned above, HTML supports many more types of elements. This fairly large list of elements enables HTML to support various types of content like text, lists, tables, images, links, scripts, etc. Hence, let us list tags for some of these common elements. We would revisit these tags and a lot more in later sections.
| Tag | Description | Empty Element |
|---|---|---|
| <head> | Head of the HTML document | No |
| <body> | Body of the HTML document | No |
| <title> | Window title text or page header. Is mandatory | No |
| <div> | Add a division | No |
| <table> | Add a table | No |
| <p> | Add a paragraph | No |
| <form> | Add a form | No |
| <input> | Provide input options within a form | Yes |
| <script> | Run scripts (for interactivity) | No |
| <style> | Specify style rules (for presentation) | No |
| <img> | Embed an image | Yes |
| <br> | Adds a line-break | Yes |
| <ul> | Add an unordered list | No |
| <ol> | Add an ordered list | No |
| <a> | Add an Internet Link (URL) | No |
| <!-- --> | Add a Comment | No |
Needless to say, the above list is far from complete! For a complete list, we refer the reader to go through the W3C spec: http://www.w3.org/.