HTML-тег <li>

HTML-тег <li> используется для определения элемента списка в упорядоченных, неупорядоченных или меню-списках. Он является дочерним элементом элементов <ul> (неупорядоченный список), <ol> (упорядоченный список) или <menu> . Элементы списка обычно отображаются с маркерами в неупорядоченных списках или с номерами в упорядоченных списках.

Тег <li> позволяет создавать структурированные списки, что упрощает чтение и навигацию по контенту.

Базовый синтаксис HTML-тега <li>

Базовая структура списка с использованием тега <li> :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Каждый элемент <li> представляет собой отдельный элемент в списке.

Атрибуты HTML-тега <li>

value: Указывает значение элемента в упорядоченном списке. Этот атрибут действителен только внутри <ol> .
Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
Атрибуты событий: поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Пример HTML-тега <li> с неупорядоченным списком

Вот пример неупорядоченного списка с использованием тега <li> :

<!DOCTYPE html>
<html>
    <body>
        <h2>Shopping List</h2>
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
            <li>Cherries</li>
        </ul>
    </body>
</html>

Пример HTML-тега li с неупорядоченным списком

Пояснение: Список отображается с маркерами, что указывает на неупорядоченную структуру.

Пример HTML-тега <li> с упорядоченным списком

Вот пример упорядоченного списка с использованием тега <li> :

<!DOCTYPE html>
<html>
    <body>
        <h2>Steps to Bake a Cake</h2>
        <ol>
            <li>Preheat the oven to 350°F.</li>
            <li>Mix the ingredients.</li>
            <li>Pour the batter into a pan.</li>
            <li>Bake for 30 minutes.</li>
        </ol>
    </body>
</html>

Пример HTML-тега li с упорядоченным списком

Пояснение: Список отображается с номерами, указывающими на упорядоченную структуру.

Пример значения атрибута в упорядоченных списках

Атрибут value можно использовать для установки пользовательского значения для элементов упорядоченного списка:

<!DOCTYPE html>
<html>
    <body>
        <h2>Top 3 Movies</h2>
        <ol>
            <li value="5">The Shawshank Redemption</li>
            <li value="2">The Godfather</li>
            <li value="10">The Dark Knight</li>
        </ol>
    </body>
</html>

Пример значения атрибута в упорядоченных списках

Объяснение: Атрибут value переопределяет нумерацию по умолчанию для элементов списка.

Стилизация тега <li> с помощью CSS

Вы можете настроить внешний вид элементов списка с помощью CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul {
                list-style-type: square;
                padding: 0;
            }

            li {
                color: #007BFF;
                font-size: 16px;
                margin: 5px 0;
            }
        </style>
    </head>
    <body>
        <h2>Features</h2>
        <ul>
            <li>Responsive Design</li>
            <li>Cross-Browser Compatibility</li>
            <li>SEO Optimization</li>
        </ul>
    </body>
</html>

Результат: появится неупорядоченный список с квадратными маркерами, синим текстом и настроенным размером шрифта для элементов списка.

Практическое применение тега <li>

Навигационные меню: используйте <li> внутри <ul> для создания навигационных меню.
Списки дел: представляют задачи или пункты в списке дел.
Пошаговые инструкции: изложите последовательные инструкции, используя упорядоченные списки.
Группировка информации: организуйте связанную информацию в понятные и легко читаемые группы.