HTML lists & images are the most frequently used elements when writing HTML code.
Lists add structure to your content, allowing you to organize and present information in the most engaging way. Images make for a visually appealing user experience. Both HTML lists and images help format your web page.
This post will go over the basics you need to know for both HTML lists & images. We start by understanding two kinds of HTML lists – not too exciting – and move on to how you can insert images to your web page (the fun part).
Unordered Lists
So-called “unordered” because it renders a bulleted list instead of a numbered one. The list item marker (bullet) can be styled with CSS.
Unordered lists are created with the unordered list tag <ul></ul> and its child element the list item tag <li></li>.
Each item on the list goes in a <li> tag which is a block element taking up the entire line. You can have as many <li>s as you want, but only need one <ul> per list.
Without <li>, <ul> acts similarly to a <div>.
Unordered lists are the most common type of lists when writing HTML – I can’t remember ever using its opposite, the ordered list, in practice.
Ordered Lists
Ordered lists are created with the <ol></ol> tags. They can be numeric or alphanumeric with a default ascending order which you can change (see below).
Similar to unordered lists, ordered lists require the use of the list item child tags <li></li> for each item you want to be on the list.
Ordered List Attributes
- Don’t want the list to start at 1? Then set its start attribute.
<ol start="#">with # being the number you want your list to start at- Want to create a countdown list? Then add the reversed attribute.
<ol reversed>
- Want an ordered list that is not numerical but in letters or roman numerals? Then set the type attribute.
<ol type="A or a || I or I">
note: (||) is known as a logical "or" operator ~ we figured writing three "or"s wasn't doing anyone any favors
Note:
- The letters or roman numerals can be uppercase or lowercase.
- The default type is “1” for numeric lists.
- You can reverse and change the starting point of the different types of ordered lists using the two attributes mentioned above.
HTML Images
<img src="file location" width="#" height="#" alt="descriptive text">The image tag is a self-closing tag and it allows you to insert an image into your code.
In the example below feel free to use any image you want – we found Spongebob in google images.
The src specifies the source of the image and can be a link instead of a file path on your computer – you don’t have to download an image to use it. For the example above we copied the image address by right-clicking on the image.
Please note the image address isn’t the same thing as link address.
However, using the image address is not reliable because if anything changes on the website you are pulling the image from, then your code will break. So if the image was taken down, deleted, or the site was updated or not working – all things that are out of your control – then there will be no image on your end.
The src attribute isn’t optional – the width and height attributes totally are. You can set the latter two using your style attribute inline or using an external style sheet.
If you don’t provide the source of the image (src) the browser won’t know where to locate the image file.
The alt attribute, which is optional, sets the alternative text for the image. The purpose is to provide a short description of the displayed image for when the image fails to load. It also helps visually impaired users as it’s read by screen readers.
For more helpful attributes of the image tag browse here.
File paths
If your image source is a URL, then you just need to paste the URL as we did with our Spongebob image.
But if your image is located in a certain folder on your computer, then you need to reference the file path correctly or the image won’t render.
File paths can be somewhat nuanced, especially in the beginning. Here’s a brief breakdown to get you started:
| Src | Located… |
|---|---|
| picture.jpg | Same directory as the current file |
| images/picture.jpg | Images directory in the current folder as the current file |
| /images/picture.jpg | Images directory at the root of the current file |
| ../picture.jpg | In directory one level up from the current directory |
Directory = Folder
In the example above with THT’s header, the image is located on the desktop which also happens to be the location of our HTML file. Therefore the two are in the same location, same directory – the desktop. We can then use the first file path from the table.
Think of a directory as a folder. It designates a specific location on your computer where your files are located.
Hint: In VS Code, when you have the right file path you’ll notice autocomplete giving you a dropdown menu of options as you type. That’s one way to know your location is correct.
And that just about wraps up HTML lists & images. Hopefully, you had fun playing with images and are ready for more?