1. What is HTML?
HTML stands for HyperText Markup Language.
It tells the browser how to structure the content on a webpage.
Think of HTML as the skeleton of a webpage.
For example:
<p>My cat is very grumpy</p>This tells the browser:
“This text is a paragraph.”
2. What is an HTML Element?
An HTML element has three parts:
- Opening tag
- Content
- Closing tag
Example:
<p>My cat is very grumpy</p>Breaking it down:
<p>→ opening tagMy cat is very grumpy→ content</p>→ closing tag
Together, they form one HTML element.
3. Attributes
An attribute gives extra information about an element.
You add attributes inside the opening tag.
Example:
<p class="editor-note">This is important!</p>Here:
classis the attribute name"editor-note"is its value- Together they target the element for styling (CSS)
Attribute syntax:
<element attributeName="value">content</element>Example using an image:
<img src="cat.png" alt="A cute cat" width="200" />Attributes used here:
src→ where the image is locatedalt→ text shown if image failswidth→ image width in pixels
4. Void Elements (Empty Elements)
Some elements do not have closing tags.
They don’t wrap content — they only insert something into the page.
Examples of void elements:
<img src="photo.png" alt="photo">
<br>
<hr>
<input type="text">These do not need a </img> or </br> tag.
They are called void elements.
5. Nesting Elements
You can place elements inside other elements.
This is called nesting.
Correct way:
<p>My cat is <strong>very</strong> grumpy.</p>Notice:
<p>opens first → closes last<strong>opens inside<p>→ closes before</p>
This is proper nesting.
Incorrect nesting:
<p>My cat is <strong>very grumpy.</p></strong>This confuses the browser and can break your layout.
6. Anatomy of a Complete HTML Document
A full HTML page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>Breakdown:
<!DOCTYPE html>
Tells browser this is an HTML5 document.<html>
The root element — everything is inside it.<head>
Contains page info (not visible on the webpage), like title, meta tags.<body>
Contains the actual visible content of the page — text, images, buttons, etc.
7. Character References (Special Characters)
Some characters are reserved in HTML and must be written differently.
For example:
<→<>→>&→&
Example:
<p>5 < 10</p>This displays:
5 < 108. HTML Comments
Comments are used for notes inside your code.
They are not shown on the webpage.
<!-- This is a comment -->
<p>Hello!</p>Useful for documentation and reminders.