<h> in <p> oder separat

[Zeusfeld]

Guten Morgen zusammen,

gerade bin ich wieder einmal ein wenig mit html unterwegs und mir stellt sich gerade die Frage wie die Anordnung von <h> und <p> im Zusammenspiel besser geeignet ist.

Variante A

<article>
<h1>Überschrift des Artikels</h1>
<p>erster Abschnitt</p>
<h2>Überschrift zweiter Absatz<h2>
<p>zweiter Abschnitt</p>
</article>

Variante B

<article>
<h1>Überschrift des Artikels</h1>
<p>erster Abschnitt</p>
<p>
<h2>Überschrift zweiter Absatz<h2>
zweiter Abschnitt</p>
</article>

Mir geht es in diesem Fall um die h2 - ist es besser sie im <p>Anzuordnen (Variante B) oder sie über dem <p> zu platzieren (Variante A)

Ich freue mich auf eure Antworten =)

BG
Benjamin

 

[Isometric]

AW: <h> in <p> oder separat

Ein p-Element definiert einen Textabsatz. p steht dabei für paragraph, also Absatz, Abschnitt.
Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente wie z. B. Überschriften, Textabsätze oder Listen enthalten.

Quelle:

 

[ovbb]

AW: <h> in <p> oder separat

Soweit ich weiß ist h1 in p laut w3c nicht valide.

testen kannst du das ganze hier: http://validator.w3.org/

 

[Zeusfeld]

AW: <h> in <p> oder separat

super, vielen Dank für die schnelle Antwort =)

 

[Curanai]

AW: <h> in <p> oder separat

Bestätigt - h-Tags sind außerhalb von p-Tags besser aufgehoben.

Kleiner Hinweis noch: Je Dokument/DOM ein h1-Tag - und dann die Chronologie bis h6 bewahren. Bedeutet (bspw.) ...

[richtig] h1, h2, h3, h3, h5
[falsch] h1, h2, h3, h2, h5, h2

Übersetzt: Du kannst h2- bis einschl. h6-Tags (fast) so oft verwenden wie Du willst, die Chronologie dokumentübergreifend aber unbedingt bewahren!!

Grüße aus der SEO-Ecke.

 

[ovbb]

AW: <h> in <p> oder separat

[richtig] h1, h2, h3, h3, h5
[falsch] h1, h2, h3, h2, h5, h2

was ist aber wenn ich einen text habe der wie ein dokument aufgebaut ist?

sagen wir mal so (word-inhaltsverzeichnis als bsp):
1. Ü1
1.1 Ü2
1.1.1 Ü3
1.1.2 Ü3
1.2 Ü2
1.3 Ü2
2. Ü1
...

da kann man die Chronologie ja nicht einhalten.

 

[Curanai]

AW: <h> in <p> oder separat

Richtig - das ist der viel zitierte schmale Grat zwischen "für SuMa" oder "für Besucher". Letztendlich gibt es Grenzen, wo die gewünschten Vorgaben und Anwendungsrichtlinien der SuMa'n nicht umsetzbar sind (oder man muss eine neue Struktur überdenken). Das Konstrukt oben - wenn es unbedingt eine SEO bekommen müsste - wäre aber was für ein ol-Tag, worin weitere ol/ul-Tags für Struktur sorgen; ganz ohne h-Tag also. Angeblich ist die Wirkung von li-Elementen innerhalb dieser Tags "sehr gut".

Der Hinweis mit der Chronologie ging auch eher in Richtung "wenn möglich". Grundsätzlich (und wenn überhaupt) ein einziges h1-Tag ... ansonsten gibt es "in the wild" große Seiten, die bspw. 74x "h3" haben (nebst Content) - sonst nix.

Grüße

 

[patrick_l]

AW: <h> in <p> oder separat

Seit HTML5 können Überschriften beliebig fortgesetzt werden. Ob das ganze auch Sinn macht, sei mal dahin gestellt. Trotzdem mal erwähne. Sinn macht es in meinen Augen nur dann, wenn es ein sehr »komplexes« Dokument ist, mit vielen unterschiedlichen Absätzen und Bereichen.

