Extra Elements in HTML
Introduction
Over the last few lessons, you‘ve been exposed to some really cool HTML elements. You‘ve become familiar with tags, headers and links, as well as images. However, these aren‘t the only elements HTML offers; in this lesson, we‘ll take a look at some additional features such as buttons and lists!
Overview
By the end of this lesson, you should be able to:
- Understand ordered and unordered lists
- Learn what lists can be used for
- Understand what the button Element is in HTML
- Know what a span tag is and the purpose of it
Lists
One of the last and most important elements that we need to learn about in HTML are lists. In HTML, there are two types of lists we can make. Either an ordered list or an unordered list. Ordered lists are lists that are numbered and arranged in a specific order. They are typically used for items that need to be presented in a particular order, such as a timeline or a step–by–step guide. Unordered lists are lists that are not numbered and are arranged in a general order. They are typically used for items that do not need to be presented in a specific order, such as a list of ingredients or a list of facts. For each list type, we will use different tags.
Here is the syntax for both an ordered and an unordered list.
<!-- Ordered List: -->
<ol>
-- List Content --
</ol>
<!-- Unordered List: -->
<ul>
-- List Content --
</ul>An ordered list will use a <ol>tag while an unordered list will use an <ul>. It is easy to remember since <ol> stands for ordered list and vice versa.
Now we have our lists ready, but we still need to add some content to them. There is one last piece that we need to a list to make it show up on our browser/website. Here it is:
The <li> tag stands for list item. Whenever we want a new item in our list, we place the tag down. As you can see, in the ordered list, everything is numbered starting from 1. In an unordered list, we just have bullet points instead of numbers.
Anything can be put inside of list items. Everything from links to images to even other lists. Go ahead and try playing around with lists in your code editor. Right now, they might look bland and a tad bit boring, but with a bit of CSS, we can make them look a LOT better.
Buttons
Every website has buttons. Whether they show popups, take us to a new page, or take us to another website, buttons are extremely important for the structure of websites. You probably came to this page by pressing a lof of buttons!
In HTML, we can actually create buttons. Here is the syntax (It’s super simple!):
There are opening and closing <button> tags. Inside of them is where our content will go. With CSS, we can make them look a lot better. The buttons aren’t useless however, we can actually put links inside them and make them clickable like this:
<body>
<!-- Creating a button that has a clickable link inside it -->
<button><a href="https://learntheweb.org">Learn Coding!</a></button>
</body>The <span> tag
The <span> tag in HTML is a way to make parts of a website look different. Think of it like decorating a room, you can pick and choose what parts of the room you want to change, and keep the rest the same.
When you use this tag, it will not start a new line on the page, but instead it will blend in with the text around it. You can use this tag to change the color, font, or add special effects to words or information on the page.
For example, let’s say you want to make a word stand out. You can put that word inside the <span> tag and then use different styling to make it look different. Take a look at this example:
<body>
<p>I am a <span>sentence</span></p>
<body>As you can see, we are putting the specific word sentence within a <span> tag to which we can then edit.
With that, we have covered all the additional elements! You now have a solid foundation in the fundamental HTML elements required to construct a functional website. In our next lesson, we’ll bring everything we’ve learned together and embark on a project that will put these concepts into practice. Get ready to build something amazing!
Practice
- By now, you should be comfortable with most of the basic HTML elements needed to build a basic website. Let’s go ahead and create a “mini-project” to test everything you’ve learned
A header that says “My Personal Website”
A header that says “About Me”
A paragraph that introduces yourself and gives a brief overview of your background and interests
An image of one of your interests/hobbies
A list of your top three strengths, each one in its own bullet point
A header that says “My Hobbies”
A list of your three favorite hobbies, each one with a link to a webpage that provides more information about the hobby
A header that says “My Favorite Websites”
A list of your three favorite websites, each one with a link to the website
A header that says “My Favorite Photos”
A list of your three favorite photos, each one displayed as an image on the webpage
Each image should be a different size, with one being small, one being medium, and one being large
If you can do all of this, give yourself a pat on the back as you’re now an HTML master! We still have a bit more to learn, but you’ve learnt most of the HTML fundamentals!
Find an issue/typo/error with our content? Please report it here