HTML тег <tt>
HTML тег <tt> устарел и удалён из HTML5. Узнайте, какие современные теги и CSS использовать для моноширинного текста.
Тег <tt> (телетайп) является устаревшим и был удалён из HTML5 — не используйте его. Он отображал встроенный текст моноширинным шрифтом фиксированной ширины, как на телетайпе или печатной машинке. Современные браузеры могут по-прежнему его отображать, но он не несёт семантического значения и не является допустимым HTML. Используйте семантический элемент или CSS.
<tt> — это устаревший HTML-тег. Он упомянут только для справки. Новые документы не должны его использовать.
Термины monotype, monospace и non-proportional взаимозаменяемы: все они описывают шрифт, символы которого занимают одинаковую горизонтальную ширину, благодаря чему столбцы текста выравниваются.
Чем заменить <tt>
<tt> был сугубо презентационным — он ничего не говорил о том, почему текст отображался моноширинным. HTML5 заменяет его элементами со смысловым значением, а также CSS для тех редких случаев, когда нужен только моноширинный вид.
| Что нужно разметить… | Использовать | Пример |
|---|---|---|
| Исходный код, тег, команду | <code> | <code>git commit</code> |
| Ввод с клавиатуры, который должен ввести пользователь | <kbd> | <kbd>Ctrl</kbd> |
| Вывод программы | <samp> | <samp>Build passed</samp> |
| Имя переменной или заполнителя | <var> | <var>filename</var> |
| Моноширинный вид только для представления | класс CSS с font-family: monospace | см. ниже |
<pre> не является прямой заменой: тег <pre> сохраняет пробелы и переносы строк (предварительно отформатированный текст). Он касается макета, а не смысла текста, и часто используется совместно с <code> для блоков кода.
Выбор подходящего элемента
- Используйте семантический элемент (
<code>,<kbd>,<samp>,<var>), когда текст что-то означает — это улучшает доступность и позволяет стилизовать каждый вид по-разному. Все четыре по умолчанию отображаются моноширинным шрифтом. - Используйте CSS только тогда, когда нужен моноширинный вид без специального значения. Применяйте его через класс или правило
<style>, а не через атрибутstyleв самом элементе, чтобы представление оставалось в таблице стилей.
Семантические замены в действии
Этот пример показывает совместное использование <code>, <kbd> и <samp> в реалистичной инструкции:
<!DOCTYPE html>
<html>
<head>
<title>Replacing the tt tag</title>
</head>
<body>
<p>
Stage your changes with <kbd>git add .</kbd>, then run
<code>git commit -m "message"</code>.
</p>
<p>
On success Git prints <samp>1 file changed</samp>.
</p>
</body>
</html>CSS для моноширинного оформления
Когда нужен только моноширинный вид — без семантического значения — определите класс в CSS вместо использования <tt> или атрибута style:
<!DOCTYPE html>
<html>
<head>
<title>Monospace text with CSS</title>
<style>
.mono {
font-family: monospace;
}
</style>
</head>
<body>
<p>This is an ordinary text.</p>
<p class="mono">And this is monospaced text.</p>
</body>
</html>Подробнее о стеках шрифтов см. в разделе свойства CSS font-family.
Устаревший синтаксис <tt> (не использовать)
Только для справки: устаревший элемент <tt> записывался как пара тегов с содержимым между ними:
<!-- Obsolete: removed from HTML5. Shown for reference only. -->
<p>This is an ordinary text.</p>
<p><tt>And this is a teletype text.</tt></p>