HTML (Hypertext Markup Language) - Complete Guide
HTML is the foundation of every website. It provides the structure of web pages using a system of tags.
🧠Logic Behind HTML
HTML structures content like headings, paragraphs, images, links, etc.
It does not style the page (CSS does that).
It does not add interactivity (JavaScript does that).
💡 Think of HTML as the skeleton of a building, CSS as the paint/design, and JavaScript as the electricity (functionality).
📌 Basic HTML Structure
<!DOCTYPE html> <!-- Declares the document as HTML5 -->
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Supports all languages -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title> <!-- Sets the title in browser tab -->
</head>
<body>
<h1>Welcome to My Website</h1> <!-- Main heading -->
<p>This is a paragraph.</p> <!-- A simple text block -->
<a href="https://google.com">Click Here</a> <!-- Hyperlink -->
</body>
</html>
🔹 HTML Tags & Their Use Cases
1. Structural Tags (Page Layout)
| Tag | Use Case |
<html> | The root element of an HTML page |
<head> | Contains metadata, title, and links to CSS/JS files |
<body> | Contains the visible content of the webpage |
<div> | A generic container used for styling/layout |
<span> | A small inline container (used for styling text) |
🔹 Example:
<div>
<h1>My Blog</h1>
<p>This is a sample blog post.</p>
</div>
2. Text Formatting Tags
| Tag | Use Case |
<h1> - <h6> | Headings (H1 is the largest, H6 is the smallest) |
<p> | Paragraphs |
<b>, <strong> | Bold text |
<i>, <em> | Italic text |
<u> | Underlined text |
<br> | Line break |
<hr> | Horizontal line (divider) |
🔹 Example:
<h1>Welcome</h1>
<p>This is <strong>important</strong> information.</p>
3. Lists (Ordered & Unordered)
| Tag | Use Case |
<ul> | Unordered list (bullet points) |
<ol> | Ordered list (numbered) |
<li> | List item (used inside <ul> or <ol>) |
🔹 Example:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ol>
<li>Step 1: Open the box</li>
<li>Step 2: Turn on the device</li>
</ol>
4. Links & Navigation
| Tag | Use Case |
<a href="URL"> | Creates a hyperlink |
target="_blank" | Opens link in a new tab |
🔹 Example:
<a href="https://google.com" target="_blank">Go to Google</a>
5. Images & Multimedia
| Tag | Use Case |
<img> | Displays an image |
<audio> | Embeds an audio file |
<video> | Embeds a video file |
🔹 Example:
<img src="image.jpg" alt="A sample image" width="300">
6. Tables (Data Representation)
| Tag | Use Case |
<table> | Defines a table |
<tr> | Table row |
<th> | Table header |
<td> | Table data cell |
🔹 Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
7. Forms (User Input)
| Tag | Use Case |
<form> | Defines a form |
<input> | Input field (text, password, etc.) |
<textarea> | Multi-line input field |
<select> | Dropdown menu |
<button> | Button |
🔹 Example:
<form action="submit.php" method="POST">
<input type="text" name="username" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
8. Semantic HTML (SEO & Accessibility)
All web pages are built using HTML | |
Blogs | Content management (WordPress, Blogger) |
Web Applications | HTML forms for data collection |
EmailsTag | Use Case |
|---|---|
| Defines the header of a page |
| Defines navigation links |
| Groups related content |
| Represents independent content (blog posts, news articles) |
| Sidebar content |
| Defines the footer of a page |
