EMZETT.Kurz: 1. <!DOCTYPE html>, lang, charset, viewport, title, description 2. Genau eine <h1>, logische Überschriften 3. Semantische Elemente und Landmarks 4. Alle Bilder mit alt, Größe und loading=“lazy” (außer oberstes) 5.
Teil des Kurses HTML + CSS
Kapitel 27 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.
HTML-Elemente nach Aufgabe
| Aufgabe | Elemente |
|---|---|
| Gerüst | html, head, body, title, meta, link, script, style |
| Gliederung | header, nav, main, section, article, aside, footer, h1 bis h6 |
| Text | p, br, hr, strong, em, mark, small, code, pre, blockquote, q, cite, time, abbr, kbd, sub, sup |
| Listen | ul, ol, li, dl, dt, dd |
| Links und Medien | a, img, picture, source, video, audio, track, iframe, svg, canvas, figure, figcaption |
| Tabellen | table, caption, thead, tbody, tfoot, tr, th, td, colgroup, col |
| Formulare | form, label, input, textarea, select, option, optgroup, datalist, button, fieldset, legend, progress, meter, output |
| Interaktiv | details, summary, dialog, Attribut popover |
| Neutral | div, span |
Wichtige Attribute
| Attribut | Wo | Bedeutung |
|---|---|---|
href | a, link | Ziel |
src, srcset, sizes | img, script, video | Quelle |
alt | img | Ersatztext |
id, class | alle | Bezeichner, Gruppen |
type, name, value | input, button | Art, Name, Wert |
required, disabled, readonly, checked, selected | Formulare | Zustände |
placeholder, pattern, min, max, step | input | Hinweise und Grenzen |
for | label | gehört zu Feld mit dieser id |
target, rel, download | a | Verhalten |
loading="lazy", width, height | img, iframe | Ladeverhalten und Größe |
lang, dir, title, hidden, tabindex | alle | Sprache, Richtung, Tooltip, versteckt, Fokus |
aria-*, role | alle | Barrierefreiheit |
data-* | alle | eigene Daten |
Selektoren
| Selektor | Wählt |
|---|---|
* | alles |
p, .klasse, #id | Element, Klasse, ID |
a b, a > b, a + b, a ~ b | Nachfahre, Kind, Nachbar, Geschwister danach |
[attr], [attr="x"], [attr^="x"], [attr$="x"], [attr*="x"] | Attribut vorhanden, gleich, beginnt, endet, enthält |
:hover, :focus-visible, :active, :checked, :disabled | Zustände |
:first-child, :last-child, :nth-child(2n), :not(x), :is(a, b), :has(x) | Struktur und Logik |
::before, ::after, ::first-line, ::placeholder, ::marker, ::selection | Pseudo-Elemente |
Häufige CSS-Eigenschaften
| Bereich | Eigenschaften |
|---|---|
| Farbe | color, background, opacity, accent-color |
| Text | font-family, font-size, font-weight, line-height, text-align, letter-spacing, text-decoration, text-transform, white-space, text-overflow |
| Box | width, max-width, height, min-height, padding, margin, border, border-radius, box-sizing, overflow, box-shadow, outline |
| Anzeige | display, visibility, position, top/right/bottom/left/inset, z-index, float |
| Flexbox | flex-direction, flex-wrap, justify-content, align-items, align-content, gap, flex, align-self, order |
| Grid | grid-template-columns, grid-template-rows, grid-template-areas, grid-column, grid-row, gap, place-items, grid-auto-flow |
| Bewegung | transform, transition, animation, @keyframes, will-change |
| Sonstiges | cursor, pointer-events, user-select, object-fit, aspect-ratio, filter, backdrop-filter, mix-blend-mode, clip-path, scroll-snap-type |
Werte und Einheiten
| Einheit | Wofür |
|---|---|
px | feste Pixel (Rahmen, feine Details) |
rem, em | relative Schriftgrößen und Abstände |
%, vw, vh, dvh, ch, fr | relative Größen |
deg, s, ms | Winkel, Zeit |
calc(), min(), max(), clamp(), var() | Funktionen |
Zentrieren: alle Wege
| Situation | Lösung |
|---|---|
| Block horizontal | margin: 0 auto; width: ... |
| Text horizontal | text-align: center |
| Alles mittig (Flex) | display: flex; justify-content: center; align-items: center |
| Alles mittig (Grid) | display: grid; place-items: center |
| Absolut positioniert | position: absolute; inset: 0; margin: auto oder top: 50%; left: 50%; translate: -50% -50% |
Breakpoints und Media Queries
@media (min-width: 600px) { ... } /* ab 600px */
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }
@media (hover: hover) and (pointer: fine) { ... }
@media print { ... }
@container (min-width: 400px) { ... }Standardschriften
system-ui, -apple-system, "Segoe UI", Roboto, sans-serif /* modern, schnell */
Georgia, "Times New Roman", serif /* klassisch */
ui-monospace, "SF Mono", Menlo, Consolas, monospace /* Code */Checkliste für eine gute Seite
<!DOCTYPE html>,lang,charset,viewport,title,description- Genau eine
<h1>, logische Überschriften - Semantische Elemente und Landmarks
- Alle Bilder mit
alt, Größe undloading="lazy"(außer oberstes) - Alle Formularfelder mit
<label> - Kontrast und sichtbarer Fokus
- Alles per Tastatur nutzbar
- Responsiv getestet (Handy, Tablet, Desktop, 200 % Zoom)
- Lighthouse-Werte geprüft (Leistung, Barrierefreiheit, SEO)
- Validiert mit validator.w3.org
Weiterlernen
- MDN Web Docs (developer.mozilla.org): die beste Referenz
- web.dev: Lernpfade von Google (Responsive Design, CSS, Leistung)
- CSS-Tricks, Smashing Magazine: Praxisartikel
- Flexbox Froggy, Grid Garden: Spiele zum Üben
- JavaScript als nächster Schritt für Interaktivität
Quiz zur Selbstkontrolle
Welche Seite ist die Standardreferenz für HTML und CSS?
- MDN Web Docs (richtig)
- Wikipedia
- YouTube
Wie zentrierst du Inhalte mit Grid in einer Zeile?
- display: grid; place-items: center (richtig)
- text-align: center
- float: center
- margin: center
Wo prüfst du, ob eine CSS-Funktion in allen Browsern läuft?
- caniuse.com oder MDN (richtig)
- Im Wörterbuch
- In der Konsole
- Im Task-Manager
Weiter im Kurs
Zurück: Projekt: Eine komplette Landing Page
Alle Kapitel: HTML + CSS im Überblick