Ready to learn HTML quickly and effectively? This guide covers everything you need—from structure to semantics—with code snippets and explanations for every tag.
Want the full beginner-to-pro HTML, CSS & JavaScript ebook?
Grab it here: codewithdhanian.gumroad.com/l/ydhfb
1. Basic HTML Structure
This is the boilerplate code to start any HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
2. Head Elements
Used to include metadata, styles, and scripts.
<head>
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<style>
body { font-family: Arial, sans-serif; }
</style>
<script src="app.js" defer></script>
</head>
3. Text Formatting Tags
<h1>Main Heading</h1>
<p>This is a <strong>bold</strong> and <em>italic</em> sentence.</p>
<mark>Highlighted text</mark>
<small>Smaller font</small>
<blockquote>"This is a quoted text."</blockquote>
<hr>
<br>
4. Lists: Ordered, Unordered & Description
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
5. Links and Anchor Tags
<a href="https://google.com" target="_blank">Open Google</a>
<a href="resume.pdf" download>Download Resume</a>
<a href="mailto:you@example.com">Email Me</a>
6. Images with Attributes
<img src="photo.jpg" alt="A scenic view" width="400" loading="lazy">
7. Tables: Structuring Data
<table border="1">
<thead>
<tr><th>Product</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Pen</td><td>$1</td></tr>
<tr><td>Notebook</td><td>$2</td></tr>
</tbody>
</table>
8. Forms: Collecting Input
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<label for="msg">Message:</label>
<textarea id="msg" name="message" rows="4"></textarea>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<button type="submit">Submit</button>
</form>
9. Embedding Media
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
10. Semantic HTML Tags
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<main>
<section>
<article>
<h2>Article Title</h2>
<p>This is a blog post.</p>
</article>
</section>
</main>
<footer>
<p>© 2025 My Blog</p>
</footer>
11. Inline vs Block Elements
- Block elements start on a new line.
<div>This is a block-level element.</div>
<p>Paragraph is also block-level.</p>
- Inline elements do not start on a new line.
<span>This is inline</span>
<a href="#">Link is also inline</a>
12. Global Attributes
<div id="main" class="container" data-user="123" hidden lang="en" style="color:blue;"></div>
13. Deprecated Tags (Avoid These!)
<!-- These are outdated and should NOT be used -->
<center>Centered Text</center>
<font color="blue">Old Way of Styling</font>
<bgsound src="music.mid"> <!-- Deprecated -->
14. Accessibility & SEO Tips
- Use
<alt>on images:
<img src="logo.png" alt="Company Logo">
- Use headings logically:
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
- Use ARIA roles if needed:
<nav role="navigation">...</nav>
BONUS: Get the Full eBook
This article is just the tip of the iceberg.
Unlock your full potential with "HTML, CSS & JavaScript for Web Developers"
Packed with examples, practice projects, and cheat sheets for rapid learning!
Download Now:
codewithdhanian.gumroad.com/l/ydhfb
Top comments (1)
Nice 👏