Home > Web Front-end > HTML Tutorial > The difference between ul and ol in html

The difference between ul and ol in html

下次还敢
Release: 2024-04-27 21:03:15
Original
786 people have browsed it

In HTML, unordered lists (<ul>) use dots as bullets to represent non-sequential items, while ordered lists (<ol>) use numbers or letters as bullets to represent Items arranged in order. Select <ul> for non-ordered lists or <ol> for ordered lists.

The difference between ul and ol in html

The difference between ul and ol in HTML

In HTML, <ul> (unordered list) and <ol> (ordered list) are both used to create lists of items, but there are the following main differences between them:

Bullets :

<ul> <li> <ul> Use dots (•) as bullet points. <li> <ol> Use numbers or letters as bullet points.

Item Order: The items in

<ul> <li> <ul> are in no particular order. Items in <li> <ol> appear in the order they were created.

Semantics:

<ul> <li> <ul> Used to represent a list containing non-sequential items. <li> <ol> Used to represent a list containing sequence items, such as steps or numbered items.

Code example:

<code class="html"><ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<ol>
  <li>步骤 1</li>
  <li>步骤 2</li>
  <li>步骤 3</li>
</ol></code>
Copy after login

Select the appropriate type of list:

<ul> <li>When you want to create For a list of items in no particular order, use <ul>. <li>Use <ol> when you want to create an ordered list of items.

Note:

<ul> <li>Although <ul> usually uses the dot symbol, this can be changed via CSS symbol. <li> <ol> You can change the bullet symbols, such as Roman numerals or letters, through the type property. <li>For accessibility, <li> elements should be used for each item in the list.

The above is the detailed content of The difference between ul and ol in html. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template