Zum Inhalt springen

HTML5: Gruppierung

Aus Wikibooks


Bei Elementen zur Gruppierung handelt es sich immer um Blockelemente, die Inhalte zu einer größeren Unterstruktur des Dokumentes zusammenfassen.

Diese Elemente können notiert werden, wo fließender Inhalt erlaubt ist. Wie bei anderen Elementen, die dies erlauben, ist von den Autoren wieder im Sinne einer guten Struktur zu entscheiden, ob der Inhalt an Kindelementen wiederum ausschließlich aus Blockelementen, also strukturierenden Inhalten bestehen soll oder aus Phraseninhalten, die keine weitere Struktur kennzeichnen.

Der Inhalt von gruppierenden Elementen ist wiederum fließender Inhalt, für welchen die gleiche Überlegung gilt, also entweder als Kindelemente strukturierende Blockelemente oder gleich Phraseninhalt auf der Textebene.

HTML5 hat lediglich gruppierende Elemente auf einer relativ groben Abstraktionsstufe, die keine Kennzeichnung detaillierter semantischer Bedeutung der Inhalte zulassen. Von daher müssen verfeinerte semantische Angaben etwa mit der Erweiterung RDFa ergänzt werden. Die Verwendung von RDFa ist in einem Kapitel des Buches über XHTML RDFa ausführlich erläutert.

Element article

[Bearbeiten]

Das Element kennzeichnet einen kompletten, eigenständigen Bereich im Dokument. Im Sinne eines Artikels behandelt der Inhalt also ein eigenes Thema, abgesetzt von anderen Inhalten auf gleicher Inhaltsebene. Insbesondere kann dieser Inhaltsbereich anderen Autoren zugeordnet werden als der Rest des Dokumentes. Im Unterschied zum Zitat sind hier die Autoren allerdings direkt beteiligt, werden also damit keinesfalls zitiert.

Typisch tritt eine solche Struktur in Zeitschriften, Magazinen, Blogs, Foren etc auf.

Weil dieser Bereich eigenständig ist, beginnt er normalerweise mit einer Überschrift. Aufgrund der Eigenständigkeit kann das unabhängig von der Struktur der Überschriften des umgebenden Inhaltes eine Überschrift vom Typ h1 sein. Dies vereinfacht es zum Beispiel, solche Inhalte mehrfach wiederzuverwenden, also in Datenbanken oder als gesonderte Dateien abzulegen und mit einer Sprache wie PHP in ein ausgeliefertes Dokument einfach einzufügen.

Allerdings darf sich der Typ der Überschrift auch nach der umgebenden Kaskade der Überschriften richten, was es wiederum vereinfacht, das Gesamtdokument konsistent mit einer Stilvorlagensprache wie CSS zu dekorieren.

Weil eine Überschrift ein Blockelement ist, sollten folglich im Sinne einer semantisch guten Struktur die anderen Kindelemente ebenfalls Blockelemente sein, im einfachsten Falle Absätze.

Das Element sollte als Nachfolger kein Element main enthalten. Die beiden Elemente würden sich in dieser Verschachtelung gegenseitig ausschließen. Ist etwas als eigenständiger Artikel gekennzeichnet, kann ein Teil davon nicht gleichzeitig der Hauptinhalt des Dokumentes sein.

Beispiel:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de"
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Sammlung von Artikeln zum Thema Langeweile, Stand 2019-03-28</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Wicki van Book" />
  </head>
  <body>
    <h1>Langeweile</h1>

    <article>
     <h1>Langeweile in der Freizeit</h1>
     <address>Prof. Dr. Klaus Trophop</address>

     <p></p>
     <p></p>
     
    </article>
    <article>
     <h1>Langeweile am Arbeitsplatz</h1>
     <address>Arti Fischl</address>

     <p></p>
     <p></p>
     
    </article>
    <article>
     <h1>Nichtstun als Lebensphilosophie</h1>
     <address>Reni Tent</address>

     <p></p>
     <p></p>
     
    </article>
    <article>
     <h1>Kontemplation und Mediation gegen Langeweile</h1>
     <address>Anna Gramm</address>

     <p></p>
     <p></p>
     
    </article>
    <article>
     <h1>Reise ins Nichts<br />
         <small>Die schleichende Gewöhnung an die Passivität</small></h1>
     <address>Donna Schlag</address>

     <p></p>
     <p></p>
     
    </article>
    <address>
      Anbieterkennzeichnung insgesamt …
    </address>
  </body>
