🔰 What is HTML?
HTML (HyperText Markup Language) is the backbone of all websites. It is used to create the structure and layout of web pages using elements and tags.
HTML doesn't define how the content looks—that's CSS—but it tells the browser what the content is.
🏗️ Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
What Each Part Does:
| Tag |
Description |
<!DOCTYPE html> |
Tells the browser this is an HTML5 document |
<html> |
Root element that wraps the whole document |
<head> |
Metadata like <title>, CSS, favicon, etc. |
<title> |
Text shown in browser tab |
<body> |
Everything visible on the screen |
HTML Tags and Their Purpose
| Tag |
Purpose |
<h1> to <h6> |
Headings from largest to smallest |
<p> |
Paragraph |
<strong> |
Bold text |
<em> |
Italic text |
<br> |
Line break |
<hr> |
Horizontal line |
HTML Tags and Their Purpose
HTML uses tags to define elements. Tags come in pairs like
or can be self-closing like.
| Tag |
Purpose |
<h1> to <h6> |
Headings from largest to smallest |
<p> |
Paragraph |
<strong> |
Bold text |
<em> |
Italic text |
<br> |
Line break |
<hr> |
Horizontal line |
Links and Media
| Tag |
Purpose |
<a href=""> |
Adds a hyperlink |
<img src=""> |
Embeds an image |
<video> |
Embeds a video |
<audio> |
Embeds audio |
<iframe> |
Embeds external pages or media (like YouTube) |
Lists and Tables
| Tag |
Purpose |
<ul> |
Unordered list |
<ol> |
Ordered list |
<li> |
List item |
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Siddharth</td>
<td>25</td>
</tr>
</tbody>
</table>
| Tag |
Purpose |
<table> |
Defines a table |
<thead> |
Table header section |
<tbody> |
Table body section |
<tr> |
Table row |
<th> |
Table header cell |
<td> |
Table data cell |
Layout and Containers
| Tag |
Purpose |
<div> |
Block-level container (used for layout) |
<span> |
Inline container (used for styling part of text) |
<section> |
Defines a section |
<article> |
Self-contained content like a blog post |
<header> |
Header of a section/page |
<footer> |
Footer of a section/page |
<nav> |
Navigation links |
<main> |
Main content of the page |
Example: Image, Link, and Paragraph
<h2>Learn More</h2>
<p>Click the link below to visit our site:</p>
<a href="https://www.dilkibhakti.in" target="_blank">Visit Dil Ki Bhakti</a>
<br /><br />
<img src="https://via.placeholder.com/200" alt="Sample Image" />
Practice Project
<html>
<head>
<title>My First HTML Project</title>
</head>
<body>
<h1>HTML Basics</h1>
<p>This is a paragraph about learning HTML.</p>
<h2>List of Topics:</h2>
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Links</li>
<li>Images</li>
<li>Tables</li>
</ul>
<h2>My Favorite Site</h2>
<a href="https://www.dilkibhakti.in">Click here</a>
<h2>Sample Image:</h2>
<img src="https://via.placeholder.com/150" alt="Demo Image" />
</body>
</html>
Conclusion
HTML is the first step to becoming a web developer. It forms the structure of every website, and learning how to use tags correctly is essential.
Explore more HTML5 tags like:
<form> (for input forms)
<input> (text fields, checkboxes, etc.)
<button> (clickable buttons)
<meta> (SEO and metadata)