Benutzt ihr beim Programmieren div-Tags?
Hallo liebe Community,
mir ist nun mehrmals aufgefallen, dass viele Programmierer keine div-Boxen mehr benutzen, da diese scheinbar "veraltet" sind.
Stattdessen benutzen sie häufig: nav, header, footer, article, section etc..
Wie sieht das denn bei euch aus. Benutzt ihr weiterhin divs?
Bitte möglichst mit Begründung.
Ist es überhaupt möglich die divs ganz auszulassen oder wäre es eher in einigen Situationen komplizierter und zum Nachteil ?
Ich hätte eine kleine Rückfrage:
Um Elemente zu bauen benutzt man häufig ebenfalls div class/id/tags (z.B. um einen caroussel/slider zu bauen. Läuft eventuell hierbei die Gefahr, dass beispielsweise der Slider welche u.a. mit divs bearbeitet wurde, nicht oder fehlerhaft auf einigen Seiten angezeigt wird ?
5 Antworten
(...), da diese scheinbar "veraltet" sind.
Mit HTML5 sind neue Elemente in den Standard eingeflossen, mit denen sich bestimmte Inhalte besser / ausdrucksstärker beschreiben lassen.
So ist es nicht mehr notwendig, den Zweck jeder Box z.B. über Kommentare (auf Entwicklerebene) und Attribute (wie das class-Attribut) mitzuteilen. Ein Entwickler kann auf kürzerem Weg eine klare Seitenstruktur aufbauen.
Das div-Element selbst ist nicht veraltet, doch im Gegensatz zu article, section, u.ä. ohne semantische Bedeutung.
Wie sieht das denn bei euch aus. Benutzt ihr weiterhin divs?
Wenn die Möglichkeit besteht, Inhalte mit einem der neuen Elemente passend zu beschreiben, würde ich empfehlen, auch davon Gebrauch zu machen. Das ist soweit auch das, wozu der W3C rät:
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
In den Fällen, in denen du einfach nur Elemente aus technischer Sicht gruppieren möchtest, um bspw. einfacher Attribute/Styles auf die Kindelemente wirken zu lassen, bleibt das div-Element (als Hilfscontainer) weiterhin sinnvoll.
Beispiel:
<div style="column-gap:10px; display:flex; font-size:25px">
<p>Some text</p>
<p>Some other text</p>
<blockquote>Some cite</blockquote>
</div>
Hier werden mehrere Elemente mit Textinhalt horizontal nebeneinander positioniert und mit einer expliziten Schriftgröße versehen. Weiterhin könnte man auf dem Container Event Listener registrieren, mit dem title-Attribut zusätzliche Informationen einstreuen oder beispielsweise eine Sprachinformation über das lang-Attribut ergänzen.
Ohne den Container müsstest du die Elemente auf andere Weise positionieren und die Schriftgröße (sowie andere Informationen) jedem Element einzeln zuweisen.
All das muss nun nicht zwingend mit einer semantisch expliziten Auszeichnung in Zusammenhang stehen. Vielleicht sollen die Paragraphen und das Zitat nur visuell stilisiert werden und stehen mit noch anderen Elementen bereits in einem passenden Kontext (z.B. einem article-Element), welcher nicht nochmal extra aufgebrochen / unterteilt werden soll.
Ist es überhaupt möglich die divs ganz auszulassen oder wäre es eher in einigen Situationen komplizierter und zum Nachteil ?
Es ist möglich, HTML-Dokumente auch ohne ein einziges div-Element zu schreiben. Ob man das Element benötigt, hängt von dem Dokumentinhalt und seiner Zielstruktur ab. Das heißt, man sollte fallabhängig entscheiden, welches Element für Inhalt XY am meisten Sinn macht.
Ein Fall, bei dem es komplizierter wird, ist die automatische Codegeneration. Ein Webbaukasten beispielsweise, der für seine Anwender flexibel bleiben möchte, wird bei der Codegeneration eher auf div-Elemente setzen, da er im Voraus nicht über den logischen Kontext entscheiden kann.
Läuft eventuell hierbei die Gefahr, dass beispielsweise der Slider welche u.a. mit divs bearbeitet wurde, nicht oder fehlerhaft auf einigen Seiten angezeigt wird ?
Das div-Element stellt normalerweise ein Blockelement dar. Das heißt, es besetzt die volle Breite seines Elternelements. Es kann die visuelle Darstellung des Sliders beeinflussen, wenn du es
- gegen Nichtblockelemente austauschst
- gegen Elemente eintauschst, ohne deren benutzerdefinierten Stylings beizubehalten
- gegen Elemente eintauschst, ohne deren Skriptverbindungen beizubehalten (Bsp.: Für die Positionierung der Elemente wird womöglich JavaScript eingesetzt, welches die Slides anhand bestimmter Selektoren ermittelt)
- innerhalb der Sliderstruktur einfach irgendwo hinzufügst
- gegen Elemente eintauschst oder in die Struktur einfügst und noch andere benutzerdefinierte Styles oder Skripte darauf wirken (Bsp.: Ein CSS-Elementselektor, der alle div-Elemente mit einer Hintergrundfarbe versieht)
Auf nonvisueller Ebene solltest du berücksichtigen, dass die div-Elemente selbst (nicht ihr Inhalt) oft von Screenreadern eher ignoriert werden. Sollte das div-Element also auch eine semantische Rolle übernehmen, solltest du entweder ein anderes HTML-Element wählen oder mit aria-Attributen (aria-label, aria-labelledby, role, u.ä.) arbeiten.
In dem Zuge ist ebenso das interaktive Verhalten zu betrachten. Wenn sich notwendige globale Attribute (wie tabindex), die grundsätzliche Baumstruktur oder Selektoren, über die sich Skripte an das Element binden, ändern, dann hat das auch einen Einfluss darauf, wie sich der Slider steuern lässt.
Um Fehler / eine Verhaltensänderung nach einer Bearbeitung auszuschließen, wäre daher ein gewissenhafter Test zu empfehlen. Der inkludiert im besten Fall verschiedene Browser auf verschiedenen Betriebssystemen.
Ich nutze noch recht häufig divs da ich es so gelernt habe. Bin beruflich aber auch kein Web-Entwickler. Würde ich es beruflich machen, würde ich divs wo es geht vermeiden.
Kevin Powell hat da ein super Video zu!
Es geht um Accessibility. Menschen die auf untersützende Technologien wie z.B. die Textausgabe des Browsers angewiesen sind, können oft Elemente mit einem div tag nicht ansteuern.
Viele Webseiten sind von diesen Menschen nicht nutzbar. Das Ziel ist es das Internet zugänglicher zu machen. Gut programmierte Webseiten sollte man komplett mit der Tastatur bedienen können. :-)
Einfach ruhig sein wenn man keine Ahnung hat Meister. Guck dir das Video an das ich verlinkt hab und lern was neues. Oder du lässt es einfach bleiben, verstehst mal wieder nichts von dem was ich kommentiert habe und stachelst weiter rum. Das Internet hat sich seit 2000 ziemlich verändert, weißt du? :)
Keine Ahnung?
Schau mal lieber in den Spiegel bevor du so rummbrüllst und dich lächerlich machst.
1. Schön dass du programieren lernst - Videos sind da aber nicht der beste Weg
2. Und was soll daran neu sein <Button> zu verwenden.
Und in dem Viedeo wird nicht erklärt dass man Divs nicht Schachteln darf oder soll.
Div sind Container und nur als solche sollte man sie auch verwenden
Un wenn du im Video geschaut hättest, würdest du auch sehen dass dort sehr wohl auch Divs geschachtelt sind
Natürlich musst du die richtigen Elemente nehmen und nicht irgend eins dazu vergewaltigen um etwas kompliziert zu erreichen
Natürlich hat sich Day Internet verändert
Was du meinst ist aber das HTML
Ja auch das, mittlerweile sind wir bei Version 5
Leider ist HTML5 noch nicht in allen Browsern komplett umgesetzt, weshalb manchen noch nicht benutzbar ist, aber die Entwicklung geht weiter.
Aber wenn du schon Meinst du hättest da etwas neues gefunden- dann schau es dir genauer an.
Nochmal DIV und Andere Elemente wie z.b. Buttonnav Article Figuren und so weiter sind ganz verschiedene Dinge!
Und sollten folglich nicht einfach vermischt werden.
Gruppieren mit DiV ist aber dennoch normal und oft notwendig
Natürlich benutzt man immernoch div
nav, header, footer, article, section etc. Sind ja nur Sonderformen davon.
Div werden doch auch gebraucht um Elemente zu gruppieren z.b. mit gemeinsamen Hintergrund oder bei Grid oder ähnliches
Zu deiner Zsatzfrage
Läuft eventuell hierbei die Gefahr, dass beispielsweise der Slider welche u.a. mit divs bearbeitet wurde, nicht oder fehlerhaft auf einigen Seiten angezeigt wird ?
Wieso ?
DIV ist ein Html Tag dass jeder Browser versteht.
Slider oder ähnliches hat mit Div gar nichts zu tun.
Slider müsstest du wohl eher mit JS implementieren
Es gibt nicht immer eine Alternative aber generell ist es empfohlen spezifischere Tags zu benutzen. Zum Beispiel:
<nav><article><aside><main><details><summary><figure><dialog><menu>
PS: Das sind HTML Tags, die wenig mit JavaScript zu tun haben.
Jup, benutze ich noch. Steig aber bei neuen auch öfter auf die neuen Tags um
Welchen Grund hat das den ?