Lesson 2 - HTML for Beginners: Learn the Building Blocks of Web Development

If you're starting your web development journey, mastering HTML is your first major step. In this beginner-friendly guide, we’ll walk you through the fundamentals of HTML and help you write your very first web page.

WEB DEVELOPMENT

Leonardo Gomes Guidolin

4/9/20251 min read

🧠 What Is HTML?

HTML stands for HyperText Markup Language. It’s the standard language used to create the structure of web pages.

Think of HTML as the skeleton of a website — it tells the browser how to display content like text, images, links, and more.

🔤 Basic HTML Structure

Every HTML document follows a simple structure:

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is a paragraph of text.</p>

</body>

</html>

Let’s break it down:

  • <!DOCTYPE html> tells the browser this is an HTML5 document.

  • <html> is the root of the page.

  • <head> contains metadata like the page title.

  • <body> contains the visible content.

🔑 Must-Know HTML Tags

Here are some essential tags every beginner should know:

<h1> to <h6> Headings, from biggest to smallest

<p>Paragraphs

<a>Hyperlinks

<img>Images

<ul>, <ol>, <li>Lists (unordered, ordered, items)

<div>Generic container (layout)

<span>Inline container

<br>Line break

🖼️ Example: HTML Page with Text, Image, and Link

<!DOCTYPE html>

<html>

<head>

<title>About Me</title>

</head>

<body>

<h1>Hello! I'm Jane</h1>

<p>I love coding and coffee ☕</p>

<img src="profile.jpg" alt="My photo" width="200">

<p>Visit my <a href="https://codeforbeginners.blog">blog</a></p>

</body>

</html>

🎯 SEO Tips for HTML

  1. Use proper heading hierarchy (<h1>, then <h2>, etc.)

  2. Add alt text to images for accessibility and SEO

  3. Use meaningful titles inside <title> tags

  4. Structure content clearly with semantic tags (<article>, <section>, <nav>, etc.)

🚀 What’s Next?

After mastering HTML, the next step is learning CSS, which controls how your HTML looks.

👉 Stay tuned for our next post: "CSS Basics: How to Style Your First Web Page"

✅ Final Thoughts

HTML is easy to learn and absolutely essential for any aspiring web developer. With just a few lines of code, you can start building your own websites today!

Follow codeforbeginners.blog for more tutorials, guides, and beginner projects to boost your web development journey.