Welcome to your first HTML lesson! In this tutorial, we’ll learn what HTML is, how it works, and how it helps create websites. Let’s get started step by step.
What is HTML?
HTML stands for HyperText Markup Language.
It is the language used to create the structure of web pages.
Think of HTML as the bones of a website — it gives structure to everything you see on a page, like text, images, buttons, links, and more.
Every website you’ve ever visited uses HTML in some way.
You can use HTML to:
- Add text to a webpage
- Insert images and videos
- Create buttons, forms, and links
- Organize content into sections
Every website you see online is built using HTML!
Why Learn HTML?
HTML is the first step in learning web development. Here’s why it’s important:
- Easy to learn — perfect for beginners
- Used by all websites
- Works with CSS (for design) and JavaScript (for interactivity)
- Helps you create your own personal or business website
How HTML Works
HTML uses tags to tell the browser how to display content.
Tags are written inside angle brackets, like <tag>.
Example:
<p>This is a paragraph.</p><p>is the opening tag</p>is the closing tag- The text inside is the content
Together, this is called an HTML element.
What Are HTML Tags?
Tags are like labels that define parts of the web page.
Common HTML tags:
| Tag | Use |
|---|---|
<h1> | Main heading |
<p> | Paragraph |
<a> | Link to another page |
<img> | Show an image |
<ul> | Unordered (bulleted) list |
<ol> | Ordered (numbered) list |
<li> | List item |
<div> | Section of the page |
What Are HTML Elements?
An element includes:
- The start tag
- The content
- The end tag
Example:
<h2>This is a heading</h2>Sometimes, elements don’t have an end tag. These are called self-closing tags.
Example:
<img src="image.jpg" alt="Example Image" />What Are HTML Attributes?
Attributes add extra information to HTML elements.
They are written inside the start tag.
Example:
<a href="https://tutorialsguru.co">Visit Our Website</a>hrefis the attribute- It tells the browser the link’s destination
Other common attributes:
| Attribute | Used With | Purpose |
|---|---|---|
href | <a> | Link address |
src | <img> | Image URL |
alt | <img> | Text if image doesn’t load |
title | All | Shows tooltip on hover |
class | All | Used for CSS styling |
A Simple HTML Page
Now let’s see what a full HTML page looks like:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph in HTML.</p>
<a href="https://www.tutorialsguru.co/">Learn More</a>
<br />
<img src="html-logo.png" alt="HTML Logo" />
</body>
</html>Summary
You’ve just learned:
- What HTML is
- How HTML tags, elements, and attributes work
- How to write a basic HTML page
Don’t worry if you don’t understand everything right now — we’ll go deeper into each topic in the next lessons.