Autor publikacji
Virtual Patriot - Administrator

ol

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu ol

Element ol reprezentuje listę uporządkowaną, której zawartość powinna reprezentować treść, która musi zostać zaprezentowana według z góry określonej kolejności ze względu na ryzyko utraty znaczenia docelowej treści.

Dodatkowe artykuły związane z elementem ol

Informacje techniczne o elemencie ol

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<nav>
  <h2>Nawigacja książki</h2>

  <ol>
    <li>
      <a href="#rozdzial-1">Rozdział - 1</a>
    </li>

    <li>
      <a href="#rozdzial-2">Rozdział - 2</a>
    </li>

    <li>
      <a href="#rozdzial-3">Rozdział - 3</a>
    </li>
  </ol>
</nav>

Kontekstem zewnętrznym przykładowego elementu "ol" jest element "nav". Wspomniany element "nav" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "nav", jest prawidłowym kontekstem zewnętrznym dla elementu "ol".

kontekst wewnętrzny

zero lub więcej elementów li, jak również ewentualnie zawartość skryptowa

Przykładowy Kod HTML

<nav>
  <h2>Nawigacja książki</h2>

  <ol>
    <li>
      <a href="#rozdzial-1">Rozdział - 1</a>
    </li>

    <li>
      <a href="#rozdzial-2">Rozdział - 2</a>
    </li>

    <li>
      <a href="#rozdzial-3">Rozdział - 3</a>
    </li>
  </ol>
</nav>

Kontekstem wewnętrznym przykładowego elementu "ol" są wyłącznie elementy "li", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "li", element "li" oraz element "li", jest prawidłowym kontekstem wewnętrznym dla elementu "ol".

Przykładowy Kod HTML

<nav>
  <h2>Nawigacja książki</h2>

  <ol>
    <li>
      <a href="#rozdzial-1">Rozdział - 1</a>
    </li>

    <li>
      <a href="#rozdzial-2">Rozdział - 2</a>
    </li>

    <li>
      <a href="#rozdzial-3">Rozdział - 3</a>
    </li>

    <template id="szablon-1">
      <ins>
        <iframe src="dynamiczna-statystyka-01.html"></iframe>
      </ins>
    </template>
    <script src="skrypt-01.js"></script>
  </ol>
</nav>

Kontekstem wewnętrznym przykładowego elementu "ol" są wyłącznie elementy "li" oraz elementy HTML, które należą do kategorii zawartość skryptowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "li", element "li", element "li", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "ol".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<ol> ... </ol>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Przypuszczalnie domyślne reguły CSS elementu ol

ol {
  display:block;
  list-style-type:decimal;
  margin-top:1em;
  margin-bottom:1em;
  padding-left:40px;
}

ol ol {
  margin:0;
}

ul ol {
  margin:0;
}

dl ol {
  margin:0;
}

Interpretacja elementu ol

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu reversed.

Edge

tak

Opis atrybutów elementu ol

Atrybut Lokalny

reversed

Przeznaczenie atrybutu reversed

Atrybut reversed wykorzystany wraz z elementem ol pozwala nam określić czy kolejność podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu li danego elementu ol powinna zostać odwrócona.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu reversed

reversed

Atrybut reversed jest atrybutem logicznym elementu ol.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol reversed>
      <li>piąty</li>
      <li>czwarty</li>
      <li>trzeci</li>
      <li>drugi</li>
      <li>pierwszy</li>
    </ol>

  </body>
</html>

Rezultat

  1. piąty
  2. czwarty
  3. trzeci
  4. drugi
  5. pierwszy

Kolejność podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" przykładowego elementu "ol" została odwrócona, ponieważ do wspomnianego elementu "ol" został dodany atrybut "reversed".

Atrybut Lokalny

start

Przeznaczenie atrybutu start

Atrybut start wykorzystany wraz z elementem ol pozwala nam określić wartość startową, od której powinien rozpocząć się proces numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu li danego elementu ol.

Wartość domyślna

1 (w każdej sytuacji), lecz tylko wtedy gdy dany element ol nie posiada atrybutu reversed, w przeciwnym przypadku wartość równa liczbie elementów dzieci typu li, jakie posiada dany element ol

Wartości atrybutu start

liczba

Należy podać liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol start="0">
      <li>zerowy</li>
      <li>pierwszy</li>
      <li>drugi</li>
      <li>trzeci</li>
      <li>czwarty</li>
      <li>piąty</li>
    </ol>

  </body>
</html>

Rezultat

  1. zerowy
  2. pierwszy
  3. drugi
  4. trzeci
  5. czwarty
  6. piąty

Wartością startową, od której rozpoczął się proces numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" przykładowego elementu "ol", jest wartość "0", ponieważ do wspomnianego elementu "ol" został dodany atrybut "start" wraz z wartością "0".

