In this guide, we will go step by step through the basics of HTML. We will show you how to create your first website in 2025 and share tips on modern best practices to make sure your site looks professional.
Why Learn HTML?
Think of a website like a house:
HTML = the walls and structure (skeleton)
CSS = the paint, furniture, and decoration
JavaScript = the electricity, doors, and gadgets
Without HTML, there’s no house at all! Every website starts with HTML.
What is HTML?
HTML stands for Hypertext Markup Language. It’s the skeleton of every website, telling your browser how to structure content.
Quick Setup (5 minutes)
Install VS Code
Download “Visual Studio Code” from the official site.
Open VS Code → Extensions (left sidebar):
Live Server (one-click local preview)
Prettier (auto-format your code)
Turn on format-on-save
· VS Code → Settings → search “format on save” → enable.
Create your project
· Make a folder: my-first-site/
· Inside it, create index.html
· In index.html, type ! and press Enter (Emmet) to get HTML5 boilerplate.
Starter Template (Copy–Paste)
<!DOCTYPE html> <!-- This tells the browser: "This is an HTML5 document". -->
<html lang="en">
<!-- Root element of the page. All other HTML code goes inside it. -->
<head>
<!--Contains page metadata (data about the page, not shown directly to users).-->
<meta charset="UTF-8" />
<!--Defines character encoding. 'UTF-8' supports almost all characters and symbols -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Makes the website responsive. -->
<title>Document</title>
<!-- Sets the text shown in the browser tab or window title. -->
</head> <!-- End of <head> section -->
<body>
<!--
<body>
Contains all the visible content of the webpage,
like headings, paragraphs, images, links, buttons, etc.
-->
</body> <!-- End of <body> section -->
</html> <!-- End of <html> document -->
Coach note: Right-click the file → Open with Live Server. Your page auto-reloads whenever you save.
File Paths (Super Short)
· ./file.jpg → in the same folder
· images/pic.jpg → in a child folder named images
· ../pic.jpg → go one folder up, then pic.jpg
Essential HTML Tags Every Beginner Should Know:
1) Headings & Paragraphs
Headings (<h1>–<h6>) give your site structure. Use them like book chapters.
<h1>My Portfolio</h1>
<h2>Projects</h2>
<h3>Weather App</h3>
<p>I build simple, fast websites and apps.</p>Beginner tips
· One meaningful <h1> per page.
· Keep order logical (h2 under h1, etc.).
· Paragraphs (<p>) are for… paragraphs, don’t stack <br> for spacing.
2) Links & Images
Links connect your site to the world, and images bring it to life.
<p>Read my blog: <a href="https://example.com">Visit My Blog</a></p>
<img src="https://picsum.photos/400" alt="Random placeholder image" width="300" />
<!-- You can also add image from your local computer -->
<img src="./folder/img.jpg" alt="Random placeholder image" width="300" />Tips
· Link text should say where it goes (avoid “Click here”).
· alt describes the image (for screen readers & when images fail).
· Use direct image URLs (not a page link).
3) Lists (Bullets & Numbers)
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul><h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Stretch</li>
<li>Coffee</li>
</ol>Coach note: Use lists anywhere you have groups of things: menus, features, steps.
4) Tables (For Data Only)
<h2>Team</h2>
<table>
<thead>
<tr><th>Name</th><th>Role</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>Designer</td></tr>
<tr><td>Bob</td><td>Developer</td></tr>
</tbody>
</table>Tip: The border attribute is old-school. Prefer CSS later:
5) Forms & Inputs
<h2>Subscribe</h2>
<form>
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<button type="submit">Subscribe</button>
</form>Tips
· label for must match input id (accessibility).
· Add name so the value actually has a key when submitted.
· Use specific types: email, password, number, etc.
6) Media (Video/Audio)
<video controls width="400" poster="poster.jpg">
<source src="movie.mp4" type="video/mp4" />
<!-- Add a WebM source if you have it -->
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg" /
</audio>
Tips
· controls lets users play/pause.
· Use a poster for videos (nice preview).
· Add multiple <source> for better compatibility.
7) <div>
· The <div> tag stands for “division” and is used to group content together.
· It doesn’t add any styling or meaning on its own, it’s just a container.
· Developers use <div> with CSS classes or IDs to style and organize sections of a webpage.
<div class="card">
<img src="https://picsum.photos/400" alt="Random placeholder image" width="300" />
<h1>Card title</h1>
<p>Card description here...</p>
<button> Buy Now</button>
</div>
Semantic Tags (Making HTML Meaningful)
If you want your website to rank on Google in 2025, follow these HTML SEO tips:
Include meta descriptions:
<meta name="description" content="This is ecommerce store">Use semantic tags (<header>, <main>, <footer>, <article>, <section>).
Instead of endless <div> tags, HTML5 introduced semantic tags:
Common Mistakes (and Fixes)
Forgetting closing tags à Use VS Code’s auto-complete + Prettier
Using <br> for spacing à Use <p> and CSS margins later
Random <div> soup à Use semantic tags (section/article/nav/footer)
Beginner Tips
· Don’t copy-paste code → type it yourself, even if slow.
· Use comments (<!-- -->) to remind yourself what a tag does.
· Break big pages into sections: header, content, footer.
· Experiment → change values, add text, remove tags, and see what happens.
· Build confidence by creating mini-projects (notebooks, portfolios, forms).
Spot the Bug (2-minute Fix)
What’s wrong here? Find 5 issues.
<h1>My Site
<h3>About</h2>
<p>Welcome!<br><br><br>I'm learning HTML.
<img src="about" alt="">
<a href="clickhere.com">Click here</a>Answers
1. <h1> not closed.
2. <h3> closes with </h2> (mismatch).
3. Too many <br> for spacing → use <p>/CSS.
4. img src="about" has no file extension/path.
5. Link text “Click here” is not descriptive; URL missing protocol (https://).
Fixed
<h1>My Site</h1>
<h2>About</h2>
<p>Welcome! I’m learning HTML.</p>
<img src="./images/about.jpg" alt="Portrait of me" />
<p>Read more on <a href="https://example.com/about">my about page</a>.</p>
Build the Skeleton First (Pro Workflow)
1. Sketch sections (header / hero / features / pricing / footer).
2. Create them with semantic tags (no CSS yet).
3. Add content inside each section.
4. Preview with Live Server.
5. Only then style with CSS (next lesson).
Final Advice:
· Be patient, web development is a skill, not a race.
· Mistakes are normal. Every error teaches you something.
· Stick with the rule: Learn → Practice → Build → Repeat
FAQs
1. How long does it take to learn HTML?
Most beginners can grasp the basics within a week of practice.
2. Do I need coding experience to learn HTML?
Nope! HTML is beginner-friendly and requires no prior experience.
3. What’s the difference between HTML and CSS?
HTML structures content, while CSS makes it look good.
4. Can I build a website with only HTML?
Yes, but it’ll look plain. Add CSS and JavaScript for design and functionality.
5. What projects should I try as a beginner?
Start with a portfolio page, a simple blog, or a “contact me” form.
Join the conversation
Sign in to share your thoughts and engage with other readers.
No comments yet
Be the first to share your thoughts!