</html>

Element section

[Bearbeiten]

Das Element repräsentiert einen Abschnitt oder Unterabschnitt der übergeordneten Struktur, entweder des Dokumentes selbst oder auch einer untergeordneten Struktur wie einem Artikel.

Typische Unterstrukturen sind in einem Buch zum Beispiel Kapitel, Unterkapitel, Abschnitt, Unterabschnitt, Glossar, Quellenverzeichnis, Vorwort, Nachwort, Widmung. Andere Textstrukturen können ähnliche oder andere Unterstrukturen aufweisen.

Oft beginnt ein solcher Abschnitt wiederum mit einer Überschrift. Die Empfehlung HTML5 spricht sogar davon, daß ein solcher Abschnitt mit einer Überschrift beginnen soll. Dies hängt natürlich stark davon ab, um was für Inhalt es sich handelt. Handelt es sich zum Beispiel um die Strophe eines Gedichtes, wäre dafür eine Überschrift eher unüblich. Die Empfehlung deckt also nicht alle sinnvollen Inhaltstypen ab und schränkt die Nutzung des Elementes damit unnötig ein. Weil formal aber nicht gefordert wird, daß der Inhalt mit einer Überschrift beginnen muß, sondern sogar allgemeiner, fließender Inhalt sein darf, kommt es wiederum den Autoren zu, semantisch sinnvoll einzuordnen, welche Inhalte mit welcher Struktur im jeweiligen konkreten Anwendungsfall sinnvoll sind.

Aufgrund Kennzeichnung als Unterstruktur kann unabhängig von der Struktur der Überschriften des umgebenden Inhaltes eine Überschrift vom Typ h1 gewählt werden. Dies vereinfacht es zum Beispiel, solche Inhalte mehrfach wiederzuverwenden, also in Datenbanken oder als gesonderte Dateien abzulegen und mit einer Sprache wie PHP in ein ausgeliefertes Dokument einfach einzufügen.

Allerdings darf sich der Typ der Überschrift auch nach der umgebenden Kaskade der Überschriften richten, was es wiederum vereinfacht, das Gesamtdokument konsistent mit einer Stilvorlagensprache wie CSS zu dekorieren.

Beispiel:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de"
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Im Fluß</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Lasse Machen" />
  </head>
  <body>
    <h1>Im Fluß</h1>
    <address>
      Lasse Machen<br />
      Auf der kleinen Insel 7c<br />
      012345 Stromhausen<br />
      email: <a href="mailto:lasse.machen@example.org">lasse.machen@example.org</a>
    </address>

    <p>
    Novelle über die Menschen am Fluß in der Zeit nach dem Klimawandel.
    </p>

    <section>
     <h2>1. Mit der Flut leben</h2>

     <p></p>
     <p></p>

    </section>
    <section>
     <h2>2. Orkan!</h2>

     <p></p>
     <p></p>

    </section>
    <section>
     <h2>3. …</h2>

     <p></p>
     <p></p>

     <section>
     <h2>3.1 …</h2>

      <p></p>
      <p></p>

     </section>
     <section>
     <h2>3.2 …</h2>

      <p></p>
      <p></p>

     </section>
    </section>

  </body>
</html>

Element nav

[Bearbeiten]

Das Element kennzeichnet einen Abschnitt des Dokumentes, welcher der Navigation dient. Typisch erfolgt dies mit Verweisen zu anderen Dokumenten des Projektes oder aber auch zu Fragmenten im Dokument, zu Unterabschnitten.

Aufgrund dieser speziellen semantischen Bedeutung soll im Element nav kein Element main auftreten. Die beiden Elemente würden sich in dieser Verschachtelung gegenseitig ausschließen. Ist etwas als Abschnitt zur Navigation gekennzeichnet, kann ein Teil davon nicht gleichzeitig der Hauptinhalt des Dokumentes sein.

Typischer Inhalt des Elementes könnte zum Beispiel eine Überschrift sein, gefolgt von einer geordneten oder ungeordneten Liste mit den Verweisen als Listenpunkten.

