Learn what HTML is, how it works, and create your first webpage
HTML (HyperText Markup Language) is the foundation of every website on the internet. Think of it as the skeleton that gives structure to web content - just like how your body has bones to give it shape, websites have HTML to give them structure.
HTML is the universal language of the web that defines the structure and meaning of web content. Every website you visit - from social media platforms like Facebook and Twitter to e-commerce giants like Amazon and Netflix - starts with HTML as its foundation.
In this comprehensive tutorial, you'll learn HTML from the ground up, understanding not just what HTML does, but how to write semantic, accessible, and professional HTML that powers modern web development. Don't worry if you've never coded before - we'll start from the absolute basics and build your expertise step by step!
HTML stands for HyperText Markup Language. Let's break this down:
HTML uses "tags" to mark up content and tell the browser how to display it.
When you visit a website, here's what happens:
HTML uses tags to wrap content and give it meaning. Tags look like this:
For example: <h1>This is a heading</h1>
Create a complete HTML document with all the essential elements every webpage needs.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>My First Webpage</title>
7 <style>
8 /* Simple styling to make our page look nice */
9 body {
10 font-family: Arial, sans-serif;
11 max-width: 800px;
12 margin: 0 auto;
13 padding: 20px;
14 background-color: #f5f7fa;
15 color: #333;
16 }
17
18 h1 {
19 color: #2c3e50;
20 text-align: center;
21 border-bottom: 3px solid #3498db;
22 padding-bottom: 10px;
23 }
24
25 h2 {
26 color: #34495e;
27 margin-top: 30px;
28 }
29
30 p {
31 line-height: 1.6;
32 margin-bottom: 15px;
33 }
34
35 .highlight {
36 background-color: #fff3cd;
37 padding: 15px;
38 border-left: 4px solid #ffc107;
39 margin: 20px 0;
40 }
41
42 .intro {
43 font-size: 1.1em;
44 font-style: italic;
45 text-align: center;
46 margin: 30px 0;
47 }
48 </style>
49</head>
50<body>
51 <!-- This is an HTML comment - browsers don't display comments -->
52
53 <h1>Welcome to My First Webpage! 🎉</h1>
54
55 <p class="intro">
56 This is my very first HTML document, and I'm excited to start learning web development!
57 </p>
58
59 <h2>About HTML</h2>
60 <p>
61 <strong>HTML</strong> (HyperText Markup Language) is the standard language for creating web pages.
62 It describes the structure and content of a webpage using a series of elements and tags.
63 </p>
64
65 <div class="highlight">
66 <p><strong>Fun Fact:</strong> The first website ever created is still online today!
67 It was made by Tim Berners-Lee in 1991 and you can visit it at
68 <em>info.cern.ch/hypertext/WWW/TheProject.html</em></p>
69 </div>
70
71 <h2>What I'm Learning</h2>
72 <p>In this HTML course, I will learn:</p>
73
74 <ul>
75 <li>How to structure web content with HTML tags</li>
76 <li>How to create headings, paragraphs, and lists</li>
77 <li>How to add links and images to web pages</li>
78 <li>How to create forms for user input</li>
79 <li>How to organize content with semantic HTML</li>
80 </ul>
81
82 <h2>My Learning Goals</h2>
83 <p>
84 By the end of this course, I want to be able to create beautiful,
85 well-structured websites that are accessible to everyone.
86 I'm committed to learning the fundamentals properly so I can build
87 amazing things on the web!
88 </p>
89
90 <h2>Let's Get Started!</h2>
91 <p>
92 This is just the beginning of my web development journey.
93 Every expert was once a beginner, and every pro was once an amateur.
94 Let's dive in and start creating!
95 </p>
96
97 <!-- Footer section -->
98 <footer style="margin-top: 50px; padding-top: 20px; border-top: 1px solid #ddd; text-align: center; color: #666;">
99 <p>Created with ❤️ while learning HTML fundamentals</p>
100 <p><small>This webpage was handcrafted with HTML and CSS</small></p>
101 </footer>
102</body>
103</html>This example shows the complete structure of an HTML document including the DOCTYPE declaration, html element, head section with meta tags and title, and body section with various content elements. Notice how each element has a specific purpose and contributes to the overall structure and meaning of the webpage.
Excellent work on creating your first HTML document! You now understand the basic structure that every webpage needs. Next, we'll dive deeper into the document head section and learn about meta tags, titles, and other important elements that help browsers and search engines understand your webpage better.
Your progress is saved in this browser, on this device only.