1. List Tags in HTML

provides three types of lists:

✅ Unordered List ()

- Items are displayed with bullets().
- Types: disc (default), circle, square, none.

style="list-style-type: square;">
    Item 1
    Item 2
✅ **Ordered List (``)**
- Items are displayed in **numbers or letters**.
- Types: `1`, `A`, `a`, `I`, `i`.
type="I">
    Item 1
    Item 2
✅ **Description List (``)**

- Used for **terms and their descriptions**.

HTML
    HyperText Markup Language
✅ **Nested List**

Lists inside another list.

Tea
        
            Black Tea
            Green Tea

Image description

🎨 **2. Colors in HTML**

HTML provides different ways to define **colors**:

✅ **Named Colors**
style="color: red;">This is Red
✅ **Hex Colors (`#RRGGBB`)**
style="color: #ff0000;">This is Red
✅ **RGB Colors (`rgb(r, g, b)`)**
style="color: rgb(255, 0, 0);">This is Red
✅ **RGBA Colors (`rgba(r, g, b, alpha)`)**
style="color: rgba(255, 0, 0, 0.5);">This is Semi-Transparent Red
**HSL Colors (`hsl(hue, saturation, lightness)`)**
style="color: hsl(0, 100%, 50%);">This is Red
✅ **HSLA Colors (`hsla(h, s, l, a)`)**
style="color: hsla(0, 100%, 50%, 0.5);">This is Semi-Transparent Red

Image description

🔗 **3. Anchor (``) Tag in HTML**
✅ **Basic Link**
href="https://www.google.com">Visit Google
✅ **Open Link in a New Tab (`target="_blank"`)**
href="https://www.google.com" target="_blank">Open Google in New Tab
✅ **Internal Link (Same Website Page)**
href="about.html">Go to About Page
✅ **Email Link (`mailto:`)**
href="mailto:example@gmail.com">Send Email
✅ **Call Phone Number (`tel:`)**
href="tel:+1234567890">Call Us
✅ **Download File (`download`)**
href="file.pdf" download>Download File

Image description

### 🏹 **4. `target` Attribute in `` Tag**
target Value Description
_self Opens in same tab (default).
_blank Opens in new tab.
_parent Opens in parent frame (if inside an iframe).
_top Opens in full browser window, removing frames.
framename Opens inside a specific iframe. 
### ✅ **Example: Open Link in a New Tab**
href="https://www.google.com" target="_blank">Open in New Tab
### 🎵 **5. Audio & Video in HTML**
### ✅ **Audio Tag**
controls>
     src="audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
✅ **Video Tag**
width="560" height="315" controls>
     src="video-file.mp4" type="video/mp4">
    Your browser does not support the video tag.
### **HTML Images**

The tag is used to display images.

### ****✅ **Basic Image**
src="image.jpg" alt="A beautiful scenery">
🔹 **`src`** → Specifies the image file location.

🔹 **`alt`** → Alternative text (shown if the image fails to load).
### ✅ **Displaying an Online Image:**
src="https://example.com/image.jpg" alt="Example Image">
### ✅ **Image with Width & Height**
src="image.jpg" width="300" height="200" alt="Image">
### ✅ **Image with Title (Hover Text)**
src="image.jpg" title="This is an image" alt="Image">
### ✅ **Responsive Image (`max-width`)**
src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive Image">
### ✅ **Clickable Image (Wrapped in ``)**
href="https://www.google.com">
     src="google-logo.png" width="200" alt="Google Logo">
### ✅ **Lazy Loading Image (`loading="lazy"`)**
src="image.jpg" loading="lazy" alt="Lazy Load Image">

📌 Image Attributes in HTML

Attribute Description
src Specifies the image file path.
alt Alternative text (shown if image fails to load).
width Sets the image width.
height Sets the image height.
title Adds a tooltip when hovered.
loading lazy (loads when visible) or eager (loads immediately).

Image description

🎯 **Final Notes**
- Lists: ``, ``, `` for different types of lists.
- Colors: `named`, `hex`, `RGB`, `RGBA`, `HSL`, `HSLA`.
- `` tag: Used for **links, email, phone, downloads**.
- `target` attribute: `_self`, `_blank`, `_parent`, `_top`.++
- `` & `` for **media elements**.