Fehler 404
Die Seite, die du gesucht hast, gibt es nicht (mehr). Dafür kannst du die Bausteine unserer kaputten Startseite verschieben – und so ganz nebenbei lernen, wie eine Webseite mit HTML5 aufgebaut ist.
Ziehe die Elemente aus der Kiste auf die gestrichelten Plätze. Wenn ein Element richtig sitzt, rastet es magnetisch ein – und beim Darüberfahren verrät es dir, ob es ein HTML5- oder ein HTML-4-Element ist. Wer nicht weiterweiß, drückt „Alles reparieren“. Am besten startest du danach noch einmal von vorne und findest über unser Menü oben, was du suchst. Viel Erfolg – und bis bald!
Young Business School
HAK / HAS Voitsberg
Fehler 404
Kein Problem: Wir zeigen dir, wie Webdesign und Content-Management funktioniert!
Eine Webseite besteht aus Bereichen oben, in der Mitte und unten: dem <header> (Kopf), dem <main> (Hauptinhalt) und dem <footer> (Fuß). Im main steht die Hauptüberschrift <h1> (bei uns die „404“), darunter weitere Überschriften wie <h2> („Dein Start in die Wirtschaft von morgen.“) und Text in <p>-Absätzen. Seit HTML5 gibt es zusätzlich Elemente, die die Bedeutung der Inhalte beschreiben – für Suchmaschinen, Screenreader und für dich als Entwickler*in. Die klassischen Elemente aus HTML 4 (Überschriften, Absätze, Links, Bilder) gibt es weiterhin.
<body>
<header> <img> <nav>…</nav> <a>Jetzt anmelden</a> </header>
<main>
<h1>404</h1>
<h2>Dein Start in die Wirtschaft von morgen.</h2> <p>…</p>
<section> <!-- Abschnitt „Schwerpunkte“ -->
<article> <!-- eigenständige Karte -->
<figure> <img> <figcaption>…</figcaption> </figure>
</article>
…
</section>
<aside>Ads</aside> <!-- Nebeninhalt -->
<address>Franz-Jonas-Straße 13–15</address>
</main>
<footer>Young Business School · EU-Zeichen</footer>
</body><header> HTML5 KopfbereichDer Kopf einer Seite oder eines Abschnitts: Logo, Seitentitel, Navigation, oft auch eine Suche oder ein Anmelde-Knopf. Eine Seite darf mehrere header haben (z. B. auch im article), aber der oberste ist der Seitenkopf.
<header>
<img src="logo.png" alt="Logo">
<nav>…</nav>
</header><nav> HTML5 NavigationWichtige Linklisten: das Hauptmenü, das Inhaltsverzeichnis oder die Brotkrumen-Navigation. Nicht jede Linkgruppe ist eine nav – nur die zentralen Wegweiser. Screenreader springen direkt dorthin.
<nav>
<a href="index.html">Startseite</a>
<a href="schule.html">Schule</a>
</nav><main> HTML5 HauptinhaltDer einzigartige Hauptinhalt der Seite – alles, was nur auf dieser Seite steht. main gibt es genau EINMAL pro Seite und darf nicht in header, footer, nav, article oder aside stehen. Hier sitzt auch die Seitenüberschrift h1.
<main>
<h1>404</h1>
…
</main><section> HTML5 AbschnittEin thematischer Abschnitt mit zusammengehörigen Inhalten, am besten mit eigener Überschrift (h2 – h6). Beispiel: der Bereich „Unsere drei Schwerpunkte“. Ist etwas nur ein Layout-Rahmen ohne Thema, nimmt man weiterhin div.
<section>
<h2>Unsere Schwerpunkte</h2>
<article>…</article>
</section><article> HTML5 Eigenständiger BeitragEin abgeschlossener Inhalt, der auch für sich allein Sinn ergibt – etwa ein Newsbeitrag, Blogpost, Magazinartikel oder (wie hier) die Karte eines Schwerpunkts. Faustregel: Könnte man ihn ausschneiden und woanders veröffentlichen?
<article>
<h3>Industrial Business HAK</h3>
<p>…</p>
</article><aside> HTML5 NebeninhaltErgänzendes, das zum Hauptinhalt passt, aber nicht dazugehört: Seitenleiste, Zusatzinfo, Zitat-Kasten oder Werbung (Ads). Würde man es entfernen, bliebe der Haupttext vollständig.
<aside>
<p>Werbung</p>
</aside><figure> HTML5 Bild, Diagramm oder Codebeispiel mit BeschriftungContainer für Inhalte, die zum Text gehören, aber auch an anderer Stelle stehen könnten: Fotos, Diagramme, Tabellen, Codebeispiele. Zusammen mit figcaption ergibt das ein beschriftetes Bild.
<figure>
<img src="hak.jpg" alt="Die Schule">
<figcaption>Unsere Schule</figcaption>
</figure><figcaption> HTML5 BildunterschriftDie Beschriftung oder Beschreibung zu einem figure – immer direkt innerhalb des figure, meist am Anfang oder Ende. Sie ist mit dem Bild fest verbunden (auch für Screenreader).
<figcaption>Industrial Business HAK</figcaption><address> HTML5 KontaktinformationKontaktdaten der Person oder Organisation, für die der nächste article bzw. die ganze Seite zuständig ist: Anschrift, E-Mail, Telefon. Gehört NICHT für beliebige Adressen im Text (z. B. Lieferadresse) – nur für Kontaktangaben.
<address>
Franz-Jonas-Straße 13–15<br>
8570 Voitsberg
</address><footer> HTML5 FußbereichDer Abschluss einer Seite oder eines Abschnitts: Copyright, Impressum, Kontakt, Förderhinweise und Logos (bei uns Young Business School und das EU-Zeichen). Wie header kann auch ein article oder section einen footer haben.
<footer>
<p>Young Business School</p>
</footer><h1 – h6> HTML 4 ÜberschriftenSechs Überschriftenebenen (HTML 4 und älter). Die h1 ist die Hauptüberschrift der Seite und gibt es einmal; darunter folgen h2 (Abschnitte), h3 (Unterabschnitte) usw. – ohne Ebenen zu überspringen. Nie nur der Größe wegen verwenden.
<h1>404</h1>
<h2>Dein Start in die Wirtschaft von morgen.</h2><p> HTML 4 AbsatzEin Textabsatz (HTML 4 und älter). Jeder zusammenhängende Gedanke bekommt ein eigenes p.
<p>Industrial Business · Creative Business · Praxis HAS</p><a> HTML 4 LinkVerweist auf eine andere Seite oder Stelle (HTML 4 und älter). Das Ziel steht im Attribut href. Aussagekräftige Linktexte („Jetzt anmelden“, nicht „hier klicken“) helfen allen.
<a href="anmeldung.html">Jetzt anmelden</a><img> HTML 4 BildBindet ein Bild ein (HTML 4 und älter). src nennt die Datei, alt beschreibt es für Screenreader und wenn das Bild nicht lädt. Dekorative Bilder bekommen alt="". Ein img steht auch häufig in einem figure.