Tishk International University

Faculty of Engineering
Computer Engineering Department

Lists, Figures, and Various

Organizational Elements

Musa M. Ameen
Web Programming I (CMPE 341)
5
Week 5
Fall 2024/25
Outline
✓ Unordered Lists
✓ Symbols for Unordered List Items
✓ Descendant Selectors
✓ Ordered Lists
✓ Figure with an Image
✓ Organizational Elements
✓ display property
✓ Child Selectors

2
Objectives
✓ Implement a list with items that are unordered (e.g., use bullets for list items).
✓ Understand the concept of a nested list and be able to implement a nested list.
✓ Understand the syntax and semantics for a descendant selector.
✓ Implement a list with items that are ordered (e.g., use letters or numbers for list
items).
✓ Implement a figure with a picture and a caption.
✓ Understand the purpose of organizational elements like section, article, and aside.
✓ Implement a navigation bar using nav and a elements.
✓ Implement headers and footers.
✓ Be familiar with a user agent style sheet.
✓ Understand the syntax and semantics for a child selector.
3
Main Textbook Source
Web Programming with HTML5, CSS, and JavaScript, John Dean

✓ Chapter 4 Organizing a Page’s Content with Lists,

Figures, and Various Organizational Elements

4
Unordered Lists
We start this lecture by learning how to implement lists. Let’s jump right into an example.
The unordered list that shows my weekday routine. It’s called “unordered” because the list items have bullets
and circles next to them, and bullets and circles do not imply any order.
To create an unordered list, you surround the entire list with a ul container (ul for unordered list) and use li
containers for the individual list items. Here’s an example:
<ul>
<li>Wake up at 9ish.</li>
<li>Go to school.</li>
</ul>
Note that it is legal to omit the </li> end tag for list elements, so this is valid HTML as well:
<ul>
<li>Wake up at 9ish.
<li>Go to school.
</ul>
However, in the interest of readability and maintenance, coding conventions suggest that you do not omit the
</li> end tag.
5
Example

6
Symbols for Unordered List Items
According to the W3C, the default symbol for unordered list items is a bullet for all levels
in a nested list, but the major browsers typically use bullet, circle, and square symbols for the
different levels in a nested list.
Because the official symbol defaults and the browser symbol defaults are different, you should
avoid relying on them. Instead, you should use CSS’s list-style-type property to explicitly
specify the symbols used in your web page lists.

For unordered lists, the most popular values

for the list-style-type property are none,
disc, circle, and square.

<style>
ul {list-style-type: circle;}
ul ul {list-style-type: square;}
</style>

7
Descendant Selectors
A descendant selector is when you specify a series of two or more selectors separated by
spaces. For each pair of adjacent selectors, the browser searches for a pair of elements that
match the selectors such that the second element is contained within the first element’s start
tag and end tag.
When an element is inside another element’s start tag and end tag, we say that the element is
a descendant of the outer element.
To better understand the descendant selector, let’s look at an example. The following structure
shows how the previous example web page’s ul and li elements are related:
Here’s the syntax for a descendant selector rule:
space-separated-list-of-elements {property1: value; property2: value;}

In the following style container, note how the second and third
rules use that syntax:
<style>
ul {list-style-type: disc;}
ul ul {list-style-type: square;}
ul ul ul {list-style-type: none;}
8
</style>
Ordered Lists
Numbers and letters indicate that the order of the list items is important, and that changing the
order would change the list’s meaning. Those types of lists are referred to as ordered lists.
To create an ordered list, you surround the entire list with an ol container (ol for ordered list).
<ol>
<li>Personal experiences</li>
<li>What friends say</li>
</ol>
Typically, the major browsers display Arabic numbers by default for items in an ordered list,
even when the ordered list is nested inside another ordered list.
As with unordered lists, you should avoid relying on the default symbols. Instead, you should
use CSS’s list-style-type property.
There are lots of list-style-type property values for ordered lists. Some of the more popular
values are decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman.
9
Example

