Lecture 4 — Lists, Links & Images

Ordered List — <ol> & CSS list-style-type: upper-roman

An ordered list uses <ol> with <li> items. The default marker is decimal (1, 2, 3…). The CSS property list-style-type changes the marker style. When applied to the li selector in a linked stylesheet, it affects all list items on the page.

CSS (Lect4.css)

li {
  list-style-type: upper-roman;
}

HTML

<ol>
  <li>Notebook</li>
  <li>Ballpen</li>
  <li>Yellow Paper</li>
</ol>

Output

Notebook
Ballpen
Yellow Paper

Ordered List — Inline list-style-type Values

The list-style-type property can also be set as an inline style attribute on individual <li> elements. Common values include lower-roman (i, ii, iii…) and decimal (1, 2, 3…).

lower-roman

<ol>
  <li style="list-style-type: lower-roman;">Notebook</li>
  <li style="list-style-type: lower-roman;">Ballpen</li>
  <li style="list-style-type: lower-roman;">Yellow Paper</li>
</ol>

Output — lower-roman

Notebook
Ballpen
Yellow Paper

decimal

<ol>
  <li style="list-style-type: decimal;">Notebook</li>
  <li style="list-style-type: decimal;">Ballpen</li>
  <li style="list-style-type: decimal;">Yellow Paper</li>
</ol>

Output — decimal

Notebook
Ballpen
Yellow Paper

Ordered List — type & start Attributes

The type attribute sets the marker kind: A (uppercase letters), a (lowercase), I (uppercase Roman), i (lowercase Roman), or 1 (decimal). The start attribute sets the counter's starting value regardless of type.

Code — type="A" start="10"

<ol type="A" start="10">
  <li>Notebook</li>
  <li>Ballpen</li>
  <li>Yellow Paper</li>
</ol>

Output

Notebook
Ballpen
Yellow Paper

With type="A" and start="10", the list begins at the 10th letter of the alphabet — J. The start value is always an integer, even when using letter or Roman numeral types.

Ordered List — CSS Class & value Attribute

A CSS class can set list-style-type for a specific list only. The value attribute on an individual <li> overrides the counter for that item and all subsequent items, letting you create non-sequential numbering.

CSS (Lect4.css)

.loweralpha-list {
  list-style-type: lower-alpha;
}

HTML

<ol class="loweralpha-list"
    start="2">
  <li>Notebook</li>
  <li value="5">Ballpen</li>
  <li>Yellow Paper</li>
</ol>

Output

Notebook
Ballpen
Yellow Paper

Starting at start="2" → b. The value="5" jumps the counter to e, so the third item renders as f. This shows how start and value work together.

Unordered List — <ul> & list-style-type

An unordered list uses <ul> and renders bullet markers by default. Three common list-style-type values are disc (●, default), circle (○), and square (■).

Code

<!-- disc (default) -->
<ul style="list-style-type: disc;">
  <li>Coffee</li>  <li>Tea</li>
</ul>

<!-- circle -->
<ul style="list-style-type: circle;">
  <li>Coffee</li>  <li>Tea</li>
</ul>

<!-- square -->
<ul style="list-style-type: square;">
  <li>Coffee</li>  <li>Tea</li>
</ul>

Output

disc

Coffee
Tea

circle

Coffee
Tea

square

Coffee
Tea

Nested Lists

Lists can be nested inside one another by placing a new <ul> or <ol> inside an <li> element. This creates hierarchical structures like outlines or multi-level menus.

Code

<ul>
  <li>School Supplies
    <ul>
      <li>Notebook</li>
      <li>Ballpen</li>
    </ul>
  </li>
  <li>Electronics
    <ol>
      <li>Laptop</li>
      <li>Phone</li>
    </ol>
  </li>
</ul>

Output

School Supplies
- Notebook
- Ballpen
Electronics
1. Laptop
2. Phone

Anchor Tag — <a href>

The <a> (anchor) element creates a hyperlink. The href attribute specifies the URL destination. The link text placed between the opening and closing tags is what the user clicks. URLs can be absolute (full URL) or relative (path within the same site).

Code

<!-- Absolute URL -->
<a href="https://www.w3schools.com">
  Visit W3Schools
</a>

<!-- Relative URL -->
<a href="gallery.html">
  Go to Gallery
</a>

Output

Visit W3Schools Go to Gallery

Anchor Tag — target Attribute

The target attribute controls where the linked document opens. _blank opens in a new tab or window, while _self (the default) opens in the same frame. Other values include _parent and _top for frameset navigation.

Code

<!-- Opens in a new tab -->
<a href="https://www.w3schools.com"
   target="_blank">
  Open in New Tab
</a>

<!-- Opens in same tab (default) -->
<a href="https://www.w3schools.com"
   target="_self">
  Open in Same Tab
</a>

Output

Open in New Tab Open in Same Tab

When using target="_blank", it is good practice to also add rel="noopener noreferrer" for security, preventing the new page from accessing the original window via window.opener.

Email Link — href="mailto:"

Setting href to a mailto: URL creates a link that opens the user's default email application with the To field pre-filled. You can also pre-fill the subject using ?subject=.

Code

<a href="mailto:someone@example.com">
  Send Email
</a>

<!-- With a subject line -->
<a href="mailto:someone@example.com?subject=Hello">
  Email with Subject
</a>

Output

Send Email Email with Subject

Image — <img>

The <img> tag is a void (self-closing) element that embeds an image. The src attribute holds the image URL or path. The alt attribute provides alternative text for accessibility and displays when the image cannot load. width and height control its dimensions.

Code

<img
  src="image1.jpg"
  alt="A sample image"
  width="300"
  height="200"
/>

Output

Always include the alt attribute. Screen readers read it aloud for visually impaired users, and it appears in place of the image if the file is missing or the URL is broken.

Figure & Caption — <figure> & <figcaption>

The <figure> element wraps self-contained content like images, diagrams, or code. <figcaption> provides a caption and is placed as the first or last child of <figure>. Together they semantically tie an image to its description.

Code

<figure>
  <img src="image1.jpg"
       alt="Subaru Impreza"
       width="300"/>
  <figcaption>
    FIGURE CAPTION: Sample image caption.
  </figcaption>
</figure>

Output

Sample image — **FIGURE CAPTION:** A sample image with a descriptive caption tied using <figure> and <figcaption>.

HTML Lists

Links & Images