👋 First time learning web development?
We recommend starting with our Start Here guide before continuing this lesson. It will help you understand the learning path for HTML, CSS, PHP, and WordPress.
Introduction
HTML stands for HyperText Markup Language. It is the basic building block of every website on the internet. HTML is used to create the structure of web pages by defining elements like headings, paragraphs, images, links, and forms.
What You’ll Learn in This Lesson
In this lesson, you will learn:
- What HTML is
- Why HTML is important
- How HTML works
- Where HTML is used in real websites
What is HTML?
HTML is not a programming language.
Instead, it is a markup language used to structure content on web pages.
HTML uses tags to define elements on a web page. These tags tell the browser how different parts of the content should appear.
Example:
- Headings
- Paragraphs
- Images
- Links
Headings
Headings are used to define titles and subtitles on a webpage. HTML provides six levels of headings, from <h1> to <h6>.
<h1> is the most important heading, while <h6> is the smallest.
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
Headings help organize content and make web pages easier to read. They are also important for SEO because search engines use headings to understand page structure.
Paragraphs
Paragraphs are used to display blocks of text on a webpage. In HTML, paragraphs are created using the <p> tag.
Example:
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
Browsers automatically add space before and after paragraphs to make content easier to read.
Paragraphs are commonly used for:
- Articles
- Blog posts
- Website descriptions
- Product information
Images
Images help make web pages more visually appealing and informative. HTML uses the <img> tag to display images.
Example:
<img src="image.jpg" alt="Example Image">
Explanation:
- src specifies the image file location
- alt provides alternative text if the image cannot be displayed
Images are widely used on websites for:
- Illustrations
- Product photos
- Blog graphics
- Icons
Links
Links allow users to navigate from one page to another. In HTML, links are created using the <a> tag.
Example:
<a href="https://example.com">Visit Website</a>
Explanation:
- href specifies the destination URL
- The text between the tags becomes the clickable link
Links are essential for connecting web pages and creating navigation between different sections of a website.
Why HTML is Important
- Every website uses HTML
- HTML gives structure to web pages
- CSS and JavaScript work on top of HTML
- Without HTML, a website cannot exist
- HTML is the foundation of all websites. Technologies like CSS and JavaScript depend on HTML to apply styles and interactive features.
How HTML Works
The process works like this:
- A developer writes HTML code in a text file.
- The file is saved with a .html extension.
- A web browser (such as Chrome or Firefox) reads the HTML file.
- The browser interprets the HTML tags and displays the page content.
HTML files are saved with .html extension.
A Simple HTML Example
Basic example only:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Explanation of Important Tags
<h1>– Defines the main heading of the page<p>– Defines a paragraph of text
Where HTML is Used
HTML is used in many places, including:
- Websites
- Web applications
- Forms
- Emails (HTML emails)
- Content management systems like WordPress
HTML, CSS, and JavaScript
Web development usually involves three main technologies:
| Technology | Purpose |
|---|---|
| HTML | Structure of the webpage |
| CSS | Styling and design |
| JavaScript | Interactivity and behavior |
HTML creates the structure, CSS improves the design, and JavaScript adds dynamic functionality.
Practical Tasks
Try these small exercises:
- Task 1: Create a simple HTML page with a heading and a paragraph.
- Task 2: Change the heading text to your name.
- Task 3: Add another paragraph describing what you learned about HTML.
Conclusion
HTML is the foundation of web development. It provides the basic structure for every webpage and allows browsers to display content correctly. Once you understand HTML, you can start learning CSS to style your pages and JavaScript to add interactivity.
In the next tutorial, we’ll learn about HTML Basic Structure.