Day 3: Lists and Images in HTML
Tags: html, css, javascript, beginners
Published: 2024-05-31 14:42:45

Welcome to Day 3 of your journey to mastering HTML and CSS! Today, we'll focus on how to create lists and add images to your web pages. By the end of this post, you'll be able to organize content using lists and enhance your pages with images.

please subscribe to my [YouTube channel](https://www.youtube.com/@DevDivewithDipak) to support my channel and get more web development tutorials.

#### Creating Lists in HTML

HTML provides several types of lists to organize content: unordered lists, ordered lists, and description lists.

1.**Unordered Lists**: Unordered lists are used for items that don’t require a specific order. They use the `<ul>` tag and list items are enclosed in `<li>` tags.

   ```html
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
   ```

2.**Ordered Lists**: Ordered lists are used for items that need to be in a specific order. They use the `<ol>` tag and list items are enclosed in `<li>` tags.

   ```html
   <ol>
       <li>First item</li>
       <li>Second item</li>
       <li>Third item</li>
   </ol>
   ```

3.**Description Lists**: Description lists are used to display a list of terms and their descriptions. They use the `<dl>`, `<dt>`, and `<dd>` tags.

   ```html
   <dl>
       <dt>Term 1</dt>
       <dd>Description of Term 1</dd>
       <dt>Term 2</dt>
       <dd>Description of Term 2</dd>
   </dl>
   ```

#### Adding Images in HTML

Images are an essential part of web content, making it more engaging and informative. The `<img>` tag is used to embed images in HTML.

1.**Basic Image**: Use the `src` attribute to specify the image source and the `alt` attribute to provide alternative text.

   ```html
   <img src="image.jpg" alt="Description of the image">
   ```

2.**Image Size**: You can specify the width and height of an image using the `width` and `height` attributes.

   ```html
   <img src="image.jpg" alt="Description of the image" width="300" height="200">
   ```

3.**Responsive Images**: To make images responsive, you can use CSS properties like `max-width` and `height`.

   ```html
   <style>
       img {
           max-width: 100%;
           height: auto;
       }
   </style>
   <img src="image.jpg" alt="Description of the image">
   ```

#### Creating Your HTML Document with Lists and Images

Let's create an HTML document that incorporates lists and images:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lists and Images</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <h2>Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <h2>Ordered List</h2>
    <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>

    <h2>Description List</h2>
    <dl>
        <dt>Term 1</dt>
        <dd>Description of Term 1</dd>
        <dt>Term 2</dt>
        <dd>Description of Term 2</dd>
    </dl>

    <h2>Adding an Image</h2>
    <img src="image.jpg" alt="A beautiful scenery">

    <p>This is an example of an image embedded in an HTML page.</p>
</body>
</html>
```

#### Summary

In this blog post, we learned how to create different types of lists and how to add images to an HTML document. Practice using these tags to organize your content and enhance your web pages with images.

Stay tuned for Day 4, where we will cover tables and their uses in HTML. Happy coding!

*Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!*

#### Follow and Subscribe:
- **Website**: [Dipak Ahirav] (https://www.dipakahirav.com)
- **Email**: dipaksahirav@gmail.com
- **Instagram**: [devdivewithdipak](https://www.instagram.com/devdivewithdipak)
- **YouTube**: [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak)
- **LinkedIn**: [Dipak Ahirav](https://www.linkedin.com/in/dipak-ahirav-606bba128)