Formatierung von Texten

[Erdbeertorte]

Ich habe eine Frage zu der Formatierung von Texten (h1 - h6 und p)

am besten sollte es doch so aussehen

<h1>Wetter</h1>
<p>Heute wird es schön.</p>

und nicht so

<h1 class="Titel">Herzlich Willkommen</h1>
<p class="Einleitung">auf dieser Seite finden Sie dieses und jenes</p>


Ist das korrekt?




Und wie sieht es mit dem folgenden aus?

<h1><span>Wetter</span></h1>
<p><span>Heute wird es schön.</span></p>

[Mork vom Ork]

am besten sollte es doch so aussehen

<h1>Wetter</h1>
<p>Heute wird es schön.</p>

Möglicherweise.

und nicht so

<h1 class="Titel">Herzlich Willkommen</h1>
<p class="Einleitung">auf dieser Seite finden Sie dieses und jenes</p>

Ist das korrekt?

Nicht unbedingt. Mehrere <h1> kommen zwar in aller Regel nicht vor, nichtsdestotrotz kann es genau wie beim <p>, von dem mit Sicherheit mehr als eines vorhanden ist, vorkommen, dass du die unterscheiden willst. Zu diesem Zweck kann man Klassen nehmen, dagegen ist per se nichts einzuwenden, an deinem kurzen Beispiel lässt sich das nicht festlegen.

Grundsätzlich ist es so, dass class immer anzuzweifeln ist, wenn dieses Element in dieser Eigenschaft nur einmal benötigt wird (und dies sich auch nie ändern wird; "nie" im Sinne von: 640k is enough for anybody). Für solche Fälle ist eher id gedacht.

Natürlich kann es auch sein, dass sowohl class als auch id hier überflüssig sind, weil a) <h1> nur einmal vorkommt bzw. alle <h1> gleich gestaltet werden und es sich b) bei p.einleitung immer um den ersten Absatz nach einem <h1> handelt. Für b) wäre die CSS-Regel h1 + p die eleganteste Wahl. Für a) ist logischerweise keine Klassen- oder ID-Zuordnung notwendig, das geht genauso gut über das Element selbst.

Wie gesagt: Dein Beispiel ist zu kurz, um sich festzulegen, welcher Weg hier angebracht ist. Im Großen und Ganzen kann man nur sagen, so kurz wie möglich, so lang wie nötig: am Besten gar kein Attribut, dann id, dann class. Wenn du den Einsatz auf dieser Basis für dich rechtfertigen kannst (und nicht, weil dir die CSS-Möglichkeiten nicht bekannt sind), soll es in Ordnung sein – letztlich bist schließlich du derjenige, der sich damit rumärgern muss.

Und wie sieht es mit dem folgenden aus?

<h1><span>Wetter</span></h1>
<p><span>Heute wird es schön.</span></p>

Das ist so erstmal (!) Unsinn, denn die beiden <span> umfassen keinen eigenen Bereich, sondern sind identisch mit ihren Elternelementen <h1> und <p> – was man <span> an Eigenschaften zuweisen kann, kann man genauso gut den Elternelementen zuweisen.

Es gibt allerdings eine Ausnahme: Du möchtest den Text gar nicht anzeigen, sondern eine Grafik. In dem Falle wäre <span> display:none zuzuweisen, dem Elternelement per background-image die Grafik (sowie width und height für die Größe).
Das kann man machen, ob's sinnvoller ist als direkt eine Grafik, also <img> zu verwenden und dem alt-Attribut den betreffenden Text zuzuweisen, ist immer anzuzweifeln und hängt stark vom Einzelfall ab. Ich mache das nur da, wo mir die betreffende Grafik für einen ganz bestimmten Einsatzfall zu groß ist: CSS-unfähige Browser (Netscape 4, IE < 7) bekommen von mir rohes HTML geliefert, große Überschriftsgrafiken stören in dieser Ansicht.

[Alda]

<h1>Wetter</h1>
<p>Heute wird es schön.</p>

Genau so ist es im Prinzip richtig. Wenn Du unter die H1 einen Text setzt (eine Sache der ich persönlich klar den Vorzug gegenüber anderen Lösungen gebe) musst Du allerdings darauf achten, dass diese paar Worte oder Sätze eine klare Relevanz zur Überschrift besitzen.

<p>Heute wird es schön.</p> besitzt nur Relevanz zur Überschrift, wenn Du auch Worte wie z. B. "Sonnenschein", "Regen", "wolkenverhangener Himmel" o. ä. darunter stehen hast.

Besser z. B.:
<p>Mit einer Sonnenscheindauer von 6 Stunden wird es heute schön schön.</p>

[Erdbeertorte]

Danke für eure Antworten!

Ich werde nun überlegen, wie ich das am besten alles machen werde.
Einen schönen Tag wünsche ich noch

[SEO-ERFOLG]

am besten sollte es doch so aussehen

<h1>Wetter</h1>
<p>Heute wird es schön.</p>

<h1>Wetter</h1>
<p>Heute wird das Wetter schön.</p>