DEV Community

Cover image for Day 3: Lists and Images in HTML
Dipak Ahirav
Dipak Ahirav

Posted on • Updated on

Day 3: Lists and Images in HTML

#html #css #javascript #beginners

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 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.

   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
Enter fullscreen mode Exit fullscreen mode

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.

   <ol>
       <li>First item</li>
       <li>Second item</li>
       <li>Third item</li>
   </ol>
Enter fullscreen mode Exit fullscreen mode

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

   <dl>
       <dt>Term 1</dt>
       <dd>Description of Term 1</dd>
       <dt>Term 2</dt>
       <dd>Description of Term 2</dd>
   </dl>
Enter fullscreen mode Exit fullscreen mode

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.

   <img src="image.jpg" alt="Description of the image">
Enter fullscreen mode Exit fullscreen mode

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

   <img src="image.jpg" alt="Description of the image" width="300" height="200">
Enter fullscreen mode Exit fullscreen mode

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

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

Creating Your HTML Document with Lists and Images

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (0)

Read next

ethand91 profile image

Creating a Face Swapping Application with Python and OpenCV

Ethan -

henriqueleite42 profile image

[WIP] JavaScript Vs Golang: Complexity

Henrique Leite -

mikeyoung44 profile image

Formalizing and Benchmarking Prompt Injection Attacks and Defenses

Mike Young -

franklivania profile image

Setting up twin.macro with Vite + React

Chibuzo Franklin Odigbo -