Basic HTML Boilerplate
This is the starter template for almost every website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my website.</p>
</body>
</html>
Let’s break this down super simply.
<!DOCTYPE html>
This tells the browser:
👉 “This is an HTML website. Handle it properly.”
<html>
This is the main container.
Everything on the website lives inside this tag.
</html>
This just says:
👉 “That’s the end of the website.”
<head>
This is the behind-the-scenes part.
Users don’t see this, but the browser needs it.
<meta charset="UTF-8">
This tells the browser how to read characters.
So text doesn’t turn into weird symbols.
<title>
This is the name of the page you see on the browser tab.
</head>
Ends the hidden setup part.
<body>
This is the visible part of the website.
Anything users see goes here.
<h1>
This is a big heading.
Used for the main title of the page.
<p>
This is normal text.
Used for paragraphs and descriptions.
</body>
This means:
👉 “No more visible content after this.”
Some HTML tags I’ve learned 👇
Below are important HTML tags with simple explanations and examples.
1️⃣ <html>
Holds the entire website.
<html>
...
</html>
Without this, the browser doesn’t know what it’s looking at.
2️⃣ <head>
Stores browser-related info (not visible).
<head>
<title>My Site</title>
</head>
3️⃣ <title>
Shows text on the browser tab.
<title>Home Page</title>
4️⃣ <body>
Contains everything users can see.
<body>
<h1>Hello</h1>
</body>
5️⃣ <h1>
Main heading of the page.
<h1>Welcome</h1>
Use only one <h1> per page.
6️⃣ <h2>
Section heading.
<h2>About Me</h2>
7️⃣ <p>
Normal paragraph text.
<p>This is a paragraph.</p>
8️⃣ <a>
Creates a clickable link.
<a href="https://google.com">Go to Google</a>
Click → go somewhere else.
9️⃣ <img>
Displays an image.
<img src="cat.jpg" alt="A cat">
No closing tag.
alt is important for accessibility.
🔟 <button>
Creates a clickable button.
<button>Click me</button>
Used for actions.
1️⃣1️⃣ <div>
A container to group elements.
<div>
<p>Hello</p>
</div>
Does nothing by itself — mainly used for layout.
1️⃣2️⃣ <span>
Inline container for small content.
<p>Hello <span>world</span></p>
Useful for styling specific words.
1️⃣3️⃣ <header>
Top part of a page or section.
<header>
<h1>My Website</h1>
</header>
1️⃣4️⃣ <nav>
Holds navigation links.
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
Menus belong here.
1️⃣5️⃣ <main>
Main content of the page.
<main>
<p>Main content</p>
</main>
Only one <main> per page.
1️⃣6️⃣ <section>
Groups related content.
<section>
<h2>Services</h2>
</section>
1️⃣7️⃣ <article>
Independent, reusable content.
<article>
<h2>Blog Post</h2>
</article>
Can stand on its own.
1️⃣8️⃣ <footer>
Bottom part of a page or section.
<footer>
<p>© 2025</p>
</footer>
1️⃣9️⃣ <ul>
Unordered (bullet) list.
<ul>
<li>Apple</li>
</ul>
2️⃣0️⃣ <li>
List item.
<li>Banana</li>
Always inside <ul> or <ol>.
2️⃣1️⃣ <form>
Wraps user input fields.
<form>
...
</form>
Used for login, signup, contact forms.
2️⃣2️⃣ <label>
Label for an input field.
<label>Name</label>
Helps usability and accessibility.
2️⃣3️⃣ <input>
Takes user input.
<input type="text">
Text, password, email, checkbox, etc.
2️⃣4️⃣ <textarea>
Multi-line text input.
<textarea></textarea>
Used for messages.
2️⃣5️⃣ <select>
Dropdown menu.
<select>
<option>Red</option>
</select>
2️⃣6️⃣ <option>
Item inside a dropdown.
<option>Blue</option>
2️⃣7️⃣ <table>
Creates a table.
<table>
...
</table>
2️⃣8️⃣ <tr>
Table row.
<tr>
...
</tr>
2️⃣9️⃣ <th>
Table heading cell.
<th>Name</th>
Bold by default.
3️⃣0️⃣ <td>
Table data cell.
<td>Munin</td>
This is all what I had learned in Html, some basic tags..
just enough to build the structure of any webpage.
And, also I had build some practise projects in order to get better understanding..
Html is easy to learn, as its is straight forward..
This tag for this purpose...
Top comments (0)