Das Meta-Tag enthält Metadaten zum HTML-Dokument. Es kann Informationen wie den Namen des Autors, den Titel des Dokuments, Schlüsselwörter und den Zeichensatz enthalten.
Attribute meta:
charset – Gibt die Dokumentkodierung an.
content – Legt den Wert eines mit angegebenen Attributs fest name oder http-equiv.
http-equiv – Entwickelt, um Meta-Tags in Titel umzuwandeln HTTP.
name – Der Name des Meta-Tags legt indirekt auch seinen Zweck fest.
<head> <meta charset="UTF-8"> <meta name="description" content="Dies ist die Beschreibung der Webseite"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Iwan Iwanow"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meine Testseite</title> </head>
<meta name="twitter:title" content="MDN Web Docs" />
Eines der Ergebnisse des Hinzufügens dieser Metadaten ist das Hinzufügen eines Links MDN Web Docs an facebook, es wird mit einem Bild und einer Beschreibung angezeigt, was das Benutzererlebnis verbessert _(User eXperience, UX)_:
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png" /> <meta property="og:description" content="Webdokumentation zu MDN bietet Bietet Informationen zu offenen Webtechnologien, einschließlich HTML, CSS und verschiedenen Website-APIs und progressive Webanwendungen. Die Website enthält auch Materialien für Entwickler zu diesem Thema Mozilla-Produkte wie Developer Tools Firefox." /> <meta property="og:title" content="MDN Web Docs" />
Sie können für verschiedene Geräte unterschiedliche Symbole festlegen. Zum Beispiel auf der Hauptseite MDN:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!-- Für iPad 3 mit High Definition Retina Display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" /> <!-- Für iPhone mit High-Definition-Retina-Display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" /> <!-- Für iPad der ersten und zweiten Generation: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" /> <!-- Für iPhone, iPod Touch ohne Retina und Geräte mit Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> <!-- In anderen Fällen - normal favicon --> <link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png" />
CSS und JavaScript verbinden
<link rel="stylesheet" href="my-css-file.css" /> <script src="my-js-file.js"></script>
CSS und JavaScript einbinden
<script> .............. </script> <style> ................. </style>
Primärsprache der HTML-Seite
<html lang="ru"> <html lang="en-US">
