Ostatnio edytowany:

ol

Autor: Virtual Patriot

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 wspomnianej treści.

Dodatkowe techniczne informacje 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
elementy 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

składnia HTML

<ol> ... </ol>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe 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

Nie interpretuje atrybutu reversed.

Opis atrybutów elementu ol

reversed

Przeznaczenie atrybutu reversed

Atrybut reversed wykorzystany wraz z elementem ol odwraca kolejność numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu li danego elementu ol.

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ść 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".

start

Przeznaczenie atrybutu start

Atrybut start wykorzystany wraz z elementem ol określa 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)

ponadto jeżeli element ol posiada atrybut reversed, wtedy w każdej sytuacji wartością domyślną atrybutu start elementu ol jest wartość, która jest równa liczbie elementów dzieci typu li, które posiada wspomniany 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

Mechanizm przeglądarki internetowej odpowiedzialny za numerowanie kolejnych elementów dzieci typu "li" przykładowego elementu "ol" rozpoczął wspomniany proces numerowania od wartości "0", ponieważ do wspomnianego elementu "ol" został dodany atrybut "start" wraz z wartością "0".

Gdy wartością atrybutu type elementu "ol" nie jest wartość 1, wtedy wspomniana liczba całkowita powinna być większa od zera.

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem ol określa system numerowania, jaki powinien zostać wykorzystany 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ł wykorzystany 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ą 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ł wykorzystany 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ą 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ł wykorzystany 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ł wykorzystany 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ł wykorzystany 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".