@@Felix Riesterer:
nuqneH
<ul>
<li>Name<br>VName</li>
<li><img src="/images/logo.png" alt="logo"></li>
<li>Bezeichnung</li>
</ul>
>
> Warum glaubst Du, dass dieses Markup für Deinen Zweck ideal ist?
>
> Offenbar handelt es sich um einen Datensatz zu einer Person, bestehend aus Vorname, Nachname und passendem Bild, welches für sich eine Bildunterschrift bekommt.
>
> Mein Vorschlag zum Markup wäre dieser hier:
>
> ~~~html
<dl>
> <dt><strong>Name</strong> VName</dt>
> <dd><img ... /> Bildunterschrift</dd>
> </dl>
Warum glaubst Du, dass dieses Markup für den Zweck ideal ist?
Mit dem obigen Code (der auch nicht viel besser als Deiner ist) […]
Ah, glaubst du ja gar nicht. Ähm ja, isser auch nicht.
„Datensatz zu einer Person“ – zu _einer_. Also nicht unbedingt eine Liste ('dl').
Warum sollte der Nachname besonders hervorgehoben werden? Hier scheint mit 'b' angebrachter als 'strong'.
HTML gibt es nicht her, Daten zu Person semantisch mit Elementen auszuzeichen, wohl aber mit Attributen, bspw. im Vokabular von schema.org (Person):
<div itemscope="itemscope" itemtype="http://schema.org/Person">
<img itemprop="image" src="/images/logo.png" alt=""/>
<span itemprop="familyName">Name</span>
<span itemprop="givenName">VName</span>
<span itemprop="jobTitle">Bezeichnung</span>
</div>
Zur Problematik von familyName/givenName s.a. [qa-personal-names] (deutsche Übersetzung in Arbeit).
Bezeichnung habe ich als Rolle in einem Unternehmnen/einer Organisation verstanden. Andernfalls wäre @itemprop="description" angebracht.
@alt="logo" hilft niemandem. Wenn der zum Bild zugehörige Text das Bild hinschreichend beschreibt, darf der Attributwert auch leer sein.
Statt 'div' könnte in HTML5 auch 'article' angebracht sein. Oder
<figure itemscope="itemscope" itemtype="http://schema.org/Person">
<img itemprop="image" src="/images/logo.png" alt=""/>
<figcaption>
<span itemprop="familyName">Name</span>
<span itemprop="givenName">VName</span>
<span itemprop="jobTitle">Bezeichnung</span>
</figcaption>
</figure>
bzw.
<figure itemscope="itemscope" itemtype="http://schema.org/Person">
<img itemprop="image" src="/images/logo.png" alt=""/>
<figcaption>
<span itemprop="familyName">Name</span>
<span itemprop="givenName">VName</span>
</figcaption>
<span itemprop="description">Bezeichnung</span>
</figure>
(jobTitle innerhalb von 'figcaption', description nicht.)
Der Container bekommt oben und unten einen Rahmen, nachfolgende Elemente floaten um das Bild:
[itemtype="http://schema.org/Person"]
{
border-top: 1px solid;
border-bottom: 1px solid;
}
[itemtype="http://schema.org/Person"] img
{
float: right;
margin: 0 0 1em 1em
}
[itemtype="http://schema.org/Person"] span
{
display: block;
}
[itemtype="http://schema.org/Person"] [itemprop="jobTitle"],
[itemtype="http://schema.org/Person"] [itemprop="jobTitle"]
{
clear: right;
}
Qapla'
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)