What Is HTML?
HTML stands for HyperText Markup Language. It is not a programming language — it is a markup language that tells the browser how to structure content. Every website you have ever visited is built on HTML.
When you type a web address into your browser and hit Enter, your browser sends a request to a server somewhere in the world. The server sends back an HTML file, and your browser reads that file and turns it into the page you see.
How the Web Works
Here is the simplest way to think about it:
- You open a browser like Chrome, Firefox, or Edge
- The browser asks a server for a webpage
- The server sends back an HTML document
- The browser reads that HTML and renders it into what you see on screen
Your browser is basically a very fancy document reader. It takes HTML code, follows the instructions, and displays the result.
Your First HTML Page
Every HTML page starts with a <!DOCTYPE html> declaration. This tells the browser to use modern rendering mode. Here is the simplest possible HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>The <head> section contains metadata — information about the page that is not displayed on screen. The <body> section contains everything the user sees.
Tags vs Elements
HTML uses tags. A tag is something like <h1> or <p>. Most tags come in pairs — an opening tag and a closing tag.
An element is the whole package: the opening tag, the content, and the closing tag.
<p>This is a paragraph element.</p><p>is the opening tagThis is a paragraph element.is the content</p>is the closing tag
The whole thing together is called an element. When people say "add a paragraph element," they mean add the whole thing.
Common HTML Tags
Here are the tags you will use most often:
| Tag | Purpose | Example |
|---|---|---|
<h1> to <h6> |
Headings (h1 is the biggest) | <h1>Main Title</h1> |
<p> |
Paragraph | <p>Some text</p> |
<a> |
Link | <a href="url">Click</a> |
<img> |
Image (self-closing) | <img src="pic.jpg" alt="desc"> |
<ul>, <ol>, <li> |
Lists | <ul><li>Item</li></ul> |
<div> |
Generic container | <div class="box">...</div> |
<span> |
Inline container | <span style="color:red">red</span> |
Attributes
Attributes add extra information to elements. They go inside the opening tag.
<a href="https://google.com">Visit Google</a>
<img src="photo.jpg" alt="A sunset">
<input type="email" placeholder="Enter your email">The href attribute tells the link where to go. The src attribute tells the image where to find the file. The alt attribute describes the image for screen readers and when the image fails to load.
Nesting Elements
You can put elements inside other elements. The inner element is called a child of the outer element.
<div>
<h2>My Heading</h2>
<p>A paragraph inside a <strong>div</strong>.</p>
</div>Always close tags in the right order. The last tag you open should be the first one you close.
<!-- Correct -->
<p><strong>Bold text</strong></p>
<!-- Wrong -->
<p><strong>Bold text</p></strong>Self-Closing Tags
Some tags do not have closing tags because they do not wrap content. These are called self-closing or void elements.
<img src="photo.jpg" alt="A photo">
<br>
<hr>
<input type="text">You do not need to write <img></img>. The tag stands alone.