Der Typ der Überschrift kann wiederum h1 bis h6 sein, nach Geschmack des Autors unabhängig vom umgebenden Inhalt in einer eigenen Kaskade oder aber der Kaskade des Dokumentes folgend.

Vorheriges Beispiel mit Navigation:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de"
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Im Fluß</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Lasse Machen" />
  </head>
  <body>
    <h1>Im Fluß</h1>
    <address>
      Lasse Machen<br />
      Auf der kleinen Insel 7c<br />
      01234 Stromhausen<br />
      email: <a href="mailto:lasse.machen@example.org">lasse.machen@example.org</a>
    </address>

    <p>
    Novelle über die Menschen am Fluß in der Zeit nach dem Klimawandel.
    </p>

    <nav><!-- Navigation im Dokument -->
     <h2>Kapitel</h2>
     <ul>
      <li><a href="#k01">1. Mit der Flut leben</a></li>
      <li><a href="#k02">2. Orkan!</a></li>
      <li><div><a href="#k03">3. …</a></div>
          <ul>
           <li><a href="#k03_01">3.1 …</a></li>
           <li><a href="#k03_02">3.2 …</a></li>
          </ul>
      </li>
      <li><div><a href="#k04">4. …</a></div>
      <li></li>
     </ul>
    </nav>

    <section id="k01">
     <h2>1. Mit der Flut leben</h2>

     <p></p>
     <p></p>

    </section>
    <section id="k02">
     <h2>2. Orkan!</h2>

     <p></p>
     <p></p>

    </section>
    <section id="k03">
     <h2>3. …</h2>

     <p></p>
     <p></p>

     <section id="k03_01">
     <h2>3.1 …</h2>

      <p></p>
      <p></p>

     </section>
     <section id="k03_02">
     <h2>3.2 …</h2>

      <p></p>
      <p></p>

     </section>
    </section>
    <section id="k04"></section>

  </body>
</html>

Element aside

[Bearbeiten]

Das Element kennzeichnet darin enthaltenen Inhalt als Marginalie, Randnotiz oder als etwas mit lediglich peripherem Bezug zum Hauptthema des Dokumentes. Das können Abschweifungen, Kommentare, Hintergrundinformationen, auch Reklame sein, Zusatzinformationen, die nicht unbedingt notwendig sind, um das Thema der Seite zu verstehen, allerdings gleichwohl einen alternativen Zugang zum Inhalt darstellen können, eine Vertiefung, Variation, Assoziationen, die ebenfalls interessant sein könnten, aber nicht unbedingt müssen.

Aufgrund dieser speziellen semantischen Bedeutung soll im Element aside kein Element main auftreten. Die beiden Elemente würden sich in dieser Verschachtelung gegenseitig ausschließen. Ist etwas als Randnotiz gekennzeichnet, kann ein Teil davon nicht gleichzeitig der Hauptinhalt des Dokumentes sein.

Beispiele:

    <aside>
       <h1>Grünzeug Karl</h1>
       <p>Kaufe dein Grünzeug bei Grünzeug Karl!</p>
       <p>
         Grünzeug Karl<br />
         Im kleinen Holze 1<br />
         00987 Hoppenstedt
       </p>
    <aside>
<section>
  <h1>Imkerei</h1>

    <p></p>
    <p></p>

    <aside>
       <h2>Infokasten Honigbienen</h2>
       <p>Honigbienen (Apis mellifera) sind in Staaten lebende Insekten.
          Sie gehören zur Familie der Hautflügler.</p>
       <p>Honigbienen werden schon lange als Nutztiere gehalten.
          Hauptprodukt ist dabei ihr Honig.</p>
    <aside>
</section>

Element header

[Bearbeiten]

Das Element ist selbst kein Gruppierungselement und hat eine semantische Sonderfunktion, verhält sich ansonsten aber ähnlich wie ein Gruppierungselement, die Verwendung ist jedoch aufgrund der besonderen Bedeutung faktisch stärker eingeschränkt. Das Element kennzeichnet einführende Kopfinformationen für den folgenden Inhalt. Die typisch nachfolgenden Geschwister im Dokument sind typisch wiederum Gruppierungselemente, für welche die Kopfinformation gemeinsam gilt.

Es sollte kein Element main darin auftreten. Auch weitere Elemente header oder footer sollten nicht als direkte Kinder auftreten, allenfalls als Nachfahren weiterer Gruppierungselemente, was allerdings ebenfalls selten sinnvoll sein wird.

