HTML Basic Examples

This chapter shows some basic HTML examples. It is fine if some of the tags are new to you; they are explained in later chapters.

HTML Documents

Every HTML document must start with a document type declaration: <!DOCTYPE html>.

The document itself starts with <html> and ends with </html>. The visible part of the page goes between <body> and </body>.

Example

A basic HTML document with a heading and a paragraph.

A basic HTML document with a doctype, html and body, containing an h1 "My First Heading" and a paragraph "My first paragraph."

> Output: complete HTML page

Prompt

A basic HTML document with a doctype, html and body, containing 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>Documents</title>
</head>
<body>

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

</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tells the browser the document type, which helps it show the page correctly.

It must appear only once, at the very top of the page, before any HTML tags. It is not case sensitive.

HTML5 doctype

The doctype declaration used for HTML5.

<!DOCTYPE html>

HTML Headings

HTML headings are made with the tags <h1> through <h6>. <h1> is the most important heading and <h6> is the least important.

Example

Three headings of decreasing importance.

A page showing three HTML headings of decreasing importance: an h1 "This is heading 1", an h2 "This is heading 2", and an h3 "This is heading 3".

> Output: complete HTML page

Prompt

A page showing three HTML headings of decreasing importance: an h1 "This is heading 1", an h2 "This is heading 2", and an h3 "This is heading 3".

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>Headings</title>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

HTML Paragraphs

HTML paragraphs are made with the <p> tag.

Example

Two paragraphs, each in its own <p> tag.

A page with two paragraphs: "This is a paragraph." and "This is another paragraph.", each in its own p tag.

> Output: complete HTML page

Prompt

A page with two paragraphs: "This is a paragraph." and "This is another paragraph.", each in its own p tag.

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>Paragraphs</title>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

HTML Links

HTML links are made with the <a> tag. The link's destination is set in the href attribute. Attributes give extra information about an element, and you will learn more about them in a later chapter.

Example

A link pointing to the PromptCookbook website.

A page with a single link made with the a tag, text "This is a link", pointing to https://prompt-cookbook.com using the href attribute.

> Output: complete HTML page

Prompt

A page with a single link made with the a tag, text "This is a link", pointing to https://prompt-cookbook.com using the href attribute.

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>Link</title>
</head>
<body>

<a href="https://prompt-cookbook.com">This is a link</a>

</body>
</html>

HTML Images

HTML images are made with the <img> tag. The source file (src), alternative text (alt), width, and height are given as attributes.

Example

An image with source, alt text, width, and height.

A page with an image made with the img tag, src "PromptCookbook.jpg", alt text "PromptCookbook", width 104, and height 142.

> Output: complete HTML page

Prompt

A page with an image made with the img tag, src "PromptCookbook.jpg", alt text "PromptCookbook", width 104, and height 142.

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>Image</title>
</head>
<body>

<img src="PromptCookbook.jpg" alt="PromptCookbook" width="104" height="142">

</body>
</html>

How to View HTML Source

You can look at the HTML behind any web page. To view the source code, press CTRL + U, or right-click the page and choose "View Page Source"; this opens a new tab with the page's HTML.

To inspect a single element, right-click it and choose "Inspect". This shows both the HTML and the CSS, and you can even edit them on the fly in the panel that opens.