10
Figure with an Image
Let’s use the figure element to display a picture with a caption. For an example, see the
example below and its source code.

11
Organizational Elements
So far in this lecture, we’ve organized web page content using lists and figures. Those
organizational structures are pretty straightforward because they have physical manifestations
like list items in an outline and a caption below a figure.
The rest of this lecture covers organizational elements that don’t have obvious physical
manifestations. Their purpose is to group web page content into sections so that you can use
CSS and JavaScript to manipulate their content more effectively.
Here are the organizational elements you’ll be introduced to:
➢ section
➢ article
➢ aside
➢ nav
➢ header
➢ footer
12
Example

13
Example

14
Example

15
section, article, and aside Elements
The section element is a container. It’s used to group together a section of a web page. The
section container groups together a section of a web page. Typically, a section will contain a
heading and one or more paragraphs, with the heading saying something about the common
theme.
The article element is for grouping together one or more sections such that the group of
sections form an independent part of a web page.
The aside element’s purpose is to group together content that has something to do with the
rest of the web page, but it isn’t part of the main flow. Typically, you should position an aside
element at the right or left.
All organizational elements are block elements, so they span the entire width of the web page
by default. A common way to undo that default behavior for the aside element is to “float” the
aside element to the left or right by using the CSS float property.
aside
{
float: right;
} 16
nav and a Elements
The nav element is a container that normally contains links to other web pages or to other
parts of the current web page. The nav element gets its name from navigate because you use
links to navigate to (jump to) other locations.
Here’s the nav code that contains those links:
<nav>
<a href="#dining">Dining</a> | <a href="#clothing">Clothing</a>
</nav>
Note the two a elements, each with its own pair of start and end tags. Each a element
implements a link. When the user clicks on a link, the browser jumps to the value specified by
the href attribute. The # indicates that the target is within the current web page.
For example, the preceding href value is #dining, so the browser looks for an element with
“dining” for its id value.
<h2 id="dining">Dining</h2>
17
header and footer Elements
The header element is for grouping together one or more heading elements (h1-h6) such that
the group of heading elements form a unified header for nearby content. Normally, the header
is associated with a section, an article, or the entire web page.
<header>
<h1>Mangie's List</h1>
<h2><q>Simply the best reviews anywhere!</q></h2>
</header>
The footer element is for grouping together information to form a footer. Typically, the footer
holds content such as copyright data, author information, or related links. The footer should be
associated with a section, an article, or the entire web page. To form that association, the
footer element must be positioned within its associated content container.
<footer>
Questions? Email <address>[email protected]</address>.
</footer>
18
display property, User agent Style Sheets
The display CSS property sets whether an element is treated as a block or inline element
and the layout used for its children.
If you look at the Mangie’s List web page, you can see that the address is embedded within
the footer’s sentence. To implement that inline behavior, the web page uses this CSS rule:
address {display: inline;}
Without that rule, the browsers’ native default settings would apply, and the address would
appear on a line by itself.

19
Child Selectors
In introducing child selectors, it’s helpful to compare them to descendant selectors. Remember
how descendant selectors work? That’s when you have two selectors separated by a space,
and the browser searches for a pair of elements that match the selectors such that the second
element is a descendant of the first element (i.e., the second element is contained
anywhere within the first element).
A child selector is a more refined version of a descendant selector. Instead of allowing the
second element to be any descendant of the first element, the second element must be a child
of the first matched element (i.e., the second element must be within the first element, and
there are no other container elements inside the first element that surround the second
element).
The syntax for a child selector is the same as the syntax for a descendant selector,
except that > symbols are used instead of spaces.
Here’s the syntax:
list-of-elements-separated-with > {property1: value; property2: value;}
section > h2 {background-color: palegreen;}
20
References
✓ Dean, J. (2018). Web programming with HTML5, CSS, and JavaScript. Jones &
Bartlett Learning.
✓ CSS Working Group. (2022). What is CSS?. https://www.w3.org/Style/CSS
✓ MDN web docs from Mozilla Developer Group. (2023). CSS reference.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

21