H1 in Artikelseite - Site-Titel oder Titel des Artikels?

https://stackoverflow.com/questions/268475

06-07-2019
|

Frage

In einer Artikel orientierten Seite (wie eine Blog-Post), das <h1> Element (Ebene 1 Überschrift) wird häufig verwendet, um Markup entweder:

der Blog-Titel (das heißt, die oft große Website Titel oben auf der Seite nicht zum <title> Elemente) oder
der Artikel Titel

Was ist die beste Wahl und warum?

Um die Eigentümer der Website, die den Namen ihrer Website / Blog in der Welt schreien möge, mit einer Ebene 1 Überschrift um den Site-Titel könnte scheinen, Sinn zu machen.

Aus der Perspektive von dem, was Sie versuchen, mit dem Benutzer zu kommunizieren, sind die Website Titel weniger relevant - der Artikelinhalt ist, was Sie versuchen zu kommunizieren und alle anderen Inhalte sind zweitrangig. Daher wird die Verwendung <h1> für den Titel des Artikels scheint am besten.

Ich fühle mich das <h1> Element auf dem Titel des Artikels konzentrieren soll, nicht der Site-Titel oder andere Inhalte. Dies scheint nicht eine beliebte Konvention mit allen Mitteln zu sein.

Beispiele:

Joel Spolsky <h1> für den Titel des Artikels verwendet und ein Anker für den Site-Titel
Jeff Atwood verwendet keine <h1> bei allen , <h2> für den Titel des Artikels und einen Anker für den Site-Titel
37 Signale SVN verwendet <h1> für den Site-Titel und einen Anker für den Titel des Artikels

Das sind drei verschiedene Ansätze auf drei Standorte, an denen Sie eine starke Rücksicht auf korrekte semantisches Markup erwarten könnte.

Ich denke, Joel hat Recht mit Jeff an zweiter Stelle. Ich bin ziemlich überrascht über die Markup-Entscheidungen der 37Signals Menschen.

Ich scheint es eine ganz einfache Entscheidung: Was ist von größter Bedeutung für die Verbraucher des Artikels? Der Titel des Artikels. Deshalb wickelt den Titel des Artikels in einem <h1> Elemente. Fertig.

Bin ich falsch? Gibt es weitere Überlegungen ich fehle? Habe ich recht? Wenn ja, warum ist der ‚<h1> für Artikel Titel‘ -Ansatz nicht häufiger verwendet?

Ist die Entscheidung, wo das <h1> Element als unveränderlich zu verwenden, wie ich es sagen? Oder gibt es einige subjektive Erwägungen als auch gemacht werden?

Aktualisieren : Danke für alle Antworten bisher. Ich würde wirklich etwas Winkel auf schätzen, wie die Verwendung des <h1> für den Titel des Artikels statt Aufstellungsorttitel Vorteile Benutzerfreundlichkeit und Zugänglichkeit (oder nicht, wie der Fall sein oder auch nicht). Antworten basierend auf Fakten und nicht nur persönliche Vermutung viele Bonuspunkte!

Lösung

Es gibt ein W3C Quality Assurance Spitze zu diesem Thema:

<h1> ist das HTML-Element für die   Überschrift der ersten Ebene eines Dokuments:



Wenn das Dokument ist im Grunde   Stand-alone, zum Beispiel Dinge zu sehen   und Do in Genf, der obersten Ebene   Überschrift ist wahrscheinlich das gleiche wie die   Titel.



Wenn es Teil a   Sammlung, zum Beispiel ein Abschnitt   Hunde in einer Sammlung von Seiten über   Haustiere, dann Element der oberste Ebene   sollte eine bestimmte Menge an übernehmen   Kontext; nur schreiben <h1>Dogs</h1>   während der Titel sollte in jeder Arbeit   Kontext:. Hunde - Ihr Leitfaden für Haustiere

Andere Tipps

