Which of the Following is an Attribute That Can Be Used Nordered List Element to Continue
HTML Lists
In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let's have a look.
We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered list, we use the <ul> tag. This tag comes in pairs, the content is written between opening <ul> and closing </ul> tags.
Each element of an unordered list is declared inside the <li> tag.
Example of the HTML <ul> tag for creating an unordered list:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>An unordered list:</h1> <ul> <li>This is a list item</li> <li>This is another list item</li> <li>This is one more list item</li> </ul> </body> </html> The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute.
The type attribute is used to change the default bullet style for the list items.
Example of the HTML <ul> tag for creating an unordered list, where the items are marked with bullets:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <ul type="circle"> <li>List item </li> <li>List item</li> <li>List item</li> </ul> <ul type="square"> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </body> </html> Result
You can also use the CSS list-style-type or list-style-image property to specify the type of a list item element.
Example of the HTML <ul> tag used with the CSS list-style-type property for creating an unordered list:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h2>Examples of unordered lists:</h2> <ul style="list-style-type: square;"> <li>Cold Drinks</li> <li>Hot Drinks</li> <li>Ice-Creams</li> </ul> <ul style="list-style-type: disc;"> <li>Coca-Cola</li> <li>Fanta</li> <li>Ice Tea</li> </ul> <ul style="list-style-type: circle;"> <li>Coca-Cola</li> <li>Fanta</li> <li>Ice Tea</li> </ul> </body> </html> HTML ordered list is used for listing items that are marked with numbers. It starts with the <ol> tag. This tag comes in pairs, the content is written between opening <ol> and closing </ol> tags.
Each item in the ordered list starts with opening <li> tag and ends with </li> closing tag.
Example of the HTML <ol> tag for creating an ordered list:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>An ordered list:</h1> <ol> <li>This is List item number 1</li> <li>This is List item number 2</li> <li>This is List item number 3</li> </ol> </body> </html> The items in the ordered list are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers, you just need to add type="a" or type="I" to the <ol> tag.
Example of the HTML <ol> tag for creating an ordered list with alphabet and Roman numbers:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h3>A numbered list:</h3> <ol> <li>Peach</li> <li>Apricot</li> <li>Banana</li> <li>Strawberry</li> </ol> <h3>An alphabetized list:</h3> <ol type="A"> <li>Peach</li> <li>Apricot</li> <li>Banana</li> <li>Strawberry</li> </ol> <h3>An alphabetized list (lowercase letters):</h3> <ol type="a"> <li>Peach</li> <li>Apricot</li> <li>Banana</li> <li>Strawberry</li> </ol> <h3>A numbered list (Roman numerals):</h3> <ol type="I"> <li>Peach</li> <li>Apricot</li> <li>Banana</li> <li>Strawberry</li> </ol> <h3>A numbered list (lowercase Roman numerals):</h3> <ol type="i"> <li>Peach</li> <li>Apricot</li> <li>Banana</li> <li>Strawberry</li> </ol> </body> </html> HTML description list is used to arrange terms or names with a description the same way as they are arranged in a dictionary.
To create a description list, we use the <dl> tag. This tag comes in pairs.
In <dl>, we use <dt> tags for a term/name in a description list and <dd> for a description of a term/name in a description list.
Example of the HTML <dl> tag for creating a description list:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>Description Lists:</h1> <dl> <dt>Tea</dt> <dd>- hot drink</dd> <dt>Juice</dt> <dd>- cold drink</dd> </dl> </body> </html> Result
A nested list contains a list inside a list.
Example of an HTML nested list:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h2>A nested HTML list</h2> <p>A nested list contains a list inside a list.</p> <ul> <li>Copybooks</li> <li> Books <ul> <li>Detective books</li> <li>Roman books</li> <li>Fairy tale books</li> </ul> </li> </ul> </body> </html> By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.
Example of an HTML list for counting from a specified number:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h2>List counting control</h2> <p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.</p> <ol start="40"> <li>Pen</li> <li>Pencil</li> <li>Copybook</li> </ol> <ol type="I" start="40"> <li>Pen</li> <li>Pencil</li> <li>Copybook</li> </ol> </body> </html> HTML lists can be styled in many different ways with CSS.
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
Example of a horizontal list with CSS:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F44336; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a :hover { background-color: #981816; } </style> </head> <body> <h2>Navigation Menu Example</h2> <p> You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally. </p> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="https://www.w3docs.com/tool/">Tools</a> </li> <li> <a href="https://www.w3docs.com/snippets">Snippets</a> </li> <li> <a href="https://www.w3docs.com/quiz/">Quizzes</a> </li> <li> <a href="https://www.w3docs.com/string-functions/">String Functions</a> </li> </ul> </body> </html> Source: https://www.w3docs.com/learn-html/html-lists.html
0 Response to "Which of the Following is an Attribute That Can Be Used Nordered List Element to Continue"
Post a Comment