00:00Hello, welcome to the Transcendent. In this video, we'll learn HTML lists and how does it works.
00:20Let's explore deeper into exploring HTML lists. We frequently rely on lists in our daily lives.
00:27To-do lists, meal plans, shopping lists, bucket lists of dreams. On the web, we use lists even more, often for elements that don't appear as lists.
00:37Navigational bars are frequently depicted as lists overflowing with an abundance of hyperlink options.
00:44Landing pages feature teasers with images and headlines, linking to more content. Those are lists in HTML.
00:50In the system, we employ three different types of lists. Unordered lists, ordered lists, and also definition lists.
00:59Unordered lists are the most commonly used. Let's create a basic example.
01:04We have a list of jewelry, perhaps ingredients for a category. We'll enclose each item in this list within an LI element.
01:12LI represents list item. We can observe the results appearing on the right.
01:16The browser places a marker before each item. Next, we must enclose the entire set of items in an element to indicate the start and end of the list, and to specify its type.
01:29For an unordered list, we use a UL element, meaning unordered list.
01:34To make our code clearer, we can indent the list items by adding spaces.
01:39Or tabs, spaces, or tabs work fine. It makes no difference.
01:43Add some space before each list item. We can clearly see that the opening UL and closing UL belong together.
01:51This indenting has no impact on the web page's appearance, and it's not mandatory.
01:57HTML doesn't mind. The browser doesn't care. This is solely to assist humans.
02:02By default, the browser displays these list markers, but we don't choose a UL just for this look.
02:08We frequently choose UL as an effective means to convey a particular level of significance, followed by skillfully employing CSS to effectively modify the appearance of the product and significantly enhance its overall perception,
02:23while firmly emphasizing its highly distinctive selling points and truly unique characteristics.
02:29Let's not focus on that yet.
02:30Let's examine the next type of list, the ordered list.
02:35Ordered lists are quite similar, but instead of enclosing list items with a UL, we use an OL.
02:41O stands for ordered list, indicating a sequence to the items.
02:46Suppose we're outlining the jewelry category.
02:49These are the steps in the instructions, each marked as an LI element.
02:53Now we'll enclose this list in an OL element.
02:58We can see the list displayed with numbered steps, showing the sequence.
03:02Unordered and ordered lists both organize content using structure and order, but with different elements.
03:08Bullet lists for ordered lists and numbers for unordered lists.
03:12Both can be useful in different contexts and purposes.
03:15As indicated, employing CSS, techniques can effectively modify lists to appear notably different from the standard, default format.
03:24Here's another example to highlight a few of the many possibilities.
03:29The first six instances are all unordered lists.
03:32We can modify the list markers or remove them entirely.
03:36We can keep the content in a list-style layout or arrange it freely as desired.
03:40The next three instances are ordered lists where we alter the numbering.
03:45Numerous options exist for how numbering functions in an ordered list.
03:49In this final example, a very common use of the unordered list emerges.
03:54A frequently encountered usage of the unordered list emerges as a handy and compact method for organizing content in a simple yet powerful manner.
04:03To structure a set of teasers for articles or other brief content,
04:07examine this markup to understand the details of what's happening in the HTML.
04:12There's one more type of list in HTML, the description list, also called the definition list.
04:18With unordered lists and ordered lists, we have list, items, and item, each enclosed in an li element.
04:28Suppose we want to create a list resembling a key value pair in computer science.
04:33What if we need an item followed by an explanation or definition of that item?
04:38Here, we have a term paired with its description.
04:41The term, or key, is enclosed in a DT element, meaning definition term.
04:47The description, or value, is enclosed in a DD element, meaning definition description.
04:53We can include multiple DD elements for a single DT.
04:57The entire structure is enclosed in a DL element, meaning definition list.
05:02We'll notice that DT and DD elements are simply placed side by side.
05:07There's no enclosing element around each pair.
05:10That's just how a definition list functions.
05:13Consequently, we possess a comprehensive total of three diverse and readily accessible categories of lists
05:20that are specifically functionally implemented and optimized within the highly capable HTML platform.
05:26You can find all the necessary files and exercises to practice with this video.
05:31You can find all the necessary files.
Comments