Prinzipiell gilt …
- DocType-Angabe lautet schlicht: <!doctype html>
- ins HTML-Element gehört ein LANG-Attribut wie: <html lang="de-DE">
lang kann ebenso in <span> verwendet werden, um Passagen zu kennzeichnen - zwingend im HEADER-Bereich sind <title> und die META-Angabe des Zeichensatzes:
<meta charset="utf-8"> - weitere wichtige META-Angaben:
<meta name="author" content="Verfassername">
<meta name="description" content="eine Beschreibung des Seiteninhalts">
sowie mindestens <meta name="viewport" content="width=device-width"> - zur Kennzeichnung von Browser-Tabs ist die Verwendung eines 🐻️ FAVICONs sinnvoll (PNG, JPG, ICO, AVIF)
für Retina-Displays werden Größen bis zu 180×180 Pixel empfohlen
<link rel="icon" href="pfad_zu/favicon.avif" type="image/avif"> - Standardbestandteil des HEADERs sind die Stylesheets (möglichst als separate Datei) sowie Scripte (möglichst als separate Datei)
<link rel="stylesheet" href="pfad_zu/styledatei.css">
<script src="pfad_zu/scriptdatei.js" defer></script>
DEFER bewirkt Laden des Scripts erst NACH vollständigem Laden des HTML-Codes (damit auch alle Elemente ansprechbar, weil geladen, sind) - Abkürzungen im Lesetext sind mit ABBR zu kennzeichnen und sollen ein TITLE-Attribut beinhalten
also wie: Verwende HTML nur mit CSS - jede Seite soll einen Zugriff auf das Impressum haben oder wenigstens
einen ADDRESS-Bereich für Kontakte (bezogen auf ARTICLE oder BODY) im FOOTER - modernes HTML reduziert massiven DIV-Gebrauch durch (gliedernde) semantische :
<header>Seitenkopf</header>
<nav>Navigationselemente</nav> (evtl. mehrfach)
<main>Hauptteil der Seite</main>
mit einem (od. mehreren) <article>Artikeln(n)</article>,
gegliedert in (thematische) <section>Abschnitte</section> sowie
begleitende <aside>Nebeninformationen</aside>
<footer>Seitenfußbereich (Kontakt, Impressum, Datum usw.)</footer> - der Layout-Entwurf soll beginnen mit der Gestaltung für 📱️Smartphones;
Anpassungen für 💻️ Tablets und große 🖥️ Bildschirme erfolgen über Breakpoints in CSS wie
@media (min-width:1200px) {abweichende CSS-Formatierungen} - kleinste VIDEO-Größen lassen sich im Format WEBM erzeugen;
kleinste IMG-Größen liefert AVIF (neben WEBP [und besser als JPG]) - bei bildlastigen Seiten sollte die IMGs erst geladen werden, wenn sie in den VIEWPORT geraten: mittels des Attributs loading="lazy"
Bilder, die sofort zu laden sind per loading="eager"
