Best Practice: Markup für Seitentitel/Logo?

[ScaraX]

Hallo Forum,

Es gibt ja verschiedenste Techniken, das Logo bzw. den Firmennamen/Seitentitel in einer HTML-Seite darzustellen.

Mein bisheriger Ansatz war ein <h1><a href="/">Seitentitel</a></h1>, bei dem ich dann den Text per CSS durch das Logo als Background-Image ausgetauscht habe.

Das ist semantisch ok und der Titel wird auch bei deaktiviertem CSS richtig angezeigt, allerdings gibt es bei dieser Methode das Problem, dass das Logo und somit auch der Titel beim Ausdrucken in den meisten Browsern nicht dargestellt wird.

Wenn ich statt dem Text ein img-Element funktioniert die Print-Darstellung, aber der Text steht nur noch im alt-Attribut und das kann ja in Sachen Semantik und Outline auch nicht gut sein und für SEO ist das auch nicht optimal.

Den Seitentitel einfach als reinen Text darzustellen ist in vielen Fällen trotz den Möglichkeiten von CSS3 meistens leider keine Alternative...

Daher wollte ich mal nachfragen wie Ihr das handhabt oder ob ihr das überhaupt als relevantes Problem sieht :)

Viele Grüße,
ScaraX

[ChrisB]

Hi,

Mein bisheriger Ansatz war ein <h1><a href="/">Seitentitel</a></h1>, bei dem ich dann den Text per CSS durch das Logo als Background-Image ausgetauscht habe.

Das ist semantisch ok und der Titel wird auch bei deaktiviertem CSS richtig angezeigt, allerdings gibt es bei dieser Methode das Problem, dass das Logo und somit auch der Titel beim Ausdrucken in den meisten Browsern nicht dargestellt wird.

Das Logo halte ich beim Drucken für verzichtbar („das Internet ausdrucken“ macht doch im Normalfall sowieso niemand).
Dafür, dass der Text sichtbar ist, machst du einfach im Druck-Stylesheet eine entsprechende Angabe.

Daher wollte ich mal nachfragen wie Ihr das handhabt oder ob ihr das überhaupt als relevantes Problem sieht :)

Was das Drucken angeht - nein. Da reicht m.E. der Text, da braucht es kein grafisches Logo.

MfG ChrisB

[suit]

Mein bisheriger Ansatz war ein <h1><a href="/">Seitentitel</a></h1>, bei dem ich dann den Text per CSS durch das Logo als Background-Image ausgetauscht habe.

Guter Ansatz wie ich meine, ich mach' das auch seit Jahren so.

Das ist semantisch ok und der Titel wird auch bei deaktiviertem CSS richtig angezeigt, allerdings gibt es bei dieser Methode das Problem, dass das Logo und somit auch der Titel beim Ausdrucken in den meisten Browsern nicht dargestellt wird.

Ja, das Logo transportiert aber keinen wirklichen Nutzinhalt und ist somit im Druck verzichtbar - außer natürlich, man druckt Rechnungen, Lieferscheine, Angebote - das ist etwas anderes.

Wenn ich statt dem Text ein img-Element funktioniert die Print-Darstellung, aber der Text steht nur noch im alt-Attribut und das kann ja in Sachen Semantik und Outline auch nicht gut sein und für SEO ist das auch nicht optimal.

Bez. der Suchmaschinen ist es egal, Leuten mit Screenreadern gehst du auf den Senkel und die Semantik ist natürlich fehlerhaft, da du ein dekoratives Element als Inhalt transportierst.

Daher wollte ich mal nachfragen wie Ihr das handhabt oder ob ihr das überhaupt als relevantes Problem sieht :)

Reiner Text und wenn das Logo unbedingt am Ausdruck sein muss weil sich der Kunde das ums verrecken einbildet, dann bekommt er halt ein img-Element. Das hab' ich bisher aber erst 2x machen müssen ;)

[ScaraX]

Danke für eure Antworten.

Ich werde dann wohl bei meiner bisherigen Methode bleiben und bei den Print-Stylesheets auf das Logo verzichten...

Ich versuche mal den Text zumindest mit CSS3 optisch etwas aufzuwerten... mal sehen wie weit ich da komme ;)

Viele Grüße,
ScaraX

[Gunnar Bittersmann]

@@ScaraX:

nuqneH

Wenn ich statt dem Text ein img-Element funktioniert die Print-Darstellung, aber der Text steht nur noch im alt-Attribut und das kann ja in Sachen Semantik und Outline auch nicht gut sein und für SEO ist das auch nicht optimal.

Wieso sollte das semantisch nicht in Ordnung sein?

Na gut, Inhalt ist als Elementinhalt besser aufgehoben als in Attributwerten:
<h1><a href="/"><img src="logo.png">Seitentitel</img></a></h1>

Dummerweise ist HTML an der Stelle inkonsequent und verwendet bei 'img' andere Syntax als bei 'iframe' und 'object'.

Und HTML5 denkt überhaupt nicht daran, das zu korrigieren. Und hat dafür gesorgt, dass XHTML 2 (was sich anschickte, dies zu korrigieren) beerdigt wurde.

Wenn du Voodoo-Anhänger bist, was spricht gegen

<h1><a href="/"><object type="image/png" data="logo.png">Seitentitel</object></a></h1>

Ah, IE. (So eine Überraschung.)

Und was spricht gegen

@media print  
{  
    h1:before  
    {  
        content: url(logo.png);  
        position: absolute;  
    }  
}

Ah, IE. (So eine Überraschung.)

Qapla'

[ScaraX]

Und was spricht gegen

@media print

{
    h1:before
    {
        content: url(logo.png);
        position: absolute;
    }
}

>   
> Ah, IE. (So eine Überraschung.)  
  
Das ist natürlich auch nett.. url() in Verbindung mit content kannte ich noch garnicht. Das scheint ja in Chrome, Safari, Firefox und Opera wunderbar zu funktionieren - auch bei media=print. der IE muss halt mit normalen Text auskommen, aber bei den anderen Browsern ist das ne schöne Möglichkeit :)