Beispiel:

    <header>
      <h1>
       <svg xmlns="http://www.w3.org/2000/svg"
         version="1.1"
         viewBox="0 0 2000 2828"
         height="3em" width="20em"
         xml:lang="de">
        <title>Grünzeug Karl</title>
        <!-- Logo, Piktogramm als graphischer Inhalt -->
       </svg>
      </h1>
      <p>Grünzeug Karl | Im kleinen Holze 1 | 00987 Hoppenstedt</p>
    </header>
[Bearbeiten]

Das Element ist selbst kein Gruppierungselement und hat eine semantische Sonderfunktion, verhält sich ansonsten aber ähnlich wie ein Gruppierungselement, die Verwendung ist jedoch aufgrund der besonderen Bedeutung faktisch stärker eingeschränkt. Das Element kennzeichnet abschließende Fußinformationen für den vorausgehenden Inhalt. Die typisch vorausgehenden Geschwister im Dokument sind typisch wiederum Gruppierungselemente, für welche die Fußinformation gemeinsam gilt.

Es sollte kein Element main darin auftreten. Auch weitere Elemente header oder footer sollten nicht als direkte Kinder auftreten, allenfalls als Nachfahren weiterer Gruppierungselemente, was allerdings ebenfalls selten sinnvoll sein wird.

Oft enthält solch ein Element Angaben oder Referenzierungen zu den Autoren, Anbieterkennzeichnung, Geschäftsbedingungen, Informationen zum Datenschutz etc.

Als Fuß von Artikeln oder Abschnitten kann solch ein Element ebenfalls entsprechende Informationen zu den Autoren dieses Dokumentfragmentes enthalten. Die Angaben beziehen sich dann also nicht auf das gesamte Dokument, eben lediglich auf die Geschwister, die also Kinder desselben Elternelementes sind, welches ein Gruppierungselement ist.

Beispiel:

    <footer>
     <nav>
      <h1>Weitere Inhalte des Projektes</h1>
      <ul>
       <li><a href="a.xhtml"></a></li>
       <li><a href="b.xhtml"></a></li>
       <li></li>
       <li><a href="ak.xhtml">Anbieterkennzeichnung</a></li>
       <li><a href="dse.xhtml">Datenschutzerklärung</a></li>
      </ul>
     </nav>
    </footer>

Element main

[Bearbeiten]

Das Element ist selbst kein Gruppierungselement und hat eine semantische Sonderfunktion, verhält sich ansonsten aber ähnlich wie ein Gruppierungselement, die Verwendung ist jedoch aufgrund der besonderen Bedeutung faktisch stärker eingeschränkt. Das Element enthält den Hauptinhalt eines Dokumentes. Das Element ist typisch folglich nur sinnvoll, wenn es andere Gruppierungselemente als Geschwister gibt, die andere Funktionen repräsentieren, etwa ein Inhaltsverzeichnis, Reklame, einen Projektkopf oder Projektfuß.

Die Verwendung ist also insbesondere sinnvoll, um hinsichtlich der Struktur eine gute Konsistenz zu haben. Gibt es bereits zum Dokument header und footer, ist es sinnvoll, auf gleicher Strukturebene ein Element mit dem Hauptinhalt der Seite als Geschwisterelement zu verwenden, dies ist main.

Das Element sollte nicht Kind eines der folgenden Elemente sein: article, aside, footer, header, nav

Beispiel:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de"
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Projekttitel</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
  </head>
  <body>
    <header><!-- Projektkopf, für alle Dokumente des Projektes gleich -->
      <h1>Projektüberschrift</h1>
    </header>
    <main><!-- Hauptthema des Dokumentes -->
      <h1>Dokumentüberschrift</h1>

      <section>
        <h2>Kapitelüberschrift</h2>
        <p></p>
        <p></p>
      </section>
      <section>
        <h2>Kapitelüberschrift</h2>
        <p></p>
        <p></p>
      </section>
    
      <article>
        <h1>Artikelüberschrift</h1>
        <figure><!-- Abbildung zum Artikel --></figure>
        <section>
          <h2>Artikelunterabschnitt</h2>
        <p></p>
        <p></p>
        </section>
        <section>
          <h2>Artikelunterabschnitt</h2>
        <p></p>
        <p></p>
        </section>      
      </article>

    </main>

    <nav><!-- Projektnavigation -->
     <h2>Weitere Inhalte des Projektes</h2>
     <ul>
      <li><a href="a.xhtml"></a></li>
      <li><a href="b.xhtml"></a></li>
      <li></li>
     </ul>
    </nav>

    <aside><!-- Nebenbemerkung, Werbung --><aside>

    <footer><!-- Fußbereich, für alle Dokumente des Projektes gleich -->
      <ul>
        <li><a href="ak.xhtml">Anbieterkennzeichnung</a></li>
        <li><a href="dse.xhtml">Datenschutzerklärung</a></li>
        <li></li>
      </ul>
    </footer>
  </body>