Auf weitere h-tags kann man eigentlich verzichten, da diese je nach Bereich einfach im CSS selektiert und dann gewünscht formatiert werden können. Weitere Überschriften sind sicher der Bedeutung nach nützlich, um ein Dokument semantisch korrekt zu ordnen.

Ich benutze in der Regel ein H1 für das Branding der Website. Je nach Inhalt folgt dann ein h2 und weitere, je nach Text und Wichtigkeit. Text in einer Sidebar wird dann z.B. mit einem h3 ausgezeichnet. Kommt halt auf die Seite selbst an.

Auch den Verweis auf SelfHTML sollte man mit Vorsicht genießen. Die Dokumentation ist veraltet, wird nicht aktualisiert und da hier mit HTML5 gewerkelt wird, alles andere als zu gebrauchen. Daher rate ich eher zum HTML5-Handbuch von Stefan Münz (Mitbegründer von SelfHTML).

Liebe Grüße, Patrick

 

[Curanai]

AW: <h> in <p> oder separat

Servus Patrick, naja - "relativ" (wie üblich). Auf der einen Seite formatierst Du via CSS für den Besucher, wodurch Du natürlich nachhübschen kannst. Auf der anderen Seite interessiert sich die SuMa (= Content-Bot) nicht für (D)ein CSS und nimmt die gesetzten Schwerpunkte über das jeweilige Tag regulär mit. Klarheit über einen Effekt bei einer SEO gibt es da nur von Google - aber die verraten bekanntlich nichts.

Aber: Wer sprach von SelfHTML?

Grüße zurück.


EDIT: Ich hab jetzt mal fix DocGog benutzt - Matt Cutts erklärt die Zulässigkeit multipler h1-Tags: http://www.youtube.com/watch?v=GIn5qJKU8VM ... warnt aber auch vor Übertreiben. Sollte also die obige Beispielsturktur zu viele h1 hervorbringen, ist es definitiv nicht zu empfehlen.

EDIT²: Eine sehr schöne Erklärung aus SEO-Sicht für Headlines ... http://blog.woorank.com/2013/04/how-to-use-heading-tags-for-seo/

 

[patrick_l]

AW: <h> in <p> oder separat

Auf der anderen Seite interessiert sich die SuMa (= Content-Bot) nicht für (D)ein CSS und nimmt die gesetzten Schwerpunkte über das jeweilige Tag regulär mit.

Das ist mir schon klar. SEO ist für mich kein Fremdwort Daher achte ich schon auf korrekte Auszeichnung der einzelnen Inhalte. Mit meiner Aussage »auf weitere h-tags kann man verzichten«, meinte ich die beliebige Erweiterung in HTML5.

Sprich, die bereits bekannten Überschriften reichen eigentlich aus. Sehe also in der beliebigen Erweiterung jetzt keinen großen Mehrwert. Anders sieht es bei den anderen Elementen wie <header>, <section>, <aside>, <footer> und Co aus.

Die h1 verwende ich wie bereits erwähnt in erster Linie für das Branding. Sprich, das Logo wird nicht über HTML als Image eingebunden, sondern mittels h1. Aus SEO-Sicht nicht verkehrt, dem Logo eine höhere Bedeutung zu geben.

Beispiel:

<h1 id="branding"><a href="#">Fleischerei Mustermann aus Bremerhaven.</a></h1>

/*--| CSS |----------------- */
#branding a {height:; width:; display:block; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../img/branding.png ) no-repeat;}

In allen anderen Bereichen wird dann mit den restlichen Überschriften gearbeitet. Je nach Relevanz der Inhalte also eine höhere oder niedrigere Ordnung. Für optische dann entsprechende Angaben per CSS.

Aber: Wer sprach von SelfHTML?

Isometric hat auf SelfHTML verlinkt. Was mir entgangenen ist, das es das wiki.SelfHTML und nicht die Dokumentation ist. Bezüglich der Dokumentation bleibe ich bei meiner Aussage.

Liebe Grüße, Patrick