HTML Basics: The Foundation of Web Development
"If a website is a house, HTML is its foundation. You can't see it, but everything stands because of it."
✨ What is HTML?
HTML (HyperText Markup Language) is not a programming language, but a markup language. Its function? To structure content on web pages. So HTML tells the browser:
"Hey bro, this is a title, this is a paragraph, this is an image, this is a login button."
📌 Not a Programming Language because:
- No logic like
if,else,loop - Can't calculate or create dynamic actions
- Only for marking and wrapping content
🧩 Basic HTML Terms
| Term | Simple Explanation |
|---|---|
| Element | Main HTML component, usually starts and ends with tags. Example: <p>Hello</p> |
| Tag | Structure markers. There are opening <p> and closing </p> tags. |
| Attribute | Additional info inside tags. Example: type="text" in <input>. |
| Property | Usually used in CSS/JS for styling or scripting, not directly in HTML. |
| Content | Text between opening and closing tags. Example: "Hello" in <p>Hello</p>. |
🔖 Meta Tags: So Browsers Don't Misunderstand
Meta tags are like secret instructions given to the browser before the web page appears.
🧠 Meta Tag Examples:
| Tag | Function |
|---|---|
<meta charset="UTF-8"> |
Ensures all characters, emojis, and symbols display correctly. |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Makes the page responsive on phones, tablets, laptops, etc. |
Why Put Them in <head>?
Because browsers read the <head> section first. So important info like this needs to be given upfront.
Meta tags are like giving a briefing to the browser: "Okay, this is how to display my page."
🎨 Text Formatting
HTML can also help you style text!
| Tag | Function |
|---|---|
<b>/<strong> |
Bold text like your feelings for them |
<i>/<em> |
Italic text, good for emphasis |
<u> |
Underline |
<sup> |
Small text above, example: 22 |
<sub> |
Small text below, example: H2O |
<br> |
Line break |
🔗 Anchor (Links): Web Portals
The <a> tag is like a teleport door. Click it, and you're somewhere else.
<a href="https://google.com" target="_blank">Search on Google</a>| Attribute | Function |
|---|---|
href |
Link destination |
target="_blank" |
Open link in new tab (so it doesn't leave your page) |
🌀 Click link = teleport to another world.
🖼️ Images
HTML can display images using the <img> tag.
<img src="image.jpg" alt="Cute Cat Picture">| Attribute | Function |
|---|---|
src |
Image address (online/offline) |
alt |
Image description (for accessibility and SEO) |
📌 alt is super important. If the image fails to load, this text becomes the savior.
📊 Tables
Tables are used to display organized data in rows and columns.
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Syifa</td>
</tr>
</tbody>
</table>| Attribute | Function |
|---|---|
<table> |
Start creating a table |
<tr> |
Table row |
<th> |
Column header |
<td> |
Table data |
