HTML Elements

An HTML element is made of a start tag, some content, and an end tag. The element is everything from the start tag to the end tag. For example, <h1>My First Heading</h1> and <p>My first paragraph.</p> are elements.

Note: Some elements have no content, like <br>. These are called empty elements and they have no end tag.

Element syntax

The general shape of an element: a start tag, content, and an end tag.

<tagname>Content goes here...</tagname>

Nested HTML Elements

HTML elements can be nested, which means one element can contain other elements. Every HTML document is built from nested elements.

In the example, <html> is the root element that wraps the whole document. Inside it is <body>, which holds the visible content. Inside the body are two elements, <h1> for a heading and <p> for a paragraph.

Example

A document with four nested elements: html, body, h1, and p.

A basic HTML document that shows nested elements: html contains body, and body contains an h1 "My First Heading" and a paragraph "My first paragraph."

> Output: complete HTML page

Prompt

A basic HTML document that shows nested elements: html contains body, and body contains an h1 "My First Heading" and a paragraph "My first paragraph."

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Elements</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Never Skip the End Tag

Some elements still show correctly even if you forget the end tag, but you should never rely on this. Leaving out end tags can cause unexpected results and errors.

Example

Paragraphs written without closing tags. They may display, but this is bad practice.

A page with two paragraphs written WITHOUT closing p tags, to show that browsers may still display them (though this should never be relied on). Each line reads "This is a paragraph".

> Output: complete HTML page

Prompt

A page with two paragraphs written WITHOUT closing p tags, to show that browsers may still display them (though this should never be relied on). Each line reads "This is a paragraph".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Missing End Tag</title>
</head>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

Empty HTML Elements

Elements with no content are called empty elements. The <br> tag, which makes a line break, is an empty element with no closing tag.

Example

A paragraph with a line break made by <br>.

A paragraph containing a line break made with the empty br element: "This is a <br> paragraph with a line break."

> Output: complete HTML page

Prompt

A paragraph containing a line break made with the empty br element: "This is a paragraph with a line break."

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Empty Br</title>
</head>
<body>

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

HTML is Not Case Sensitive

HTML tags are not case sensitive, so <P> means the same as <p>. The standard does not require lowercase, but PromptCookbook recommends it, and stricter document types like XHTML demand it. PromptCookbook always uses lowercase tag names.

HTML Tag Reference

PromptCookbook' tag reference has more details about each tag and its attributes. A few common ones: <html> defines the root of the document, <body> defines the document's body, and <h1> through <h6> define headings.