</html>

Element figure

[Bearbeiten]

Mit dem Element kann eine selbständige Inhaltseinheit ausgezeichnet werden, welche allerdings zumeist nicht als unabhängig vom sonstigen Inhalt des Dokumentes gesehen werden kann wie ein aside oder als eigenständiger Artikel wie article. Es gruppiert den selbständigen Inhalt darin, welcher zudem mit dem Element figcaption mit einer Beschriftung versehen werden kann.

Das Element ist selbst kein Gruppierungselement und hat eine semantische Sonderfunktion, verhält sich ansonsten aber ähnlich wie ein Gruppierungselement.

Das Element kann verwendet werden, wo fließender Inhalt erwartet wird. Als Blockelement ist es inhaltlich dort sinnvoll zu notieren, wo auch alle anderen Geschwisterelemente Blockelemente sind.

Der Inhalt ist fließender Inhalt, zusätzlich optional genau ein Element figcaption, welches als erstes oder letztes Kindelement notiert sein sollte, je nachdem, ob eine Beschriftung vor oder nach dem zu beschriftenden Inhalt angestrebt wird.

Oft enthält das Element Graphiken oder Bilder, wie der Name andeutet, kann allerdings auch für andere Inhalte verwendet werden, die mit Beschriftung und als eigenständig vom umgebenden Inhalt speziell abgehoben werden sollen.

Ist der Inhalt neben der figcaption nur ein Element img, video, audio, object oder auch eine eingebettete Vektorgraphik im Format SVG (Element svg aus dem Namensraum von SVG) oder eine mathematische Formel im Format MathML (Element math aus dem Namensraum von MathML), ist eine einfache Mischung mit dem speziellen Blockelement figcaption inhaltlich unproblematisch. Bei mehreren Phrasenelementen oder Text als sonstiger Inhalt ist es hingegen sinnvoller, diesen in einem eigenen Blockelement unterzubringen.

Beispiel:

<figure>
<svg viewBox="-800 -850 1700 1700"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    stroke-width="10"
    stroke-miterlimit="100"
    stroke="currentColor"
    stroke-opacity="0.5"
    fill="currentColor"
    fill-opacity="0.2">
<title>Mandala</title>
<path d="M800,0 C -959,-34 -204,-40 -400,693 509,-814 136,-157 -400,-693 451,848 68,197 800,-0 z" />
<path d="M705,-285 C -857,312 -194,38 -106,753 158,-898 64,-187 -599,-468 699,586 130,149 705,-285 z" />
<path d="M518,-500 C -642,578 -157,102 174,699 -180,-845 -10,-187 -692,-198 822,267 167,85 518,-500 z" />
<path d="M277,-621 C -358,733 -102,145 400,550 -456,-676 -75,-160 -676,71 814,-57 176,15 277,-621 z" />
<path d="M22,-640 C -54,766 -37,162 543,339 -637,-429 -121,-113 -565,300 690,-337 159,-49 22,-640 z" />
<path d="M-205,-564 C 222,685 24,154 591,104 -704,-150 -146,-56 -386,460 482,-535 121,-98 -205,-564 z" />
</svg>
<figcaption>Abstraktes Mandala mit diskreter Drehsymmetrie</figcaption>
</figure>

Element figcaption

[Bearbeiten]