Podczas docelowego procesu numerowania, wartości ujemne oraz wartość "0" są zawsze zapisywane za pomocą cyfr dziesiętnego systemu liczbowego, niezależnie od tego jaką wartość posiada atrybut type danego elementu "ol".

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem ol pozwala nam określić informację o tym, jaki system numerowania powinien zostać użyty przez jeden z mechanizmów przeglądarki internetowej podczas procesu numerowania kolejnych elementów dzieci typu li danego elementu ol.

Wartość domyślna

1 (w każdej sytuacji)

Wartości atrybutu type

1

Wartość 1 oznacza numerowanie za pomocą cyfr dziesiętnego systemu liczbowego.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol type="1">
      <li>pierwszy</li>
      <li>drugi</li>
      <li>trzeci</li>
      <li>czwarty</li>
      <li>piąty</li>
      <li>szósty</li>
      <li>siódmy</li>
      <li>ósmy</li>
      <li>dziewiąty</li>
      <li>dziesiąty</li>
    </ol>

  </body>
</html>

Rezultat

  1. pierwszy
  2. drugi
  3. trzeci
  4. czwarty
  5. piąty
  6. szósty
  7. siódmy
  8. ósmy
  9. dziewiąty
  10. dziesiąty

Podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" przykładowego elementu "ol" został użyty system korzystający z cyfr dziesiętnego systemu liczbowego, ponieważ do wspomnianego elementu "ol" został dodany atrybut "type" wraz z wartością "1".

A

Wartość A oznacza numerowanie za pomocą systemu korzystającego z dużych liter alfabetu łacińskiego.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol type="A">
      <li>pierwszy</li>
      <li>drugi</li>
      <li>trzeci</li>
      <li>czwarty</li>
      <li>piąty</li>
      <li>szósty</li>
      <li>siódmy</li>
      <li>ósmy</li>
      <li>dziewiąty</li>
      <li>dziesiąty</li>
    </ol>

  </body>
</html>

Rezultat

  1. pierwszy
  2. drugi
  3. trzeci
  4. czwarty
  5. piąty
  6. szósty
  7. siódmy
  8. ósmy
  9. dziewiąty
  10. dziesiąty

Podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" przykładowego elementu "ol" został użyty system korzystający z dużych liter alfabetu łacińskiego, ponieważ do wspomnianego elementu "ol" został dodany atrybut "type" wraz z wartością "A".

a

Wartość a oznacza numerowanie za pomocą systemu korzystającego z małych liter alfabetu łacińskiego.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol type="a">
      <li>pierwszy</li>
      <li>drugi</li>
      <li>trzeci</li>
      <li>czwarty</li>
      <li>piąty</li>
      <li>szósty</li>
      <li>siódmy</li>
      <li>ósmy</li>
      <li>dziewiąty</li>
      <li>dziesiąty</li>
    </ol>

  </body>
</html>

Rezultat

  1. pierwszy
  2. drugi
  3. trzeci
  4. czwarty
  5. piąty
  6. szósty
  7. siódmy
  8. ósmy
  9. dziewiąty
  10. dziesiąty

Podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" przykładowego elementu "ol" został użyty system korzystający z małych liter alfabetu łacińskiego, ponieważ do wspomnianego elementu "ol" został dodany atrybut "type" wraz z wartością "a".

I

Wartość I oznacza numerowanie za pomocą dużych liter rzymskiego systemu zapisywania liczb.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol type="I">
      <li>pierwszy</li>
      <li>drugi</li>
      <li>trzeci</li>
      <li>czwarty</li>
      <li>piąty</li>
      <li>szósty</li>
      <li>siódmy</li>
      <li>ósmy</li>
      <li>dziewiąty</li>
      <li>dziesiąty</li>
    </ol>

  </body>
</html>

Rezultat

  1. pierwszy
  2. drugi
  3. trzeci
  4. czwarty
  5. piąty
  6. szósty
  7. siódmy
  8. ósmy
  9. dziewiąty
  10. dziesiąty

Podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" przykładowego elementu "ol" został użyty system korzystający z dużych liter rzymskiego systemu zapisywania liczb, ponieważ do wspomnianego elementu "ol" został dodany atrybut "type" wraz z wartością "I".

i

Wartość i oznacza numerowanie za pomocą małych liter rzymskiego systemu zapisywania liczb.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol type="i">
      <li>pierwszy</li>
      <li>drugi</li>
      <li>trzeci</li>
      <li>czwarty</li>
      <li>piąty</li>
      <li>szósty</li>
      <li>siódmy</li>
      <li>ósmy</li>
      <li>dziewiąty</li>
      <li>dziesiąty</li>
    </ol>

  </body>
</html>

Rezultat

  1. pierwszy
  2. drugi
  3. trzeci
  4. czwarty
  5. piąty
  6. szósty
  7. siódmy
  8. ósmy
  9. dziewiąty
  10. dziesiąty

Podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" przykładowego elementu "ol" został użyty system korzystający z małych liter rzymskiego systemu zapisywania liczb, ponieważ do wspomnianego elementu "ol" został dodany atrybut "type" wraz z wartością "i".