Als Bildschirmleser-Benutzer die Überschriftenebene nicht so lange egal, wie es konsistent ist. Verschiedene Blogs verwenden unterschiedliche Konventionen, so gibt es keinen Standard, wie es besser zugänglich zu machen. Sicherstellen, dass die Überschriften Spiel auf der Inhaltsebene ist wichtiger dann auf welcher Ebene der Position verwendet wird. Zum Beispiel, wenn eine Reihe von Blog-Posts mit Kommentaren all Blog-Posts anzuzeigen Überschrift könnten Ebene 2 und zu Beginn der Kommentare haben könnten Sie haben Level Überschrift 3. Ein Beispiel für die einfachen Überschriften zu navigieren jeden Wikipedia-Artikel mit mehreren Abschnitten finden und Unterabschnitte. Ich kann nach Merkmal Überschrift, indem Sie meinen Bildschirm Leser navigieren Hauptabschnitte leicht überspringen auf jeder Ebene 2 Überschrift zu springen, und wenn ich den Absätzen einer bestimmten Abschnitten bewegen möchte ich auf die nächste Position navigiert werden.

Auf Ihrem Blog Homepage, ich würde H1 verwenden, um den Site-Titel und H2 für die Titel der einzelnen Blog-Posts zu bezeichnen, die auf der Titelseite veröffentlicht werden.

Wenn Sie einen bestimmten Artikel eingegeben hat, obwohl, würde ich H1 verwenden für den Titel des Artikels und einen Anker für den Site-Titel.

Dies ist ein schöner und semantischer Setup, das auch von Google geschätzt wird, wenn es kriecht Ihre Website.

In der Wikipedia den h1-Tag enthält die Artikel-Namen und Überschriften im Dokument mit h2 starten. Der Name Wikipedia ist Teil des Titels-Tag im HTML-Header. Ich denke auch, das ist der Weg zu gehen. Also für Blogs, die ich wie Joel Spolsky in den Beispielen würden Sie gegeben haben.

Und ich würde immer mit dem höchsten Niveau beginnen, so Auslassen h1 meiner Meinung nach ist eine schlechte Option.

Der <head> Teil einer HTML-Seite hat ein Element namens <title>. Wie der Name schon sagt, ist dies für den Site-Titel.

HTML wird verwendet, um eine Seite in eine Maschine Parse-able Form zu strukturieren, nicht für Layouten. Wenn es nur über Layouten war, konnte man nur <div> und <span> Blöcke mit verschiedenen Klassen / ids und anwenden CSS sie verwenden. Statt

<h2>Sub Header</h2>

Ich konnte verwenden

<div class="header2>Sub Header</div>

und irgendwo haben einige CSS-Code, der diese <div> aussehen h2 machen (Schriftgröße, Fettschrift, etc.). Der Unterschied besteht darin, dass ein Computer nicht weiß, dass mein <div> in der Tat ein zweite Ebene Header in dem ersten Beispiel (wie soll es das wissen? Ich könnte es nennt anders als „header2“), aber im ersten Fall, es weiß, dass es eine zweite Ebene Header durch die Tatsache, dass es ein <h2> Element ist, und wenn es dem Anwender eine strukturierte Liste von Kopfzeilen einer Seite zeigen will, kann es tun, so

Top Level-Header
- Sub-Header
  - Sub Sub Header
- Sub-Header
- Sub-Header
Top Level-Header
- Sub-Header
  - Sub Sub Header
  - Sub Sub Header
- Sub-Header
  :

durch die Suche nach den H1 / H2 / H3 / ... Elementen und sich, wie oben zu strukturieren. Also, wenn ein Computer versucht, den Titel einer Seite, um herauszufinden, wo es für sie aussehen? In einem Element <title> oder in einem Element namens <h1> benannt? Denken Sie darüber nach, dass für einen Moment, und Sie haben Ihre Antwort.

Natürlich könnte man sagen, „Aber der Titel auf der Seite nicht sichtbar ist“. Nun, es ist in der Regel sichtbar im Browser-Fenstern irgendwo (Fenstertitel oder zumindest Reiter) - aber können Sie es auch auf der Seite sichtbar sein - das kann ich verstehen. Doch was spricht über das zu tun? Wer sagt, dass man es nicht wiederholen kann? Aber ich frage mich, ob Sie ein h1-Element für das verwendet werden soll.

<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>

