Week 3: Organizing Content with Lists and Images

Learn how to structure information using lists and embed visual media.

Explore Chapter 3

Chapter 3: Structuring Information and Adding Visuals

Organizing Information with Lists

HTML lists allow you to group related items together, making content easier to read and scan. There are three main types of lists:

1. Unordered Lists (<ul>)

Used for items where the order doesn't matter. Each item is typically marked with a bullet point.

<h4>Shopping List</h4>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

Renders as:

Shopping List

Milk
Bread
Eggs

2. Ordered Lists (<ol>)

Used for items where the sequence is important. Each item is typically marked with a number or letter.

You can use the `type` attribute to change the marker (e.g., `type="A"` for uppercase letters, `type="i"` for lowercase Roman numerals).

<h4>Instructions</h4>
<ol type="1"> <!-- type="1" is default -->
  <li>Preheat oven.</li>
  <li>Mix ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

<h4>Outline</h4>
<ol type="A">
  <li>Introduction</li>
  <li>Main Body</li>
  <li>Conclusion</li>
</ol>

Renders as:

Instructions

Preheat oven.
Mix ingredients.
Bake for 30 minutes.

Outline

Introduction
Main Body
Conclusion

3. Definition Lists (<dl>)

Used to define terms or display key-value pairs. Consists of terms (<dt>) and their descriptions (<dd>).

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - used for structuring web content.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for styling web content.</dd>
</dl>

Renders as:

HTML: HyperText Markup Language - used for structuring web content.
CSS: Cascading Style Sheets - used for styling web content.

Lists can also be nested within each other for more complex structures.

Embedding Images (<img>)

Images are embedded into HTML documents using the <img> tag. This is an empty tag, meaning it doesn't have a closing tag.

Basic Image Syntax

<img src="path/to/your/image.jpg" alt="Descriptive text about the image">

`src` Attribute (Source): This is mandatory and specifies the path (URL) to the image file. It can be a relative or absolute path.
`alt` Attribute (Alternative Text): This is mandatory for accessibility. It provides a textual description of the image for screen readers and is displayed if the image fails to load. Make it descriptive!

Example

<!-- Using a relative path -->
<img src="images/logo.png" alt="Our Company Logo">

<!-- Using an absolute path (external image) -->
<img src="https://placehold.co/200x100/F0DB4F/333?text=HTML+Image" alt="Placeholder image showing HTML Image text">

Result (placeholder example):

Placeholder image showing HTML Image text

Linking Images

You can make an image act as a link by wrapping the <img> tag within an <a> tag:

<a href="index.html">
  <img src="images/home-icon.png" alt="Go to Homepage">
</a>

Common Web Image Formats

Choosing the right image format is important for balancing quality and file size (which affects page load speed).

JPEG (or JPG): Best for photographs and complex images with lots of colors and gradients. It uses lossy compression (some quality is lost to reduce file size). Does not support transparency.
PNG (Portable Network Graphics): Best for graphics with sharp lines, text, logos, and images requiring transparency. Uses lossless compression (no quality loss). File sizes can be larger than JPEGs for complex images.
GIF (Graphics Interchange Format): Best for simple animations and graphics with limited colors (up to 256). Supports transparency (but not partial transparency like PNG). Often replaced by PNG for static images and video/CSS for animations.
SVG (Scalable Vector Graphics): An XML-based vector image format. Ideal for logos, icons, and illustrations that need to scale perfectly without losing quality (resolution-independent). Can be styled with CSS and manipulated with JavaScript.
WebP: A modern format developed by Google offering both lossy and lossless compression, often providing smaller file sizes than JPEG or PNG at similar quality. Browser support is widespread but not universal (check compatibility).

Consider the image content and requirements (transparency, animation, scalability) when selecting a format.

Image Attributes (`width` and `height`)

You can specify the dimensions of an image using the `width` and `height` attributes directly on the <img> tag.

<img src="images/photo.jpg" alt="A scenic photo" width="300" height="200">

Values are specified in pixels (the `px` unit is implied).
Providing `width` and `height` helps the browser reserve space for the image before it loads, reducing layout shifts as the page renders.

Important Note: While these attributes work, it is generally considered best practice to control image dimensions using CSS. CSS offers more flexibility, allows for responsive design (making images adapt to different screen sizes), and separates presentation (styling) from structure (HTML).

We will cover CSS styling in detail later, but for now, be aware that setting dimensions in HTML is possible but often overridden or better handled by CSS in modern web development.