HTML Texte besser mit <p> oder einem Div darstellen?

3 Antworten

Von Experten medmonk und EinAlexander bestätigt
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, HTML
29.10.2021, 07:54

Die Motivation eines HTML-Dokuments ist es, seine Inhalte möglichst gut mit Metainformationen zu beschreiben. So liefert dir der h1-Tag die Information, dass sein Inhalt in der logischen Hierarchie weit oben steht, ein nav-Tag gibt dir die Information, dass er Navigationselemente für die Seite enthält oder ein strong-Tag verleiht Text einen gewissen Nachdruck. Allein durch das Lesen des HTML-Codes können Inhalte des Dokuments somit in ihrer Bedeutung besser eingeordnet werden. Gerade für Suchmaschinen oder Screenreader (für Menschen mit Sehschwäche) ist es nicht unwichtig, ein Dokument gut deuten zu können.

Ein p-Element stellt nun in HTML einen Paragraph / einen eigenen Textabschnitt dar.

Ein gutes Anwendungsbeispiel, findest du bspw. auf der Datenschutzseite von GF. Es gibt mehrere Sektionen (§1, §2, §3, ...), zu denen es eine Überschrift gibt (h3) und zusammenhängende Textabschnitte (Paragraphen).

Ein div-Element wiederum ist ein Container ohne semantische Bedeutung. Es sollte daher möglichst nur dann eingesetzt werden, wenn es kein passenderes Element gibt, welches seinen Inhalt besser beschreibt. Und HTML5 bietet dir da schon eine gute Auswahl (article, nav, section, header, ...), die womöglich eher infrage kommt.

Um div-Elemente trotzdem mit etwas mehr Information auszustatten, ordnet man ihnen meist Klassen (oder teils auch data-Atttribute) zu:

<div class="infobox">
  <div class="headline">Note</div>
  <div class="description">The violets are blue, the roses are red, the violets are blue, I love my loves.</div>
</div>

Dieses Vorgehen hat sich bereits vor HTML5 stark verbreitet, da der Gebrauch dieses Elements zu diesen Zeiten viel geläufiger war. So konnten auch Suchmaschinen etwas mehr Informationen aus dem Dokument herausziehen.

Was hat das für Vorteile (...)

In dem vorliegenden Fall auf deinem Screenshot könnte man sicherlich auch passendere Elemente finden. Die oberste Zeile entspricht einer Überschrift und die Zeile darunter könnte gewiss auch in einen Paragraph eingeordnet werden. So viel vorweg.

Der Vorteil, (fast) überall ein div einzusetzen, liegt eher in folgenden Punkten:

  • Das HTML bleibt einfach. Der Entwickler braucht daher auch keine großartigen HTML-Kenntnisse und kann die Seitenstruktur schneller entwickeln.
  • Beim Styling braucht der Entwickler nicht die inviduellen Standard-Styles der jeweiligen Elemente beachten bzw. überschreiben (einige Elemente wie p oder figure haben in den meisten Browsern einen vordefinierten zusätzlichen Innen-/Außenabstand, o.a.). Aufgrund der geringeren Varianz an Elementtypen kann man sogar mehrere Elemente auf einmal mit nur einem Elementselektor ansprechen, um generelle Styles (z.B. die Schriftart) festzulegen.
  • Ein modularer Aufbau ist einfacher/flexibler, da bestimmte Regeln nicht berücksichtigt werden müssen (z.B. darf nicht jedes HTML-Element in ein anderes geschachtelt werden - exemplarisch p in p, bei einem div hingegen ist das kein Problem). Außerdem kann der Kontext schneller geändert werden. Wenn z.B. aus einer Überschrift ein normaler Text werden soll, braucht man nur die Klasse anfassen. Einige Webbaukästen oder auch CMS (die das HTML dann automatisch generieren) haben sich dieses Konzept zu Nutze gemacht (vor allem vor der Einführung von HTML5).
(...) und warum machen das manche Seiten so?

Die oben aufgelisteten Punkten reißen Gründe schon an. Zum einen kann es ein Konzept sein (egal, ob von älteren oder doch aktuellen Tools), zum anderen kann es aber auch mit der Kompetenz des Entwicklers zusammenhängen.

Sollte das jeder machen?

Ganz klar, nein.

Bestimmte Entwickler mögen es für ihre erstellte Seite noch mit den obigen Gründen erklären können, doch generell ist es nicht in dem Sinne von HTML5. Bei webprägenden Parteien wie Google, Mozilla oder dem W3C wirst du auch stets herauslesen können, dass man sich für ausdrucksstarkes, modernes Markup einsetzt:

Key Point: Use HTML elements correctly.
Use HTML elements for the purposes that they were designed for. For example, when you give the title of a standalone work (such as a book or a movie), mark it with a <cite> element.

Quelle

HTML: A good basis for accessibility
(...) As you learn more about HTML — read more resources, look at more examples, etc. — you'll keep seeing a common theme: the importance of using semantic HTML (sometimes called POSH, or Plain Old Semantic HTML). This means using the correct HTML elements for their intended purpose as much as possible.

Quelle

G115: Using semantic elements to mark up structure
(...) The objective of this technique is to mark up the structure of the Web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually. (...)

Quelle

Das bedeutet, man nutzt dementsprechend die Features von HTML5 und baut diese teilweise sogar noch mit weiteren Elementen (siehe aria-Attribute) aus.
themightyI
28.10.2021, 21:37

Ein div ist im Prinzip ein Container der Inhalte umschließt und dient der Vereinfachung des Stylings. Man kann sogar beides gleichzeitig Verwenden. Vor- und Nachteile gibts eigentlich keine, bzw wäre mir jetzt nichts bekannt

Woher ich das weiß:Studium / Ausbildung
Bujin
28.10.2021, 21:38

Hi, <p> steht für Paragraf! Damit trennt man einen längeren Text auf. Normalerweise umschließt man jeden Text auch mit einem <div> container (div steht für division). Mit divs "unterteilt" man also eine ganze Seite (nicht nur Text) in mehrere Teile.

<div class="blogeintrag">
  <h2>Heute war wieder ein sch&ouml;ner Tag</h2>
  <h3>Do. 28.10.2021</h3> 
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    Praesent vitae eros luctus, eleifend lectus eu,
    interdum nisi. In dapibus gravida tellus, eget maximus
    odio sagittis eget. Pellentesque egestas eu magna.
  </p>
  <img src="img/radtour1.jpg" />
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Praesent vitae eros luctus, eleifend lectus eu,
    interdum nisi. In dapibus gravida tellus, eget maximus
    odio sagittis eget. Pellentesque egestas eu magna.
  </p>
</div>
<div class="blogeintrag">
  <h2>Heute war ein sch&ouml;ner Tag</h2>
  <h3>Mi. 27.10.2021</h3> 
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    Praesent vitae eros luctus, eleifend lectus eu,
    interdum nisi. In dapibus gravida tellus, eget maximus
    odio sagittis eget. Pellentesque egestas eu magna.
  </p>
  <img src="img/pilzjagd3.jpg" />
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Praesent vitae eros luctus, eleifend lectus eu,
    interdum nisi. In dapibus gravida tellus, eget maximus
    odio sagittis eget. Pellentesque egestas eu magna.
  </p>
</div>