HTML <div> und <main>?
hey leute ich würd mich jetzt nichtmehr als totaler anfänger bezeichnen was das schreiben von webseiten mit html und css angeht aber ich verstehe nicht ganz wann man <div> benutzten soll. außerdem habe ich mal was im <body>-bereich von einem <main> gehört wo anscheinend alles grundlegende von der seite reinkommt aber keiner nutzt das ist das echt so relevant?
6 Antworten
wann man <div> benutzten soll.
Das <div> Element ist ein Container, der selbst eigentlich "nichts" repräsentiert und hauptsächlich zum Gruppieren von "fließenden" Elementen verwendet wird.
außerdem habe ich mal was im <body>-bereich von einem <main> gehört
Das <main> Element gehört zu den neuen semantischen Elementen, die mit HTML5 dazu gekommen sind. Dieses Element repräsentiert den Hauptbereich und darf im Gegensatz zum <div> Element nur einmal im Dokument vorkommen.
aber keiner nutzt das ist das echt so relevant?
Das es keiner nutzt, halte ich für ein Gerücht. Viel mehr ist das genaue Gegenteil der Fall und man die neuen semantischen Elemente wie <main>, <header>, <footer>, <nav>, <section>, <article> und ein paar Weitere schon verwenden sollte.
Egal wie das Layout gestaltet ist, meine Struktur eigentlich immer aus einem Kopf, Haupt- und Fußbereich besteht. Des weiteren eigentlich keine IDs (außer als Hook für JavaScript) sondern Klassen und die BEM Namenskonfession verwende.
Hier ein Beispiel:
<div class="l-container">
<header class="l-header" role="banner">
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">1</a></li>
<li class="nav__item"><a href="#" class="nav__link">2</a></li>
<li class="nav__item"><a href="#" class="nav__link">3</a></li>
<li class="nav__item"><a href="#" class="nav__link">4</a></li>
</ul>
</nav>
</header>
<main class="l-content" role="main">
<!-- Primary content comes here... -->
</main>
<footer class="l-footer" role="contentinfo">
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">1</a></li>
<li class="nav__item"><a href="#" class="nav__link">2</a></li>
<li class="nav__item"><a href="#" class="nav__link">3</a></li>
<li class="nav__item"><a href="#" class="nav__link">4</a></li>
</ul>
</nav>
</footer>
</div>
Falls du dich jetzt über die Klassennamen wunderst. Wie ich schon geschrieben habe, die BEM Namenskonfession verwende. BEM steht wiederum für "Block Element Modifier" und falls es dich interessiert, u.a. auf folgender Website mehr darüber nachlesen kannst.
- BEM (Block, Element, Modifier) – http://getbem.com/naming/
Was den vorangestellten Buchstaben im Klassennamen der Hauptelement angeht. Das ist nichts weiter aus ein Präfix, der mir sofort sagt: "Hi Kumpel, ich bin ein Layout-Element und kein Modul." Normalerweise werden auch Module mit einem Präfix versehen. Hier lediglich der Einrückung wegen weggelassen habe. ;)
LG medmonk
Ja ein Header ist ein Abschnitt.
Was ein Abschnitt ist musst du selbst entscheiden. Falls Du die Hintergrundfarbe ändern willst brauchst Du zum Beispiel auch einen neuen Abschnitt (vorausgesetzt Du willst nur diesen Bereich umfärben..)
Was muss das muss. Solange du nicht nur für einen Standard Text einen div nimmst passt das. ;)
Ich glaube main ist eigentlich für den Hauptinhalt der Seite. Aber genauso gibts nav, footer, header und ganz viele anderen Tags die eigentlich fast keiner nutzt.
Nutze sie wenn du willst. Ansonsten ignoriere sie einfach.
okey danke für deine hifle aber jedoch bräuchste ich eine antwort auf die <div>-frage weil ich das echt nicht verstehe wann man das nutzen soll??? und weshalb
Div nutzt du immer wenn du einen Abschnitt willst oder sons irgendeine art von "Block". Aber was ein div ist solltest du eigentlich schon wissen.
Die anderen haben halt tolle Namen.
Das definierst du. Je nachdem was du brauchst kann das der ganze Body sein, ein Textbereich darin oder eben nur n kleiner farbiger Kasten als Teil des Designs.
Da wo du es brauchst, da brauchst du es halt. Und ein paar unnötige Elemente sind auch nicht schlimm. Wenn dein Code aber zu 50% aus div-Tags besteht, dann ist definitiv was falsch.
Dann hast du entweder irgendwas falsch gemacht oder die Seite nicht neu geladen. Im Zweifelsfall mal mit Strg+F5 die Seite neuladen.
<div> benutzt Du für Abschnitte der Website. Du kannst ihnen z.B. eine andere Hintergrundfarbe geben etc.
Und in den <Body> kommt der gesamte Inhalt der Website. Also nicht die Meta Tags etc.
danke für deine antwort und wher weiß ich jetzt genau das dies ein abschnitt ist i know dumme frage aber wenn ich jetzt header hab mit nav bar ist das ein abschnitt? danach würde dann eine h3 kommen mit <p> element ( langer text ) und dann ist das auch wieder ein abschnitt oderwie?
Der div-Tag (div für division) stellt einen Container dar, der einen bestimmten Bereich der Seite repräsentiert. Ein Dokument lässt sich im Grunde in sehr viele Bereiche aufteilen, bspw. um Elemente zu gruppieren, denen eine bestimmte Eigenschaft zugeordnet werden soll.
Ein plumpes Beispiel dafür:
<div title="Hello World">
<p>Hello</p>
<p>World</p>
</div>
Vor HTML5 gab es Elemente wie article, section, header oder nav noch nicht, daher wurde stattdessen der div-Tag zur Aufteilung des Dokuments genutzt. Um dessen Bereich etwas ausdrucksstärker auszuzeichnen, setze man id- oder class-Attribute auf ihn:
<div class="content">
<div class="left-side">
<!-- Some content -->
</div>
<div class="right-side">
<!-- Some other content -->
</div>
</div>
Mit HTML 5 hast du aber, wie schon angedeutet, mehr Möglichkeiten, deine Container/Elementgruppen spezifischer bzw. ausdrucksstärker auszuzeichnen. Erst wenn es kein einteilendes Element gibt, welches auf deinen Anwendungsfall besser zutrifft, solltest du wieder auf das alte Verfahren (sprich den div-Tag) zurückgreifen.
(...) außerdem habe ich mal was im <body>-bereich von einem <main> gehört (...)
Das main-Tag soll als Container für den zentralen Inhalt dienen, der auf der Seite repräsentiert wird. Von daher darf er im Dokument nur einmal vorkommen.
Ein Vorteil beim Einsatz dieses Elements ist einmal wieder die Ausdrucksstärke. Ein Screenreader könnte an diesem bspw. zwischen Header/Navigation und Hauptartikel unterscheiden und dem Nutzer die Option bieten, ersteres einfacher zu überspringen.
Dem mangelhaften Support dieses Tags durch den IE kann man damit begegnen, dass man das Element explizit als Blockelement kennzeichnet (display: block im CSS) und noch eine Rolle vergibt:
<main role="main"></main>
(...) aber keiner nutzt das (...)
Das stimmt nicht.
(...) ist das echt so relevant?
Nein, relevant ist es nicht.
Wie gut du dein Dokument letzten Endes beschreibst, ist zu guter Letzt deine Entscheidung. Problematischer kann eine schlechte Semantik wohl erst im Bezug zu SEO-Themen oder Web accessibility werden.
(...) und woher weiß ich jetzt wann ein abschnitt zuende ist? (...)
Eine anständige Einrückungsstrategie wäre ein Anfang.
<div>
<div>
<div>
</div>
</div>
</div>
Einige Entwickler verwenden an dieser Stelle nun auch noch Kommentare:
<div>
<div> <!-- start main article -->
<!-- some content -->
</div> <!-- end main article -->
<div> <!-- start footer -->
<!-- footer ... -->
</div> <!-- end footer -->
</div>
Ich persönlich finde so etwas aber immer unschön.
Dem mangelhaften Support dieses Tags durch den IE kann man damit begegnen,
Ich nenne das mittlerweile "friss oder stirb". Ich habe sogar mal mit dem Gedanken gespielt, eine Art "404 only for IE" umzusetzen. Quasi als kreativer Wink mit dem Zaunpfahl ;)
Ich persönlich finde so etwas aber immer unschön.
Das ist auch unschön und hat meiner Meinung nach nichts auf einer Seite laufenden verloren. Bei der Entwicklung und zur Dokumentation völlig ok. Am Ende sollte es aber rausfliegen. Ein Uhrmacher ja nicht auf jedes Zahnrad schreibt, welche Pinzette er wo benutzt hat. ;)
Das ist schon richtig und sehr wohl unterscheide, ob ich jetzt für einen Kunden arbeite oder ob ein eigenen Projekt umgesetzt wird. Ich biege nicht alles mögliche auf den IE zurecht. Ich wäge ab, ob der Aufwand für ein bisschen "Schickimicki" sinnvoll ist oder nicht. ;)
das ding ist ich hab angst das ich das mit <div> übertreiben werde und mir das angewöhnen werde was nicht gut ist will später den code so klein halten wie möglich..