👋 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>.
HTML provides six heading levels, from <h1> to <h6>. These headings represent different levels in the document’s content hierarchy.
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
- E-commerce websites
- HTML emails
- Progressive web applications
- Embedded content
- Content management systems such as WordPress
- Frontend applications built with JavaScript frameworks
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.
FAQs
HTML (HyperText Markup Language) is the standard markup language used to structure content on web pages. It defines elements such as headings, paragraphs, links, images, lists, forms, and other page content.
No. HTML is a markup language, not a programming language. HTML defines the structure of web content, while programming languages such as PHP and JavaScript are used to implement logic and dynamic functionality.
HTML is used to structure websites and web applications. It can define headings, text, images, links, navigation, forms, tables, multimedia, and semantic page sections.
HTML tags are used to create HTML elements. For example:<h1>Welcome to My Website</h1>
Here, <h1> and </h1> are tags, while the complete <h1>...</h1> structure is an HTML element.
Semantic HTML means using HTML elements according to their meaning and purpose. Examples include <header>, <nav>, <main>, <article>, <section>, and <footer>. Semantic HTML can improve document structure, accessibility, and maintainability.
HTML provides the structure of a web page, CSS controls its appearance and layout, and JavaScript adds behavior and interactivity.
A simple way to remember this is:
HTML → Structure
CSS → Presentation
JavaScript → Behavior
HTML is no longer developed as separate numbered versions such as HTML5. The HTML standard is maintained as a Living Standard, which is continuously updated by the WHATWG.
Yes. The term HTML5 is still commonly used to describe modern HTML features, but the current HTML standard is maintained continuously rather than being released as a new numbered version.
Yes. Well-structured HTML helps search engines understand the organization and meaning of page content. Semantic elements, appropriate headings, descriptive links, image alt text, and properly structured content can all contribute to a clearer and more accessible page.
Yes. Using the correct semantic HTML elements, meaningful headings, descriptive alt text, properly associated form labels, and native interactive elements can make websites easier to use with assistive technologies such as screen readers.
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.