Тег HTML <basefont>
Тег <basefont> задаёт размер и цвет шрифта по умолчанию для текста страницы. Может использоваться внутри <head> или <body>.
Тег <basefont> задавал размер, цвет и гарнитуру шрифта по умолчанию для всего текста на странице. Он мог располагаться внутри тегов <head> или <body>, и весь текст, для которого не был явно задан шрифт, наследовал эти значения.
На этой странице описано, что делал <basefont>, почему он был удалён из HTML, и приведён точный CSS-код, который следует использовать сегодня для достижения того же результата.
<basefont> — это устаревший HTML-тег. Он был удалён в HTML5 и не должен использоваться в новых страницах. В разделах ниже показана современная замена на CSS.
Почему <basefont> является устаревшим
<basefont> — это презентационный тег: он смешивает информацию об оформлении непосредственно с HTML-разметкой. Современный HTML следует принципу разделения ответственности — HTML описывает структуру и смысл содержимого, тогда как CSS отвечает за всё оформление (шрифты, цвета, размеры, отступы). Поскольку <basefont> существовал исключительно для задания оформления, HTML5 полностью упразднил его в пользу CSS.
Два практических следствия:
- Поддержка браузерами ненадёжна. Даже до HTML5 поведение отличалось в разных браузерах, а современные браузеры могут полностью игнорировать
<basefont>. Нельзя рассчитывать на то, что он что-либо отобразит. - Это невалидный HTML5. Документ, использующий
<basefont>, не пройдёт валидацию, и инструменты (линтеры, редакторы, фреймворки) будут его отмечать.
Вы всё ещё можете встретить <basefont> при сопровождении старых сайтов, шаблонов электронных писем или систем управления контентом, написанных до HTML5. В таких случаях правильное решение — удалить тег и заменить его эквивалентным CSS-кодом, показанным ниже.
Синтаксис
Тег <basefont> является пустым, то есть закрывающий тег не требуется. Однако в XHTML тег (<basefont>) должен быть закрыт (<basefont/>).
Пример использования тега HTML <basefont>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<basefont color="green" face="Helvetica" size="14">
</head>
<body>
<h3>Title of the text.</h3>
<p>Paragraph of the text.</p>
</body>
</html>Современная замена на CSS
Чтобы воспроизвести то, что делал <basefont>, задайте соответствующие CSS-свойства для селектора body. Каждый старый атрибут однозначно сопоставляется с CSS-свойством:
Атрибут <basefont> | CSS-свойство | Пример значения |
|---|---|---|
color | color | green |
face | font-family | Helvetica |
size | font-size | 14px |
Также можно записать все три сразу с помощью сокращённого свойства font.
Почему именно body? <basefont> работал, устанавливая общие для всей страницы значения по умолчанию, которые наследовал каждый элемент, если только не задавал собственный шрифт. CSS воспроизводит это через каскад: color, font-family и font-size — наследуемые свойства, поэтому при их задании на body каждый дочерний элемент (заголовки, абзацы, списки и т. д.) автоматически наследует те же значения — если только более специфичное правило не переопределяет их. Таким образом, стилизация body даёт тот же единственный источник истины, что некогда обеспечивал <basefont>, но с валидным HTML5 и стабильным поведением во всех браузерах.
Пример замены <basefont> на CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
color: green;
font-family: Helvetica;
font-size: 14px;
}
</style>
</head>
<body>
<h3>Title of the text.</h3>
<p>Paragraph of the text.</p>
</body>
</html>Это даёт тот же зелёный текст Helvetica размером 14px, что и устаревший пример <basefont color="green" face="Helvetica" size="14"> выше — но проходит валидацию как HTML5 и стабильно отображается во всех браузерах.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| color | color | Задаёт цвет текста по умолчанию. Не поддерживается в HTML5. |
| face | font_family | Определяет гарнитуру шрифта текста. Не поддерживается в HTML5. |
| size | number | Задаёт размер шрифта. Не поддерживается в HTML5. |