Complete HTML Guide for Beginners (Part 3)

Introduction

In Part 2, you learned about lists, tables, forms, and semantic HTML.

Now in Part 3, we’ll take your HTML skills to the next level by learning about multimedia, advanced forms, meta tags, and best practices used in real-world websites.

Adding Images Properly

You already used <img> in Part 1, but now let’s improve it:

<img src="image.jpg" alt="My Image" width="300" height="200">

Important Attributes:

src → Image path
alt → Description (important for SEO & accessibility)
width & height → Control image size

Adding Videos

HTML allows you to add videos directly:

<video width="400" controls>
  <source src="video.mp4" type="video/mp4">
</video>

controls adds play/pause buttons.

Adding Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Advanced HTML Forms

Now let’s improve forms with more inputs:

<form>
  Name: <input type="text"><br><br>
  
  Password: <input type="password"><br><br>
  
  Gender:
  <input type="radio" name="gender"> Male
  <input type="radio" name="gender"> Female<br><br>
  
  Skills:
  <input type="checkbox"> HTML
  <input type="checkbox"> CSS<br><br>
  
  <input type="submit" value="Submit">
</form>

Meta Tags (SEO Basics)

Meta tags help browsers and search engines understand your site.

<head>
  <title>My Website</title>
  <meta charset="UTF-8">
  <meta name="description" content="Learn HTML step by step">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Why important?

Helps SEO (Google ranking)
Makes your site mobile-friendly
Improves performance

Linking Pages Together

You can connect multiple pages:

<a href="about.html">Go to About Page</a>

This is how multi-page websites are built.

HTML Best Practices (VERY IMPORTANT)

Always use proper indentation
Use semantic tags (header, footer, etc.)
Add alt to images
Keep code clean and readable
Use lowercase tags

Mini Project (Practice)

Build this:

Create a small website with:

Home page
About page
Contact form
One image + one video

What’s Next?

➡️ Next: CSS Basics
➡️ Previous: HTML Advanced Concepts (Part 2)

You’ve completed HTML—now let’s move to styling and design!