HTML Tutorial

HTML Introduction

HTML is the standard markup language for making web pages. A markup language uses tags to label the parts of a page so the browser knows how to show them.

What is HTML?

Here are the key points about HTML:

HTML stands for HyperText Markup Language.
It is the standard markup language for making web pages.
It describes the structure of a web page.
It is made up of a series of elements.
HTML elements tell the browser how to show the content.
Elements label pieces of content, such as "this is a heading", "this is a paragraph", or "this is a link".

A Simple HTML Document

Here is what a basic HTML page looks like, with each part explained:

<!DOCTYPE html> says this is an HTML5 document.
<html> is the root element that wraps the whole page.
<head> holds meta information about the page.
<title> sets a title, shown in the browser tab.
<body> holds everything you can see on the page, such as headings, paragraphs, images, and links.
<h1> defines a large heading.
<p> defines a paragraph.

Example

A complete, basic HTML page.

A minimal but complete HTML5 document: a doctype, html, head with a title "Page Title", and a body containing an h1 "My First Heading" and a paragraph "My first paragraph."

> Output: complete HTML page

Prompt

A minimal but complete HTML5 document: a doctype, html, head with a title "Page Title", and a 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>Page Title</title>
</head>
<body>

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

</body>
</html>

What is an HTML Element?

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, in <h1>My First Heading</h1>, the start tag is <h1>, the content is "My First Heading", and the end tag is </h1>.

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>

Web Browsers

A web browser, such as Chrome, Edge, Firefox, or Safari, reads HTML documents and shows them correctly. The browser does not show the HTML tags themselves; it uses them to decide how to display the page.

HTML Page Structure

An HTML page is built from nested elements: <html> wraps the page, <head> holds the title and meta info, and <body> holds the visible content.

Note: The content inside <body> is shown in the browser. The text inside <title> is shown in the browser's title bar or tab.