HTML
Introduction to HTML
Discover what HTML is, why every website needs it, and build your first webpage for Alex's portfolio project.
What is HTML?
HTML stands for HyperText Markup Language. But what does that actually mean?
Think of HTML like the skeleton of a website. When you visit Google, Facebook, or any website, what you see is HTML code that your browser has turned into text, images, and clickable buttons. HTML tells the browser: "This is a heading. This is a paragraph. This is a link to another page."
Here's the key insight most beginners miss: HTML is not a programming language. You can't calculate numbers or create loops with HTML. HTML is a markup language — it marks up text to give it meaning and structure.
HTML Does
Structure content, create headings, paragraphs, links, images, forms
HTML Doesn't
Calculate, store data, create animations, handle user interactions
Every single website you've ever visited uses HTML. Google's search page? HTML. Netflix's movie grid? HTML with styling. Even mobile apps often use HTML inside them.
Why Learn HTML?
HTML is the foundation of web development. You cannot build websites without understanding HTML first. Here's why it matters:
Universal Foundation
React, Vue, WordPress — all generate HTML in the end
Career Requirement
Front-end, back-end, full-stack — all roles touch HTML
Fast to Learn
Master the basics in days, not months like JavaScript
Honestly, most people try to skip HTML basics and jump straight to frameworks. They always come back to learn HTML properly later. Don't make that mistake.
Meet Alex: Our Portfolio Project
Throughout this course, you'll help Alex, a junior web developer, build their first portfolio website. Alex needs four pages:
Alex's Portfolio Pages
index.html — Home page with intro, skills, and about section
projects.html — Grid of portfolio projects with descriptions
contact.html — Contact form for potential clients
blog.html — Blog layout for sharing knowledge
Every lesson teaches you HTML concepts by building parts of Alex's portfolio. By the end, you'll have a complete website and understand exactly how HTML works in real projects.
How HTML Works
HTML uses tags to mark up content. A tag is text surrounded by angle brackets, like <h1> or <p>.
Here's Alex's first line of HTML for their portfolio:
<!-- This creates the main heading for Alex's homepage -->
<h1>Hi, I'm Alex — Web Developer</h1>What just happened?
The browser saw <h1> tags and displayed the text as a large, bold heading. The comment (text between <!-- -->) is ignored by the browser.
Most HTML tags come in pairs: an opening tag like <h1> and a closing tag like </h1>. The closing tag has a forward slash before the tag name.
Tags vs Elements vs Attributes
Three terms you'll hear constantly. Here's the difference:
HTML Terminology
Element = the entire thing from opening tag to closing tag
Tags are the markup. Elements are the complete structure. Attributes provide extra information about elements.
Your First HTML Page
Every HTML page needs a basic structure. Here's the minimum HTML for Alex's homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Information about the page (not visible to users) -->
<meta charset="UTF-8">
<title>Alex's Portfolio - Web Developer</title>
</head>
<body>
<!-- Content visible to users goes here -->
<h1>Hi, I'm Alex — Web Developer</h1>
<p>Welcome to my portfolio website.</p>
</body>
</html>What just happened?
The browser read the HTML structure and displayed Alex's heading and paragraph. The title appears in the browser tab. Meta information in the head section helps browsers understand the page.
Try this: Save this code as index.html and open it in your browser. You'll see Alex's first webpage!
Breaking Down the Structure
Never skip the DOCTYPE
<!DOCTYPE html> must be the very first line. Without it, browsers use "quirks mode" and your HTML will display incorrectly. Always include it.
The <html> tag wraps everything. The <head> contains information about the page — title, character encoding, links to stylesheets. Users don't see head content directly.
The <body> contains everything users see — headings, paragraphs, images, links. This is where Alex's portfolio content lives.
Common Beginner Mistakes
Most people make these mistakes when starting with HTML. Avoid them and you'll learn faster:
Forgetting closing tags
Writing <h1>Title instead of <h1>Title</h1>. Always close your tags or the page structure breaks.
Mixing up angle brackets
HTML uses <> not [] or (). Only angle brackets create HTML tags.
Skipping the DOCTYPE
Every HTML page needs <!DOCTYPE html> as the first line. Modern browsers require it.
The good news? HTML is forgiving. If you make a mistake, the browser will try to display something. But learning the correct way from the start saves debugging time later.
Where to Practice
You need a place to write and test HTML. Here are the best options for beginners:
VS Code (Recommended)
Free code editor from Microsoft. Download from code.visualstudio.com. Install the "Live Server" extension for instant browser preview when you save HTML files.
CodePen (codepen.io)
Browser-based HTML editor. Type HTML and see results instantly. No downloads or setup required. Perfect for quick experiments.
JSFiddle (jsfiddle.net)
Similar to CodePen. Test HTML quickly in your browser. Share your code with others using a simple link. No account needed to start.
Replit (replit.com)
Full browser-based development environment. Create an HTML project and code online. Includes file management and hosting. Free tier available.
Best workflow: Write HTML in VS Code with the Live Server extension. Every time you save, the browser automatically refreshes to show your changes. This is the fastest way to learn HTML.
Quiz
1. Alex asks you to explain what HTML does. Which answer is most accurate?
2. What must be the very first line in every HTML document Alex creates?
3. In Alex's HTML code <h1 id="title">Portfolio</h1>, what is called an "element"?
Up Next
How the Web Works
Understand how browsers turn Alex's HTML files into websites that users can visit.