**: Dieses semantische HTML5-Element wird verwendet, um den Hauptinhalt der Webseite zu umschließen, der einzigartig für das einzelne Dokument ist. * **

**: Dies ist ein weiteres semantisches HTML5-Element, das verwendet wird, um zusammenhängende Inhalte zu gruppieren. Jede Sektion des Rezepts (wie Name, Zutaten, Zubereitung, etc.) wurde in einem eigenen

-Element platziert. * **

,

**: Dies sind Überschriftenelemente, die zur Strukturierung des Inhalts verwendet werden.

ist die höchste Ebene,

ist eine untergeordnete Ebene. * ****: Dieses Element wird verwendet, um ein Bild in die Webseite einzufügen. Das src-Attribut gibt den Pfad zur Bilddatei an, und das alt-Attribut bietet eine textbasierte Alternative für den Fall, dass das Bild nicht geladen werden kann. *
: Dieses Element wird verwendet, um einen Absatz Text darzustellen. *
und
: Diese Elemente werden verwendet, um eine ungeordnete (nicht nummerierte) Liste darzustellen.
ist das umschließende Element für die Liste, und jedes
repräsentiert ein einzelnes Listenelement. *
: Dieses Element wird verwendet, um eine geordnete (nummerierte) Liste darzustellen. Es funktioniert ähnlich wie
, aber die Elemente in der Liste (
) werden nummeriert. * ****: Dieses Element wird verwendet, um Text stark hervorzuheben, in den meisten Browsern wird der Text fett dargestellt. Es wird verwendet, um Mengenangaben in der Zutatenliste hervorzuheben. Diese Elemente zusammen ergeben eine gut strukturierte, semantisch korrekte HTML-Seite, die das Rezept auf klare und ansprechende Weise darstellt. ---- {{tag>m293-LU03}} [[https://github.com/bzz-m293/M293_LU03_02_Recipe/tree/solution|Repository]] [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Kevin Maurizi, Marcel Suter