Атрибут type тега <ul>
Описание
Атрибут type для тега <ul> определяет вид маркера списка. Однако этот атрибут устарел в HTML5 и не рекомендуется к использованию в современной веб-разработке.
Важно: Атрибут type является устаревшим (deprecated) в HTML5. Для изменения вида маркеров списка следует использовать CSS-свойство
Пример использования (устаревший):
list-style-type.
<ul type="square">
<li>Пункт с квадратным маркером</li>
<li>Еще один пункт</li>
</ul>
Значения атрибута (устаревшие):
| Значение | Вид маркера | CSS-эквивалент |
|---|---|---|
disc |
Закрашенный кружок (по умолчанию) | list-style-type: disc |
circle |
Незакрашенный кружок | list-style-type: circle |
square |
Закрашенный квадрат | list-style-type: square |
Современная альтернатива с CSS:
<style>
.square-markers {
list-style-type: square;
}
.custom-markers {
list-style-type: "→ ";
}
</style>
<ul class="square-markers">
<li>Пункт с квадратным маркером</li>
<li>Еще один пункт</li>
</ul>
<ul class="custom-markers">
<li>Пункт с кастомным маркером</li>
</ul>
Почему type устарел:
- Нарушает принцип разделения структуры и представления
- Ограниченный набор вариантов маркеров
- Не поддерживает современные возможности стилизации
- Не работает с псевдоэлементами
Преимущества CSS-подхода:
- Больше вариантов маркеров (более 20 встроенных типов)
- Возможность использовать кастомные символы и изображения
- Гибкое позиционирование маркеров
- Поддержка анимации и сложных эффектов
Примеры современных маркеров:
<style>
.decimal-markers { list-style-type: decimal; }
.lower-alpha { list-style-type: lower-alpha; }
.custom-image { list-style-image: url('marker.png'); }
.emoji-markers { list-style-type: "✓ "; }
</style>
<ul class="decimal-markers">
<li>Нумерованный вид</li>
</ul>
<ul class="emoji-markers">
<li>С кастомным символом</li>
</ul>
Историческая справка: В HTML4 атрибут type был основным способом изменения вида маркеров списка, но в HTML5 эта функция полностью перешла к CSS, что позволило реализовать более сложные и гибкие варианты оформления.