Chapters
HTML + CSS: Build Your First Web Page — A Beginner’s Practical Guide
📘 Chapter 1: Introduction to HTML — Structure, Tags, and Page Setup
👋 Welcome to HTML: The
Skeleton of Every Web Page
Every website you’ve ever visited—whether it’s Google,
Facebook, or your favorite blog—started with one thing: HTML.
HTML (HyperText Markup Language) is the standard
language used to create web pages. It tells your browser what content to
show and how to organize it.
This chapter will guide you through:
- What
HTML is and how it works
- Basic
page structure
- Most
commonly used tags
- How
to create and save your first HTML file
- Viewing
it in a browser
- Real-world
analogies and mini-projects to build confidence
Let’s start building your very first web page, one tag at a
time.
📚 What is HTML?
HTML stands for HyperText Markup Language.
- HyperText
means text that links to other documents (like web pages).
- Markup
Language means that you’re marking text with "tags" so
browsers know how to display it.
🔹 Key Purposes of HTML:
- Structure
content on a web page
- Define
text, images, links, buttons, lists, etc.
- Work
alongside CSS and JavaScript to create complete, styled, and
interactive websites
🧱 HTML Page Structure
Here is a basic template of a well-formed HTML document:
html
<!DOCTYPE
html>
<html>
<head>
<title>My First Web
Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first HTML
page.</p>
</body>
</html>
🔎 Code Explanation:
|
Element |
Purpose |
|
<!DOCTYPE
html> |
Declares this is an
HTML5 document |
|
<html> |
Root element
of the page |
|
<head> |
Contains metadata like
title, links to CSS/JS |
|
<title> |
Sets the page
name shown in the browser tab |
|
<body> |
Holds everything
visible on the webpage |
🔧 How to Set Up Your
First HTML File
✅ Step-by-Step:
- Open
a plain text editor (VS Code, Notepad, Sublime Text)
- Copy
this basic HTML template
- Save
the file as index.html
- Open
it in your browser (double-click the file or drag into browser window)
🏷️ Most Common HTML Tags
You Must Know
HTML uses tags—words inside angle brackets (<
>)—to define elements.
🔹 Basic Tags Table:
|
Tag |
Purpose |
Example |
|
<h1> to
<h6> |
Headings |
<h1>Big
Title</h1> |
|
<p> |
Paragraph |
<p>This
is text.</p> |
|
<a> |
Hyperlink |
<a
href="https://google.com">Google</a> |
|
<img> |
Image |
<img
src="pic.jpg" alt="description"> |
|
<ul>,
<ol>, <li> |
Lists |
<ul><li>Item</li></ul> |
|
<div> |
Container |
<div>Group
items here</div> |
|
<br> |
Line break |
Adds a blank line |
|
<strong> / <em> |
Bold / Italic |
<strong>Important</strong> |
🔸 Example: A Simple Web
Page
html
<!DOCTYPE
html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Hi, I'm Alex!</h1>
<p>Welcome to my portfolio
site.</p>
<img src="profile.jpg"
alt="My Picture" width="200">
<p>Check out my work on <a
href="https://github.com">GitHub</a>.</p>
</body>
</html>
💬 Semantic HTML:
Meaningful Markup
HTML5 introduced semantic tags, which describe what
the content is, not just how it looks.
|
Semantic Tag |
Purpose |
|
<header> |
Top of the page (logo,
nav) |
|
<nav> |
Navigation
bar |
|
<main> |
Main content area |
|
<section> |
Content
sections |
|
<article> |
Blog posts, articles |
|
<footer> |
Bottom area
(copyright, links) |
✅ These help with accessibility,
SEO, and readability.
🛠️ Mini Exercise: Create
a Personal Profile Page
Use the following structure to create your own profile page:
html
<!DOCTYPE
html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<p>Web Design Student</p>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I love building websites and
learning new things!</p>
</section>
<section>
<h2>Contact</h2>
<p>Email:
jane@example.com</p>
</section>
</main>
<footer>
<p>© 2025 Jane Doe</p>
</footer>
</body>
</html>
🔁 Best Practices for
Writing HTML
- Use lowercase
for all tag names
- Properly
indent nested elements
- Always
close your tags (except self-closing like <img> or
<br>)
- Use alt
text for images for accessibility
- Keep
your code clean and readable
🧪 Developer Tools Tip:
Right-click on any web page → select Inspect → you’ll
see the full HTML of that page. This is how you learn from real websites.
🎓 HTML Learning
Milestones
|
Milestone |
Skill Mastered |
|
✅ Create a page from scratch |
File creation,
structure |
|
✅ Use at least 10 different tags |
<h1>,
<p>, <a>, <img>, etc. |
|
✅ Understand semantic elements |
<header>,
<main>, <footer> |
|
✅ Save and preview changes in browser |
Live feedback
and testing |
📍 Summary
In this chapter, you’ve learned:
- What
HTML is and how it powers the web
- How
to structure a page using tags
- Basic
elements like headings, images, links, and lists
- How
to save and open your page
- Why
semantic HTML makes your site better
You’ve built the skeleton of a real webpage. In the
next chapter, we’ll give it style and personality using CSS.
FAQs
Q1: What is the difference between HTML and CSS?
A: HTML (HyperText Markup Language) is used to structure the content of a webpage—such as text, headings, links, and images. CSS (Cascading Style Sheets) is used to style that content—like setting colors, fonts, spacing, and layout.
Q2: Do I need to install any special software to write HTML and CSS?
A: No special software is required. You can use any text editor like Visual Studio Code, Sublime Text, or even Notepad. All modern browsers can render your HTML and CSS code.
Q3: Can I build a complete website with just HTML and CSS?
A: Yes, you can build a static website using only HTML and CSS. However, for interactive elements like animations or forms with validation, you'll eventually need JavaScript.
Q4: How do I view my HTML page in a browser?
A: After saving your file with a .html extension, simply double-click it or right-click and select “Open with” → your browser (e.g., Chrome, Firefox, Edge).
Q5: What is the best way to apply CSS to an HTML page?
A: The best practice is to use an external CSS file (linked with a <link> tag in the HTML <head>). This makes your code modular, clean, and easier to maintain.
Q6: Is it better to learn HTML and CSS before JavaScript?
A: Yes. HTML and CSS provide the structural and visual foundation of web development. Learning them first helps you understand how websites are built before adding interactivity with JavaScript.
Q7: How can I make my website responsive using HTML and CSS?
A: Use CSS media queries, flexbox, and relative units like percentages or em/rem to make your layout adapt to different screen sizes (e.g., desktop, tablet, mobile).
Q8: Can I host my HTML + CSS website online for free?
A: Yes! Platforms like GitHub Pages, Netlify, and Vercel allow you to host static sites (HTML/CSS/JS) for free with custom domains and version control.
Q9: What’s the difference between class and id in CSS?
A: An id targets a unique element using #idname, while a class can be reused across multiple elements using .classname. IDs should be unique per page; classes can apply styles to multiple elements.
Q10: Where can I find design inspiration and examples for HTML/CSS projects?
A: Websites like CodePen, Dribbble, Frontend Mentor, and CSS-Tricks offer great examples, templates, and challenges to inspire and improve your front-end design skills.
Explore Other Libraries
Please allow ads on our site
Please log in to access this content. You will be redirected to the login page shortly.
Login
Comments(0)