1HTML Basics & Structure
What Is HTML?
HTML (HyperText Markup Language) is the skeleton of every website you’ve ever visited. It defines the structure and meaning of content on the web, from text and images to links and buttons. While CSS handles how things look and JavaScript handles how things behave, HTML decides what things are.
The Anatomy of a Web Page
Every HTML document starts with a declaration and a few core tags that tell the browser what’s inside and how to render it. Here’s the minimal structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>| Tag | Purpose |
|---|---|
| <!DOCTYPE html> | Tells the browser this is an HTML5 document |
| <html> | Wraps all the content of the page |
| <head> | Contains metadata (information *about* the page) |
| <body> | Holds the visible content shown in the browser |
Head vs Body: What’s the Difference?
The <head> tag holds instructions for the browser, things users don’t see directly, like the page title, description, and linked stylesheets or scripts. The <body> is where your visible content lives: text, images, links, forms, etc.
<head>
<title>Portfolio</title>
<meta name="description" content="Welcome to my first HTML project!">
</head>
<body>
<h1>About Me</h1>
<p>I’m learning HTML, and this is my first section of content!</p>
</body>Understanding Metadata
Metadata provides context about your webpage to search engines, social networks, and browsers. For example, <meta charset="UTF-8"> ensures your text displays properly across all languages, and <title> defines what appears in your browser tab.
Mini Project Step 1: Your First Web Page
Create a new file called index.html. Using the structure you just learned, build your very first webpage with a title, a heading, and a short paragraph describing what this site will become. Save it and open it in your browser to see your work come to life!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My HTML Journey</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is the beginning of my web development journey.</p>
</body>
</html>