Атрибут charset тега <link> — кодування пов'язаного файлу
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<a charset="value">Атрибут charset може отримувати єдине значення:
-
charaster_set -
Символьний набір зв'язуваного документа.
Загальні набори символів:
- UTF-8 - Кодування символів для Unicode;
- ISO-8859-1 - Кодування символів для латинського алфавіту;
- та інші. Теоретично, будь-який символ-набір може бути використаний, але жоден браузер не розуміє кожен з них. Чим ширше символьний набір використовується, тим вища ймовірність того, що браузер зрозуміє це.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | ≤12.1 | 12 | ≤6 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута charset теґа <link>
HTML
<link href="char.html" rel="parent" charset="utf-8">
<h2>Найкращий друг людини</h2>
<p><b>Собаки з давніх пір з гідністю несуть заслужене їм почесне звання – перший друг. І донині, серед інших друзів людини, собаки йдуть під номером один. Це настільки вкоренилося у свідомості, що навряд чи якась інша тварина зможе зайняти це місце.</p>CSS
p {color: #008080;}
body {background-color:#FFE4E1;}Що саме видно, коли кодування прочитано не так. Перший рядок — правильний текст, далі той самий текст, прочитаний як windows-1251 і як latin-1, і нарешті зворотний випадок із ромбиками. Знизу — розмітка, яка потрібна насправді: один meta на сторінку й @charset першим рядком файла стилів.
HTML
<p class="head">Один і той самий текст, прочитаний по-різному</p>
<table>
<tr><th>Як прочитано</th><th>Що бачить людина</th></tr>
<tr class="ok"><td>UTF-8 — правильно</td><td>Привіт, світе</td></tr>
<tr class="bad"><td>UTF-8 прочитано як windows-1251</td><td>РџСЂРёРІС–С‚, світе</td></tr>
<tr class="bad"><td>UTF-8 прочитано як latin-1</td><td>Привіт, Ñвіте</td></tr>
<tr class="bad"><td>windows-1251 прочитано як UTF-8</td><td>�����, ����</td></tr>
</table>
<p class="head">Що писати насправді</p>
<pre class="code"><!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head></pre>
<p class="note">А якщо файл стилів справді не в UTF-8, кодування називають у ньому самому,
найпершим рядком, і жодного атрибута на посиланні не треба:</p>
<pre class="code">@charset "windows-1251";
body { font-family: system-ui, sans-serif; }</pre>CSS
.head {
margin: 22px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
table {
max-width: 620px;
border-collapse: collapse;
}
td,
th {
padding: 6px 10px;
border: 1px solid #b9c6d8;
text-align: left;
}
th {
background: #eef3fb;
}
.ok td:last-child {
background: #f3fbf4;
color: #2c7a3f;
font-weight: 600;
}
.bad td:last-child {
background: #fff4f4;
color: #c0392b;
}
.code {
max-width: 620px;
margin: 0;
padding: 10px 12px;
overflow-x: auto;
border-left: 4px solid #2f6fd0;
background: #f6f9ff;
font: 14px/1.6 ui-monospace, monospace;
}
.note {
max-width: 620px;
margin: 16px 0 8px;
color: #5a6472;
}Різниця між HTML 4.01 та HTML5
Атрибут charset для тегу <link> не підтримується у HTML5.
Коментарі
Коментарів ще немає — будьте першим!