For a quick review of our previous article, let's take the following quiz:
Refresher Quiz
What are Block Level Elements?
Block-level elements take up the entire line. they do not share the same line with other elements
What are Inline Elements?
Inline Elements take up the exact space of their content, thereby sharing space with other elements.
What are Some Examples of Inline Elements
Headings and divs are examples of inline elements.
What are some examples of Block Level Elements?
Spans and Buttons are inline Elements.
What is the Difference Between a Span and a Div?
They are both containers for sectioning parts of the HTML document for styling purposes, whereas the difference between them is that the Span is an inline element while the Div is a block-level element.
What tag is used for defining a div and a span
Just as the names imply, the div tag is used in creating the div element while the span tag is used in creating the span element.
What are Block Level Elements?
Block-level elements take up the entire line. they do not share the same line with other elements
What does the 'small' tag do in HTML?
small: It is used to make texts small
What does the 'big' tag do in HTML?
big: It is used to make texts Big
What does the Italic tag do in HTML?
italic: It is used to make texts Italicised
What does the 'bold' tag do in HTML?
b: It is used to make texts Big
What does the 'underline' tag do in HTML?
u: It is used to underline text in HTML
What does the 'superscript' tag do in HTML?
sup: It is used to create superscript text such as exponents in mathematical expressions.
What does the 'subscript' tag do in HTML?
sub: It is used to create subscript text, typical for references to footnotes on a page.
What does the 'deleted' tag do in HTML?
del: It is used for creating a strike-through over texts to make them look deleted.
What does the 'monospaced' tag do in HTML?
tt: It is used to create monospaced text in a document.
What does the 'mark' tag do in HTML?
mark: It is used to create a transparent background over text to make the seem emphasized.
Ordered Lists
Ordered lists, ol are lists that are ordered just as the name implies. They follow a certain numerical order and they are used to itemize things when it is important to follow a certain order.
When making an ordered list, you use the ol tag and then nest the li tags for each item. You can also create a sub-list for sub-categories.
To demonstrate this, in our index.html file, let's turn our skills section into an ordered list.
First, convert the u tags for the underlines into ol ordered list tags.
Then wrap li list item tags around each skill as follows:
<ol><li>HTML</li><li>CSS</li><li>Javacsript</li><li>React</li></ol>
Unordered Lists
Unordered lists, ul are used when itemizing things without following any particular order. They appear as bullet points: Here is how they are created in HTML:
Start by wrapping our hobbies section with an ul tag, replacing the p tags, and deleting the div tags as well.
Next, wrap each hobby item inside a li list item and see how it gets rendered on the live server preview page as bullet points as follows:
<ul>
<li>football</li><li>basketball</li><li>
<a href="./assets/music.html" target="_blank">listening to music</a></li>
</ul>
Nested Lists
Lists can be nested into a list as sub-categories. Let's take an example of the following, just for demonstration purposes:
In the hobbies section let's create a sub-category under each section by nesting an unordered list item under each hobby
Under the football hobby, after the 'football' text, nest an ul tag, and inside this ul tag, nest two li list items: 'watching football games', and 'playing football', as follows:
<li>football
<ul>
<li>watching football games</li>
<li>playing football</li>
</ul>
</li>
- under the basketball hobby, in like manner, right after the basketball text, nest a
ul tag with two li list items inside the ul tag. the List items should have the following content: 'watching basketball games', and 'playing basketball video games', as follows:
<li>basketball
<ul>
<li>watching basketball games</li>
<li>playing basketball video games</li>
</ul>
</li>
This is how you make ordered lists and unordered lists and nest other lists into them. Next we will discuss how to make description lists.
Description Lists
Description lists are used to provide definitions or descriptions of terms. You can create a dictionary website using this.
The basic structure is the dl 'description list' tags wrapping the dt 'description terms' tag and the dd 'description definition' tags, in pairs. To demonstrate this, we will turn our contact section into a description list, just for demonstrative purposes:
- First, create a
dl opening tag just below the Contact Me element and close the tag just below the U2B closing anchor tag. This wraps the entire contacts elements in a 'description list' tag, like this:
<dl>
<a
href="https://www.linkedin.com/in/ao111"
target="_blank"
title="my linkedin"
>Linkedin
</a>
<a href="https://github.com/accdev1694" target="_blank" title="my github"
>GitHub
</a>
<a
href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
target="_blank"
title="my youtube"
>U<sup>2</sup>B
</a>
</dl>
- Next, wrap the anchor tags of each contact item with a
dt 'description term' tag to turn each item into a description term, like this:
<dl>
<dt>
<a
href="https://www.linkedin.com/in/ao111"
target="_blank"
title="my linkedin"
>Linkedin
</a>
</dt>
<dt>
<a href="https://github.com/accdev1694" target="_blank" title="my github"
>GitHub
</a>
</dt>
<dt>
<a
href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
target="_blank"
title="my youtube"
>U<sup>2</sup>B
</a>
</dt>
</dl>
- lastly, add a
dd 'description definition' opening and closing tags, with a definition right under each dt description term element as follows:
<dl>
<dt>
<a
href="https://www.linkedin.com/in/ao111"
target="_blank"
title="my linkedin"
>Linkedin
</a>
</dt>
<dd>Linkedin in as online platform for your professional profile</dd>
<dt>
<a href="https://github.com/accdev1694" target="_blank" title="my github"
>GitHub
</a>
</dt>
<dd>GitHub is an online platform for your codes and all things tech collaboration</dd>
<dt>
<a
href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
target="_blank"
title="my youtube"
>U<sup>2</sup>B
</a>
</dt>
<dd>Youtube is an online video streaming platform</dd>
</dl>
In summary, 'description lists' use dl tags at the highest level, then two tags for each item: the dt 'description term' and dd 'description definition', in the following structure:
<dl>
<dt>
</dt>
<dd>
</dd>
</dl>
Here is the live server preview of the Description List:
That is all about lists in HTML. Don't forget to like, subscribe, and comment on this blog. Thank you.
