Diese kleine Übersicht gibt einen schnellen Zugriff auf die wichtigsten HTML5-Tags, um Ressourcen (CSS und JavaScript) einzubinden und für responsive Projekte die Viewport-Behandlung korrekt einzustellen. Falls Hilfe bei der Einbindung benötigt wird, helfen wir als Werbeagentur gerne!
Viewport einstellen
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Obwohl viewport als Wert für das name-Attribut noch in keinster Weise standardisiert ist, wird es von allen relevanten Browsern (auf Mobilgeräten) unterstützt.
Der Tag bewirkt, dass die Browser die Seite in der Größe der Gerätepixel anzeigen und nicht versuchen eine große Seite herunter zu skalieren. Peter Paul Koch erklärt die Zusammenhänge hervorragend.
In manchen Projekten ist es notwendig die weiteren Angaben wie user-scalable, minimum-scale und maximum-scale zu nutzen.
CSS einbinden
<head>
<link href="styles.css" rel="stylesheet">
...
</head>
Die Angabe des type-Attributs (type=“text/css“) ist nicht notwendig, da es lediglich einen Hinweis für den Browser darstellt mit welchem MIME-Type er bei der externen Ressource rechnen muss.
Es kommt letztlich auf die Ressource selbst an, welchen Content-Type sie zurückliefert. Der Browser entscheidet dann, ob dieser mit dem Link-Typen stylesheet »verträglich« ist und beim Rendering berücksichtigt wird.
JavaScript einbinden
...
<script src="scripts.js"></script>
</body>
Das type-Attribut am script-Tag verhält sich ähnlich wie bei CSS. Es ist eine Angabe über den MIME-Type der verlinkten Skript-Datei für den User Agent. Wird sie weggelassen, nimmt der Browser standardmäßig type=“text/javascript“ an.
Das End-Tag darf bei script nicht weggelassen werden.
Kommentare