Атрибут class тега <tt>
Описание
Атрибут class для тега <tt> позволяет назначать один или несколько CSS-классов элементу, который традиционно используется для отображения текста в моноширинном шрифте (имитация телетайпного текста).
<tt class="code-sample terminal-text">Пример моноширинного текста</tt>
Особенности применения:
- Может содержать несколько классов, разделенных пробелами
- Позволяет переопределить стандартное оформление тега <tt>
- Используется для селекции элементов в JavaScript
- Совместим со всеми современными CSS-свойствами
Примеры стилизации:
<style>
.console-output {
font-family: 'Courier New', monospace;
background-color: #222;
color: #0f0;
padding: 10px;
border-radius: 4px;
}
.error-message {
color: #f00;
font-weight: bold;
}
</style>
<tt class="console-output">System ready</tt>
<tt class="console-output error-message">Error: File not found</tt>
Рекомендации по именованию:
| Тип класса | Пример | Назначение |
|---|---|---|
| По назначению | cli-output |
Для командной строки/терминала |
| По типу контента | code-sample |
Для примеров кода |
| По состоянию | error-text |
Для сообщений об ошибках |
Современные альтернативы:
- Тег <tt> считается устаревшим в HTML5
- Рекомендуется использовать <code>, <samp> или <kbd>
- Для моноширинного текста лучше применять CSS:
font-family: monospace
Рекомендации:
- Используйте семантические имена классов
- Для кода применяйте тег <code> вместо <tt>
- Сочетайте с другими HTML5-элементами для лучшей семантики
- Тестируйте отображение в разных браузерах
Примечание: Хотя тег <tt> поддерживается для обратной совместимости, в новых проектах рекомендуется использовать CSS-стилизацию стандартных элементов.