HTML5 <Bild> Verwendung in meinem Fall

Was soll ich tun, in diesem Fall:

        <figure>
            <a href="#" class="portfolio-item">
                <div class="picture"><img src="images/portfolio/recent-01.jpg" alt=""/><div class="image-overlay-link"></div></div>
                <figcaption class="item-description">
                    <h5>Mountain Landscapes</h5>
                    <span>Photography</span>
                </figcaption>
            </a>
        </figure>

Kann ich nicht benutzen "figcaption" außerhalb "ein" element, aber ich will schweben beide auf dem text, Fläche und Bild. Vielleicht "Artikel" besser wäre?

  • Was ist das problem mit dem, was Sie hier haben? <a> enthalten können block-Elemente in html5.
  • W3C-validator sagt, dass ich nicht verwenden können, "figcaption" inside "ein".
  • Warum nicht den a element um die figure element?
InformationsquelleAutor eXorcist | 2012-12-11
  1. 1

    Je nachdem, wie dein CSS aussieht, könnten Sie enthalten jeweils das Bild und die Beschriftung in separaten Anker-tags, wie den folgenden:

    <figure>
    <div class="picture">
        <a href="#" class="portfolio-item">
            <img src="images/portfolio/recent-01.jpg" alt=""/>
            <div class="image-overlay-link"></div>
        </a>
    </div>
    <figcaption class="item-description">
        <a href="#" class="portfolio-item">
            <h5>Mountain Landscapes</h5><span>Photography</span>
        </a>
    </figcaption>
</figure>

    Oder Sie könnten setzen Sie die Bild-div-container-Klasse in der Anker-oder image-tag, so dass Sie nicht brauchen die allumfassende div.

    Wenn Sie nur wollten einige hover-Effekt stattfinden, könnte man auch einfach mit CSS, und die Ziel .Bild:hover-Selektor und halten Sie den Anker-tag auf der figcaption. Je nachdem, was Sie brauchen.

    Und beantworten Ihre article Vorschlag, das ist für das, was die W3C ruft Fremdinhalten. Sie könnten versuchen,Abschnitt, statt, die bietet ein element, das kennzeichnet ein Stück von einem Dokument, das Sie umfassen würde, die in einer Gliederung oder thematisch ähnlichen-wenn Sie diese Strecke zu fahren.

    InformationsquelleAutor Justin McCraw
  2. 2

    Warum nicht mit a außerhalb der Abbildung, wie vorgeschlagen durch Alohchi? Dies ist gültig:

    <a href="#" class="portfolio-item">
    <figure>
        <div class="picture">
            <img src="images/portfolio/recent-01.jpg" alt=""/>
            <div class="image-overlay-link"></div>
        </div>
        <figcaption class="item-description">
            <h5>Mountain Landscapes</h5>
            <span>Photography</span>
        </figcaption>
    </figure>
</a>
    • Ich Stimme mit diesem, aber es ist wohl erwähnenswert...denn eine Figur kann mehrere Elemente enthalten oder Bilder, wie social-media-icons, dass dies möglicherweise nicht der effektivste. That being said, können Sie nur EIN figcaption und sollte wohl in den Anfang oder das Ende des figure-Elements. Wieder, richtige Antwort, aber ich wollte noch hinzufügen, diese Einsicht.
    • Ich Stimme mit deiner Erklärung aber nicht einverstanden mit Ihrem Beispiel. Social-media-Symbole sollten nicht auf diese Art von markup, gibt es andere, bessere Möglichkeiten um, die heutzutage.
    InformationsquelleAutor giovannipds
Schreibe einen Kommentar