Атрибут content тега <meta> — значення метаданих
Атрибут content дає значення пов'язане з http-equiv або атрибутом name , в залежності від контексту. Якщо один з цих атрибутів вказано, то атрибут content повинен обов'язково бути присутнім, щоб задати значення.
Загальний опис
автор: NagarD
- Нотатка
-
Атрибут
автор: с3сcontentможе містити більше одного значення, в цьому випадку вони розділяються комами або крапкою з комою.
Синтаксис
<meta content="text">Атрибут content може отримувати єдине значення:
-
text -
Зміст метаінформації.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | ≤12.1 | 12 | ≤6 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута content теґа <meta>
<!DOCTYPE HTML>
<html>
<head>
<title>META</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name = "author" content = "Name Surname">
</head>
<body>
</body
</html>Вміст <head> зроблено видимим самим CSS. Кожен <meta> підписує сам себе: видно, що значення в content не означає нічого без name чи property, і що в charset атрибута content немає взагалі.
HTML
<!DOCTYPE HTML>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>Що насправді лежить у head</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Опис сторінки для сніпета у видачі: одне-два речення на 140-170 символів, без розмітки.">
<meta name="robots" content="noindex, nofollow">
<meta name="theme-color" content="#2f6f9f">
<meta property="og:title" content="Заголовок для соцмереж">
</head>
<body>
<p class="note">Зазвичай нічого з цього на сторінці не видно. Тут CSS увімкнув показ
елементів <code>head</code>, <code>title</code> і <code>meta</code>, а підписи
зібрано з самих атрибутів через <code>attr()</code>.</p>
</body>
</html>CSS
body {
font: 16px/1.6 system-ui, sans-serif;
margin: 12px;
background: #fff;
color: #111;
}
head,
title,
meta {
display: block;
}
style,
script {
display: none;
}
head {
border: 1px solid #cfd4d9;
padding: 10px 14px;
margin-bottom: 14px;
}
title {
font-weight: bold;
margin-bottom: 8px;
}
title::before {
content: '<title> → ';
color: #777;
font-weight: normal;
}
meta {
font-family: ui-monospace, monospace;
font-size: 13px;
padding: 3px 0;
}
meta[charset]::after {
content: 'charset="' attr(charset) '" — у цього мета content НЕМАЄ';
color: #c0392b;
}
meta[name]::after {
content: 'name="' attr(name) '" → content="' attr(content) '"';
}
meta[property]::after {
content: 'property="' attr(property) '" → content="' attr(content) '"';
color: #2f6f9f;
}
.note {
font-size: 14px;
color: #555;
}Коментарі
Коментарів ще немає — будьте першим!