semantische Auszeichnung Branding-Bereich

[handprintdesign]

Im angehängten Bild ist der Header, also der Branding-Bereich einer Website für eine Firma AABCDEF zu sehen. Nur scheitere ich gerade ein wenig an der semantischen Umsetzung und das dann irgendwie ohne größere Umstände in diese Form zu bringen.



Die einfachste Variante wäre meiner Ansicht nach:

<div id="branding">
<h1>Firma AABCDEF Mustermann & Partner GmbH</h1>
<ul>
<li>Musterstraße 12a</li>
<li>01234 Musterstadt</li>
<li>1234  5678-0</li>
<li>Fax: 1234  5678-1</li>
<li><a href="mailto:info@firma-aabcdef.de">info@firma-aabcdef.de</a></li>
</ul>

Aber wie kriege ich dann das "Mustermann & Partner GmbH" unter "Firma AABCDEF"? Mein einzig logischer Gedanke war <br />, allerdings ist die Frage ob da die Semantik nicht zu kurz kommt... Auch das "Mustermann & Partner GmbH" als <h2> auszuzeichnen gefällt mir nicht, da es ja zur Hauptüberschrift gehört.

Dann wäre da noch die Frage mit der hCard. Die Attribute gleich den Listenelementen zuweisen? Oder noch extra <span>-Tags nutzen?
Und wenn ohne Extra-<span>-Tag, wie mache ich das dann bei PLZ und Ort in einer Zeile?

Wenn Semantik doch nicht so schwer wäre :hmpf:

 

[chacki]

AW: semantische Auszeichnung Branding-Bereich

Du kannst auch gerne Mustermann & Partner als H1 definieren, falls du eine andere Schriftgröße haben willst definierst du sie einfach extra.

Auf meiner Seite ist der Banner auch ein Bild mit H1 Tag. Image Replacement Hab hier auch nützliche Tipps dazu bekommen:
Übersicht: Image-Replacement-Techniken ? Artikel von Jens Meiert

Aber </br> habe ich auch bei mir im Code Oo

 

[handprintdesign]

AW: semantische Auszeichnung Branding-Bereich

Allerdings wäre <br /> meiner Ansicht nach fast richtiger, da das ja alles eine zusammenhängende Überschrift ist. Mir ist auch noch die Idee gekommen, die <h1> nur so breit zu machen, dass nur der erste Teil der Überschrift hinpasst und der 2. Teil automatisch umgebrochen wird. Dann könnte man mit :first-line den ersten Teil explizit formatieren.

Nur mein Problem ist, dass die Website flexibel werden soll und dann ist ja die Frage, ob dann nicht doch mal ein Wort mit in die 1. Zeile rutscht...

 

[Ammersee]

AW: semantische Auszeichnung Branding-Bereich

Hallo cineluke

Warum machst du es nicht so

<div id="linke_seite">
<h1>Firma AABCDEF </h1>
<h2>Mustermann & Partner GmbH</h2>
</div>

<div id="rechte_seite">
HIer kommt die Anschrift rein
</div>


jetzt musst du nur noch richtig css stylen und gut ist.

Oder habe ich da jetzt was falsch verstanden.

Viele Grüße Ammersee

 

[handprintdesign]

AW: semantische Auszeichnung Branding-Bereich

Nein, nicht grundsätzlich falsch verstanden. Aber ich will das ja alles als eine Überschrift machen, da das nunmal die einzige logische Auszeichnung ist.