Html5-Tags

[Dominic28]

Hey,
Ich möchte eine Seite umschreiben und dabei Html5-tags wie <section> und <article> verwenden.
Auf der Seite werden Artikel aufgelistet, welche dann auf die Komplettansichten verlinken.

Momentan ist dies mit einer ordered list gelöst hier mal ein Beispiel (Beispiele nur mit einem Artikel):

<ol>
    <li>
        <a href="link">
            Hier dann noch der Inhalt...
        </a>
    </li>
</ol>

Nun würde ich das normalerweise so ersetzen:

<section>
    <h2>Titel</h2>
    <article>
        <h3>Artikel</h3>
    </article>
</section>

Da ich aber aus Designgründen manche Artikel in einem Div zusammenfassen muss um Größenunterschiede auszugleichen müsste ich es in dem Fall so lösen:

<section>
    <h2>Titel</h2>
    <div class="">
        <article>
            <h3>Artikel</h3>
        </article>
    </div>
</section>

Meine Frage wäre, ob das so korrekt und valide wäre und ob das div da wirklich nicht stört.
Außerdem können beim scrollen weitere Artikel nachgeladen werden. Ist die neue Lösung dafür auch geeignet oder sollte ich besser bei der List bleiben?

Vielen Dank schonmal^^

 

[thecain]

wieso gibst du nicht einfach dem article eine class? Dann kannst du dir das div sparen.

 

[Tronjer]

Es ist semantisch auch strittig. Ein <article> ist kein Produkt-Artikel, sondern ein eigenständiges Element innerhalb einer Webseite. Wie bsw. Ein Newsartikel im einem Blog, mit Headline und Bildern oder auch ein Antwort-Posting mit Code-Beispielen in einem Forenthread.

Falls deine Produktliste lediglich Bild, Titel und Preis beinhaltet, würde ich sie weiterhin als Liste ausgeben.

 

[Dominic28]

Hey,
Eine Klasse kann ich dem article nicht geben, da teilweise mehrere article zusammengefasst werden müssen. Das ist dafür da um unterschiedliche Größen auszugleichen und funktioniert so auch prima.

@Tronjer
Ich wollte auch keine Produktartikel sondern eine paar Zeilen Text darstellen und wenn man mehr lesen will, kann man sich den kompletten Text anzeigen lassen.
Ist das dafür okay? Weil so nimmt es auf jeden Fall weniger Platz ein. Sowohl in der Ausgabe als auch in der CSS.
Ich dachte nur, dass ich bei vielen Artikeln unter Umständen auch mal 20 Artikel und damit dann ca 20 divs auf der Seite habe.

Hier noch ein Beispiel damit ihr es besser versteht:

<section>
    <h2>Titel</h2>
    <div class="">
        <article>
            <h3>Artikel</h3>
        </article>
        <article>
            <h3>Artikel</h3>
        </article>
        <article>
            <h3>Artikel</h3>
        </article>
    </div>
    <div class="">
        <article>
            <h3>Artikel</h3>
        </article>
    </div>
    <div class="">
        <article>
            <h3>Artikel</h3>
        </article>
    </div>
</section>

So könnte das manchmal aussehen, da die je nach Größe durch die divs zusammengefasst werden.

 

[Tronjer]

@Tronjer
Ich wollte auch keine Produktartikel sondern eine paar Zeilen Text darstellen und wenn man mehr lesen will, kann man sich den kompletten Text anzeigen lassen.
Ist das dafür okay? Weil so nimmt es auf jeden Fall weniger Platz ein. Sowohl in der Ausgabe als auch in der CSS.
Ich dachte nur, dass ich bei vielen Artikeln unter Umständen auch mal 20 Artikel und damit dann ca 20 divs auf der Seite habe.

Deinem Code nach macht das nicht wirklich Sinn, weil innerhalb des Artikels lediglich eine Überschrift steht. Die Bedeutung semantischer Tags liegt darin, Inhalte für Suchmaschinen leichter identifizierbar zu machen, und bevor du <article> verwendest, überlege, ob der Inhalt darin auch für sich alleine stehen könnte. Das wäre dann der Fall, wenn neben der Headline noch ein Paragraph mit Text, Bild, Link, etc. hinzukommen würde. Abgesehen davon würde ich die Divs lieber innerhalb des Artikel-Tags setzen.

Last, not least, ist <article> ein Blockelement, während Produkte üblicherweise aus einer Datenbank in Listenform ausgegeben werden.

Suche dir mal ein paar Quellen aus dem Netz über HTML5. Dann wird es für dich vielleicht intuitiv verständlich.

 

[Dominic28]

Die Überschrift in dem Beispiel war wirklich nur ein Beispiel. Im fertigen Script würden dort sowohl Bild als auch ein kurzer Text stehen.
Die Inhalte werden auch allein verständlich sein, deswegen habe ich ich <article> dafür gewählt.

Edit: Ich werde das jetzt erstmal so machen, weil es besser funktioniert. Zur Not kann ich das später wieder ändern. Aber dann zeige Ich lieber direkt die Website anstatt die Beispiele.

Aber schonmal vieln Dank.