Das Element kennzeichnet die Beschriftung für ein Element figure. Es kann als Kindelement von figure notiert werden, bevorzugt entweder als erstes oder letztes Kindelement. Mehrere Elemente figcaption innerhalb von figure sind zwar in der Empfehlung nicht explizit ausgeschlossen, aber eher unüblich. Bei mehreren Strukturen in figure, die einer Beschriftung bedürfen, ist es eher sinnvoll, jede dieser Strukturen ein Element figure in einem Element figure zu verschachteln und einzeln zu beschriften, um die Zuordnung eindeutig zu gewährleisten.

Der Inhalt ist die Beschriftung als fließender Inhalt. Im Sinne einer guten Struktur sollten sich Autoren auch hier wieder entscheiden, ob dies nur Phraseninhalt ist oder aber nur Blockelemente sind.

Beispiel:

<figure>
  <img src="Mandala3.14.svg" alt="" />
  <figcaption>Abstraktes Mandala mit diskreter Drehsymmetrie</figcaption>
</figure>

Elemente img brauchen eigentlich eine sinnvolle Textalternative als Wert des Attributes alt. Dies kann allerdings entfallen, wenn das referenzierte Bild selbst bereits eine Textalternative enthält oder hier eine Beschriftung mit dem Element figcaption eindeutig zuzuordnen ist. Weil das hier der Fall ist, bleibt das Attribut leer. Die Kombination von figure, figcaption und einem Bild, einer Graphik, einem Video oder Audio kann also bereits genutzt werden, um eine Textalternative anzubieten. Weil die Element audio und video insbesondere keine eigene Möglichkeit haben, um auf der Ebene von (X)HTML eine Textalternative zu notieren, kann diese Kombination bereits eine einfache Lösung sein, um diesem Erfordernis nachzukommen.

Noch ein Beispiel:

<figure>
<pre>
<code>
&lt;figure&gt;
  &lt;img src="Mandala3.14.svg" alt="" /&gt;
  &lt;figcaption&gt;Abstraktes Mandala mit diskreter Drehsymmetrie&lt;/figcaption&gt;
&lt;/figure&gt;
</code>
</pre>
<figcaption>Beispiel-Quelltext für die Verwendung der Elemente <b>figure</b> und <b>figcaption</b></figcaption>
</figure>

Element div

[Bearbeiten]

Das Element ist selbst kein Gruppierungselement und hat keine besondere semantische Bedeutung, verhält sich ansonsten aber ähnlich wie ein Gruppierungselement. Das Element findet dann Anwendung, wenn es kein passendes Gruppierungselement oder Blockelement für die erforderliche Bedeutung gibt.

Da die Elementauswahl hinsichtlich der semantischen Bedeutung von HTML5 stark begrenzt ist, kann es öfter notwendig sein, dieses Element zu verwenden. Vorher sollte jedoch sorgfältig geprüft werden, ob die intendierte Bedeutung nicht doch eventuell mit einem verfügbaren Element abgedeckt wird. Wenn dem so ist, ist besser das Element zu verwenden, welches eine Obermenge der beabsichtigten Bedeutung abdeckt. Die Verfeinerung kann dann mit RDFa erfolgen. Gibt es kein Element, welches sich eignet, um die beabsichtigte Bedeutung abzudecken, ist bei der Verwendung von div zu empfehlen, per RDFa die semantische Bedeutung zu notieren.

Dabei gibt es verschiedene Interpretationen oder Strategien hinsichtlich der Frage, ob es kein geeignetes Element für eine bestimmte Anwendung gibt. In der strikten Interpretation wird div dann verwendet, wenn die in HTML5 verfügbaren Blockelemente semantisch nicht genau passen. Die beabsichtigte semantische Bedeutung wird per RDFa präzise notiert.
Alternativ dazu, nicht weniger strikt: Statt div wird jenes Element von HTML5 verwendet, welches der beabsichtigten semantischen Bedeutung am nächsten kommt. Erneut wird die beabsichtigte semantische Bedeutung per RDFa präzise notiert.
Weniger strikt oder deutlich größzügiger oder sorgloser ist der Ansatz, bei der Alternative auf RDFa zu verzichten, auch wenn das Element nur ungefähr zur beabsichtigten semantischen Bedeutung paßt.

Als generisches Blockelement kann div ferner nützlich sein, um einen rein dekorativen Block für eine Stilvorlage anzulegen, entsprechend können bei mehrsprachigen Dokumenten damit auch die Bereiche in verschiedenen Sprachen separiert werden.