HTML Introduction - HTML Tutorial

HTML is the standard markup language for creating Web pages.

What is HTML?

HTML stands for HyperText Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content

💡 Note: HTML is NOT a programming language. It is a markup language that defines the structure of your content. CSS handles the look and layout, and JavaScript handles the behavior.

A Simple HTML Document

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

Example Explained

Tag	Description
`<!DOCTYPE html>`	Defines that this document is an HTML5 document
`<html>`	The root element of an HTML page
`<head>`	Contains meta information about the HTML page
`<title>`	Specifies a title for the HTML page (shown in the browser's title bar or in the page's tab)
`<body>`	Defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
`<h1>`	Defines a large heading
`<p>`	Defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

Code

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

The HTML element is everything from the start tag to the end tag:

Start Tag	Element Content	End Tag
`<h1>`	My First Heading	`</h1>`
`<p>`	My first paragraph.	`</p>`
`<br>`	(none)	(none)

💡 Note: Some HTML elements have no content (empty elements), like the <br> element. Empty elements do not have an end tag.

Try It Yourself

HTML Page Structure

Below is a visualization of a basic HTML page structure. You will learn more about each part in upcoming chapters.

Code

┌──────────────────────────────────┐
│              <head>               │
│  ┌────────────────────────────┐  │
│  │ <title>Page Title</title>  │  │
│  │ <meta> (info about page)   │  │
│  └────────────────────────────┘  │
├──────────────────────────────────┤
│              <body>               │
│  ┌────────────────────────────┐  │
│  │ <h1>  Main Heading        │  │
│  │ <p>   Paragraph text      │  │
│  │ <a>   A hyperlink         │  │
│  │ <img> An image            │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

How to View HTML Source

Most browsers let you view the HTML source code of a web page:

Right-click on the page
Select "View Page Source" (or press Ctrl+U / Cmd+U)
A new tab opens showing the raw HTML

This is a great way to learn — visit any website and inspect its HTML!

Knowledge Check

4 questions — test your understanding

What does HTML stand for?

What is the correct HTML element for the largest heading?

Which element defines the title of a document?

Where does visible content go?

Next: HTML Elements