Verwenden Sie CSS Stil #title, wie Sie möchten. Machen Sie es super groß und sehr fett und haben eine anziehende Farbe des Auges, wenn Sie mögen, nichts dagegen spricht. Automatische Analysemodi ignoriert normalerweise div und Spannweite bis zu einem gewissen Grad, wie es ihnen nichts erzählt (das sind Elemente verwendet, um die Seite für den Leser Layout, aber sie sagen nichts über die Struktur der Seite. LAYOUT nicht Struktur , können Sie nur Stil auf bestimmte Strukturelemente anwenden ein Layout zu erzeugen, aber man sollte mit dem anderen nicht verwechselt werden). Noch weiß ein Computer, was der Titel der Seite ist, es weiß, dass es dank des Titelelement.

Für eine typische Website, zum Beispiel ein Blog, sollte die h1 den Site-Titel enthalten. Ja, auf alle Seite der Website.

Warum? In einer Website gibt es verschiedene Teile, die für alle Seiten gemeinsam genutzt werden. Lassen Sie uns Navigation als Beispiel nehmen:

<ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Dieses #site-navigation ist auf jeder Seite der Website wiederholt. Es stellt die Seitennavigation, nicht die Seitennavigation. Der Unterschied ist wichtig! {Die Seitennavigation ein Inhaltsverzeichnis (wie in einem Wikipedia-Artikel) oder eine Paginierung für einen langen Artikel sein könnte.}

Wenn Sie den Titel des Artikels als h1 verwenden würde, die Site-Navigation in Umfang dieser Position sein würde.

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Also das Markup vermittelt: Die Navigation (→ vom h2 gestartet) Teil des Artikels (→ begann durch die h1) ist. Aber das ist nicht wahr, diese Navigation nicht die Navigation für den Artikel ist. Die Links sind wirklich Teil der gesamten Website und die Website wird von der Website Überschrift dargestellt.

Das Problem wird noch deutlicher, wenn der Artikel enthält Hierher, zu:

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Wie Sie sehen können, gibt es keine Möglichkeit, die Artikelunterrubriken von der Navigation zu unterscheiden. Es sieht aus wie der Artikel hat drei Unterrubriken:. „Warum ich das Bloggen“ und „Navigation“

„Warum sollten Sie meinen Blog lesen“

Also, wenn wir stattdessen h1 für den Site-Titel und h2 für den Titel des Artikels verwenden, die Navigation im Rahmen der Site Position sein kann, durch h2 Verwendung auch:

<body>
  <h1>John’s blog</h1> <!-- the site title -->
  <h2>My first blog post</h2> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Nun ist diese Markup vermittelt: Es gibt eine Website dem Titel „John Blog“ (→ vom h1 gestartet wird) und es enthält einen Artikel (→ von der ersten h2 gestartet wird) und eine Website-Navigation (→ durch den zweiten h2 gestartet). Unterrubriken des Artikels würden jetzt h3 werden, natürlich.

Ein weiteres Problem, das durch h1 für den Titel des Artikels ist, dass dann dort typischerweise Gehalt vor die ersten Position, z.B. die Website-Header inklusive der Site-Titel und andere Sachen. Für Anwender, die über Überschriften, diese erste Content navigieren wäre „unsichtbar“. So ist es gute Praxis jedem einzelnen Block eine eigene Überschrift zu geben.

HTML5 formalisiert dies mit dem Schnitte / umreißt Algorithmus . Es löst viele Probleme umreißt Sie mit HTML gehabt haben könnten 4.01, weil der Inhalt um (meist) kostenlos jetzt sein kann, und Sie müssen nicht auf dem tatsächlichen Überschriften „erfinden“, wenn Sie möchten, Dank nicht, section / article / nav / aside. Aber auch in HTML5 sollte die Website Element die h1 sein, dass ein Kind von body ist aber kein Kind jeden Schneideelement / root. Alle anderen Abschnitte sind in Rahmen dieser Website Überschrift.

H1 in Artikel Seite - Seite Titel oder Artikel Titel

Beide. Dieser Artikel ist informativ: die Wahrheit über mehrere H1-Tags in HTML5 Era .

Es gibt nur eine sein sollte, und da muss man nur sein

h1

; in der Regel ist dies der Titel der Seite. Dann sollte es folgen h2, h3 usw.

So Ihre Seite wie folgt aussehen (ohne alle anderen HTML-Tags)

h1
  h2
  h2
    h3
..etc

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow