📄 README.md – Interactive HTML Tags Tutorial

# 🚀 Interactive HTML Tags & Elements Tutorial

Welcome to the 
**HTML Tags Tutorial** – 
A comprehensive, beginner-friendly project that
showcases all major HTML tags, attributes, 
elements, and form controls in one clean, 
readable, and interactive page.

📚 **Built by:** Sahiko  
🎨 **Styled with:** Pure CSS (responsive design)  
---

## 📋 Table of Contents

- [📘 About]
- [🧠 What You'll Learn]
- [🔍 Tag Categories]
- [🧪 Forms in Action]
- [📊 Tables & Lists]
- [💡 Styling & Layout]
- [📄 License]

---

## 📘 About

This project is a 
**fully commented HTML page** 
that introduces:

- Core HTML syntax
- Semantics of elements
- Attribute usage
- Inline and block-level tags
- Styling using clean and modern CSS

Ideal for:
- 🔰 Beginners
- 🎓 Students
- 👨‍💻 Aspiring web developers

---

## 🧠 What You'll Learn

✅ Headings from `<h1>` to `<h6>`  
✅ Paragraphs and horizontal lines  
✅ Links with `target` attribute  
✅ Images and image links  
✅ Text styling tags:`<b>`,`<i>`,`<mark>` etc.
✅ Containers like `<div>`  
✅ Font resizing with `<BIG>` and `<small>`  
✅ Code display with `<pre>`  
✅ Lists: `<ul>`, `<ol>`, `<li>`  
✅ Tables: `<table>`, `<tr>`, `<th>`, etc.
✅ Full form elements with validation and labels

---

## 🔍 Tag Categories

### 📎 **Links & Anchors**

```html
<a href="https://www.google.com" target="_main">go to google</a>
Opens Google in a new tab using the `target="_main"` attribute.

---

🖼️ Images

<img src="image.jpg" alt="image">

And image that redirects to Google:

<a href="https://www.google.com">
    <img src="image.jpg" alt="image">
</a>

---

🖊️ Text Formatting

<b>Bold</b>
<i>Italic</i>
<mark>Highlighted</mark>
<del>Deleted</del>
<ins>Inserted (underlined)</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
<small>Small text</small>
<strong>Strong emphasis</strong>
<u>Underlined text</u>

---

🧪 Forms in Action

<form>
  <input type="text" required>
  <input type="email" required>
  <input type="radio" name="section">
  <input type="checkbox" name="subscribe">
  <select><option>Options...</option></select>
  <textarea></textarea>
  <input type="file">
  <input type="date">
  <input type="time">
</form>

➡️ Includes required, accept, name, value, and id/for linking with <label> for accessibility.

---

📊 Tables & Lists

🗂️ Unordered List

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

🔢 Ordered List

<ol>
  <li>JavaScript</li>
  <li>Python</li>
</ol>

📅 Tables withrowspan,colspan,and<caption>

<table>
  <caption>Student Info</caption>
  <tr><th>First Name</th><th>Last Name</th></tr>
  <tr><td>John</td><td>Doe</td></tr>
</table>

---

💡 Styling & Layout

The style.css uses:

• Responsive design
• Clean fonts
• Gradient backgrounds
• Styled forms, buttons, and tables
• Media queries for mobile screens

---

📄 License

This project is licensed under the Creative Commons Attribution-NoDerivatives 4.0 International License (CC BY-ND 4.0).

You may copy and share this project freely, but modification is not allowed. Always credit the author Sahiko.

---

🤝 Contributions

This project is primarily for learning. Feel free to fork it, but please do not redistribute modified versions under the same name.

---

🙌 Happy Learning!

Explore the index.html file and learn HTML from real-world examples, step-by-step. If you like it, ⭐️ star the repo and share it with your friends!