Which of the following tags must be at the start and end of an unordered list
|
HTML has a set of tags for the purpose of displaying lists. The use of these tags are essential to organizing information on you web site. In fact the list below uses the Show
One thing to keep in mind when using lists is that certain tags (the It is also possible to "nest" lists within each other as is shown below. Each nest will indent the the list to the right to show that it is a sub-list to the previous list item. To nest lists, you need to create another complete list structure within a list item as shown below. Notice how the new list structure (the For example, a simple ordered list would look like this:
A nested list would look like this:
The nested list above looks like this:
All of the tags below require an end tag unless otherwise specified. This tag is a container for an ordered list of items. An ordered list means that the list will be displayed with a sequence of numbers or letters (1, 2, 3, or a, b, c, etc). Each list item within the
This is an unordered list tag. Unordered means that the items within the list will not be displayed with a sequence of numbers or letters. Instead the list will be shown with "bullet" symbols. As you nest unordered lists, the bullet symbols will automatically change to better highlight the sub-lists. You can see an example of this in the list items on this web page. Each list item within the We create them to structure and organize our days, and we use them to make to-do lists. We use them in recipes so we don't miss any of the steps. And we use them when we want to assemble a piece of furniture. These are just a few examples of how we use lists to help us keep things organized. So it makes sense that they are also such a frequently used and helpful feature in front-end web development. There are three types of lists in HTML: unordered, ordered, and description lists. In this article, you'll learn how to create unordered lists. You'll also see some ways in which you can change the default styling using just a few lines of CSS. Let's get started! How to create an unordered list in HTMLUnordered lists in HTML are collections of items that don't need to be in any specific order. We often use simple bullet points to list out these items. You create an unordered list using the The tag. This means that the Output:  This is called a bulleted list because the default styling is that every list item has a bullet point next to it. One thing to remember and be aware of is that This means that after creating the opening ( For example, don't do this: If you want your unordered list's items to be links, do this instead: The link tag ( How to create a nested unordered listA nested list is a list inside another list. You can create a nested unordered list, or a nested ordered list, or even an ordered list nested inside an unordered one. Remember that the only direct child of the Here's how you create a nested unordered list: Output: You create the nested unordered list under the main list's item of your choosing. In the example above, I created a nested list between the opening and closing Make sure to include both the closing tag and opening tags, as it can get confusing quickly. A good practice to avoid any confusion is to comment your code. And keep in mind that you should use nested lists only when it semantically makes sense. How to change the default styling of unordered listsAs you've seen so far, the default styling of unordered lists are bullet points next to each list item. But you can change the styling using the The default value of the property is How to style list items with circlesYou can create list items that have circles instead of solid bullet points as their style: Output: How to style list items with squaresYou can also create list items that have squares as their style: Output: How to remove styles from list itemsYou can even remove styling altogether: Output: This is particularly helpful when you want to style the list items horizontally and create a navigation bar. This will require some extra styling. Lists are block elements. By changing the list items to The same HTML: And by adding a few new CSS rules: You can style the list items horizontally: How to style list items with emojisYou don't have that many styling choices for styling items in an unordered list. To make lists more interesting and fun, you can add emojis, using the CSS Here is the HTML: The first step is to add the You add the emoji to the Output: To give each list item a different emoji, use the Output: ConclusionAnd there you have it! You now know how to create unordered lists in HTML and have seen some ways to style them. To continue your HTML learning journey, watch the following videos on freeCodeCamp's YouTube channel:
freeCodeCamp also offers a free, project-based certification on Responsive Web Design. It is ideal for complete beginners and assumes no previous knowledge. You'll start from the absolute necessary basics and build your skills as you progress. In the end, you'll complete five projects. Thanks for reading and happy learning :) ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT Learning something new everyday and writing about it If this article was helpful, tweet it. Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started Which of the following is the opening and closing tag on of unordered list?An unordered list starts with the
What tag indicates the beginning of an unordered list? The opening list tag must be immediately followed by the first list element.
Which tag is used for unordered list?
What HTML tag must be used to insert an item in an unordered or ordered list?The HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (
|
