HTML Elements
An HTML element is the fundamental building block of an HTML page. It is defined by a start tag, some content, and an end tag.
The Building Blocks of HTML
The HTML element consists of everything from the start tag to the end tag. The general structure is:
<tagname>Content goes here...</tagname>Here are some examples of common 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> (line break), have no content. These are called empty elements and do not have an end tag.
Nested HTML Elements
HTML elements can be placed inside other elements. This is called nesting. In fact, all HTML documents consist of nested elements.
The following example contains four nested HTML elements (<html>, <body>, <h1>, and <p>):
Example of Nesting
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Example Explained
- The
<html>element is the root, defining the whole document. - Inside the
<html>element, there is a<body>element, which defines the document's visible body. - Inside the
<body>, there are two more elements:<h1>for a heading and<p>for a paragraph.
Never Skip the End Tag
Although some browsers might display HTML correctly even if you forget an end tag, you should never rely on this. Forgetting end tags can lead to unexpected results and errors.
Example of Missing End Tags
<html>
<body>
<p>This is a paragraph.
<p>This is another paragraph.
</body>
</html>Empty HTML Elements
HTML elements with no content are called empty elements. The <br> tag, which defines a line break, is an example of an empty element without a closing tag.
Example of an Empty Element
<p>This is a <br> paragraph with a line break.</p>HTML is Not Case Sensitive
HTML tags are not case sensitive, meaning <P> is the same as <p>. However, the World Wide Web Consortium (W3C) recommends using lowercase tags in HTML and requires lowercase for stricter document types like XHTML. It is a best practice to always use lowercase tag names.
Test Yourself with an Exercise
True or False: Empty elements must have a close tag.
HTML Tag Reference
A brief reference for the tags discussed in this chapter.
| Tag | Description |
|---|---|
<html> | Defines the root of an HTML document |
<body> | Defines the document's body |
<h1> to <h6> | Defines HTML headings |
<p> | Defines a paragraph |
<br> | Inserts a single line break |