H1 na página do artigo - título do site ou título do artigo?

https://stackoverflow.com/questions/268475

06-07-2019
|

Pergunta

Dentro de uma página com orientação artigo (como um post no blog), o elemento <h1> (nível 1 título) é comumente usado para marcação ou:

o título do blog (ou seja, a freqüência de grande título do site no topo da página, não para o elemento <title>), ou
o título do artigo

O que é a melhor escolha e por quê?

Para o proprietário do site, que podem querer gritar para o mundo o nome do seu site / blog, usando um título de nível 1 ao redor do título do site pode parecer fazer sentido.

Do ponto de vista do que você está tentando se comunicar com o usuário, o título do site é de menor relevância - o conteúdo do artigo é o que você está tentando se comunicar e todos outros conteúdos do site é secundário. Portanto, usar <h1> para o título do artigo parece melhor.

Eu sinto o elemento <h1> deve se concentrar no título do artigo, não o título do site ou outro conteúdo. Este não parece ser um popular convenção por qualquer meio.

Exemplos:

Joel Spolsky <h1> para o título do artigo, e uma âncora para o título do site
Jeff Atwood não <h1> em tudo , <h2> para o título do artigo e uma âncora para o título do site
SVN 37 Signals' usos <h1> para o título do site e uma âncora para o título do artigo

Isso é três abordagens diferentes em três sites onde você pode esperar uma consideração forte para marcação semântica correta.

Eu acho que Joel tem direito com Jeff um segundo próximo. Estou bastante surpreendido com as opções de marcação por parte das pessoas 37signals.

Para mim, parece completamente uma decisão simples: o que é da maior relevância para o consumidor do artigo? O título do artigo. Portanto embrulhar o título do artigo em um elemento <h1>. Feito.

Estou errado? Há outras considerações que eu estou perdendo? Estou certo? Se assim for, por que o '<h1> para título do artigo' abordagem não mais comumente usado?

É a decisão de onde usar o elemento <h1> como invariável como eu colocá-lo? Ou existem algumas considerações subjetivas a serem feitas também?

Atualização : Obrigado por todas as respostas até agora. Eu realmente aprecio algum ângulo de como o uso do <h1> para o título do artigo em vez de local de benefícios título usabilidade e acessibilidade (ou não, conforme o caso pode ou não ser). Respostas baseadas em fatos, em vez de suposição apenas pessoal vai ter muitos pontos de bónus!

Solução

Há um W3C Quality Assurance ponta sobre este tópico:

<h1> é o elemento HTML para o título de primeiro nível de um documento:

Se o documento é basicamente stand-alone, por exemplo, coisas para ver e fazer em Genebra, de nível superior título é provavelmente o mesmo que o título.

Se é parte de um coleção, por exemplo, uma seção sobre Cães em uma coleção de páginas sobre animais de estimação, em seguida, o título de nível superior deve assumir uma certa quantidade de contexto; <h1>Dogs</h1> gravação apenas enquanto o título deve trabalhar em qualquer contexto:. Dogs - Seu Guia para Animais

Outras dicas

Como um usuário de leitor de tela o nível de título não importa, desde que seja consistente. Diferentes blogs usam diferentes convenções, então não há nenhuma maneira padrão para torná-lo mais acessível. Certificando-se os títulos de corresponder ao nível de conteúdo é mais importante, em seguida, qual o nível de título é usado. Por exemplo, se exibindo uma série de posts com comentários todos os posts podem ter título de nível 2 e no início das observações que você poderia ter título de nível 3. Para um exemplo de fácil de títulos Navegar encontrar qualquer artigo da Wikipedia com várias seções e subseções. Eu posso facilmente pular seções principais usando meus leitores de tela navegar pelo recurso indo para saltar para qualquer nível 2 título, e se eu quiser mudar para subseções de uma dada seções vou navegar para o próximo título.

Na página inicial do seu blog, eu usaria H1 para denotar o título do site e H2 para os títulos dos posts individuais que são publicados na primeira página.

Ao digitar um determinado artigo, porém, gostaria de usar H1 para o título do artigo e uma âncora para o título do site.

Este é um agradável e configuração semântica que também será apreciado pelo Google ao rastrear o seu site.

Na Wikipedia o h1-Tag contém o artigo-nome e títulos no início documento com h2. O nome Wikipedia é parte do título-tag no html-header. Eu também acho que é o caminho a percorrer. Assim, para blogs que eu faria como Joel Spolsky nos exemplos que você deu.

E eu sempre começar com o mais alto nível, de modo soltando h1 na minha opinião é uma má opção.

A parte <head> de uma página HTML tem um elemento chamado <title>. Como o nome indica, este é para o título do site.

HTML é usado para estruturar uma página em uma forma parse-able máquina, não para layouting. Se fosse apenas cerca de layouting, você só poderia usar <div> e <span> blocos com diferentes classes / ids e aplicar CSS para eles. Em vez de

<h2>Sub Header</h2>

Eu poderia usar

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

e em algum lugar tem algum código CSS que vai fazer este olhar <div> como h2 (tamanho da fonte, negrito, etc.). A diferença é que um computador não pode saber que a minha <div> é na verdade um segundo cabeçalho de nível no primeiro exemplo (como ele deve saber que? Eu poderia nomeá-lo de forma diferente "header2"), no entanto, no primeiro caso, ele sabe que é um segundo nível cabeçalho pelo fato de que é um elemento <h2> e se ele quer mostrar ao usuário uma lista estruturada de cabeça-de linhas de uma página, ele pode fazê-lo

Top nível de cabeçalho
- Sub Header
  - Sub Sub Header
- Sub Header
- Sub Header
Top nível de cabeçalho
- Sub Header
  - Sub Sub Header
  - Sub Sub Header
- Sub Header
  :

, procurando os elementos H1 / H2 / H3 / ... e estruturação los como acima. Então, se um computador tenta descobrir o título de uma página, onde ele vai olhar para ele? Em um elemento chamado <title> ou em um elemento chamado <h1>? Pense nisso por um momento e você tem sua resposta.

É claro que você pode dizer "Mas o título não é visível na página". Bem, geralmente é visível no (título de janela ou pelo menos título da guia) em algum lugar janela do navegador - no entanto, você pode querer que ele seja visível na página, bem como - Eu posso entender isso. No entanto, o que fala sobre isso? Quem disse que você não pode repetir? Mas eu me pergunto se você deve usar um elemento h1 para isso.

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

Use CSS para #title estilo da maneira que quiser. Torná-lo super grande e super arrojado e tem uma atraente cor se você gosta, nada fala contra ela. analisadores automáticos página costumam ignorar div e span até certo ponto, uma vez que lhes diz nada (estes são elementos utilizados para o layout da página para o leitor, mas não dizem nada sobre a estrutura da página. LAYOUT não é ESTRUTURA , você só pode aplicar o estilo a certos elementos estruturais para gerar um layout, mas não deve ser confundido com o outro). Ainda um computador vai saber o que o título da página é, ele sabe que, graças ao elemento título.

Para um site típico, por exemplo, um blog, o h1 deve conter o título do site. Sim, no todas página do site.

Por quê? Em um site, existem várias peças que são compartilhados por todas as suas páginas. Vamos navegação tomada como exemplo:

<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>

Esta #site-navigation é repetido em cada página do site. Representa a navegação no site, e não a navegação da página. A diferença é importante! {A navegação de página poderia ser uma tabela de conteúdo (como em um artigo da Wikipedia) ou uma paginação para um longo artigo.}

Se você quiser usar o título do artigo como h1, a navegação do site seria no âmbito desta rubrica.

<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>

Portanto, este transmite marcação: A navegação (? iniciado pelo h2) faz parte do artigo (? iniciado pelo h1). Mas isso não é verdade, esta navegação não é a navegação para o artigo. Os links são realmente parte de todo o site, eo site é representado pelo título site.

O problema se torna mais clara quando o artigo contém subtítulos, também:

<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>

Como você pode ver, não há nenhuma maneira de diferenciar o artigo sub-rubricas da navegação. Parece que o artigo tem três sub-rubricas:. "Por que eu estou a blogar", "Por que você deve ler o meu blog" e "Navegação"

Assim, se em vez usar h1 para o título do site e h2 para o título do artigo, a navegação pode ser no âmbito da rubrica local, usando h2, também:

<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>

Agora, esta transmite de marcação: Existe um site intitulado "blog de João" (? iniciado pelo h1) e contém um artigo (? iniciada pelo primeiro h2) e uma navegação no site (? iniciado pela segunda h2). Sub-rubricas do artigo seria h3 agora, é claro.

Outro problema usando h1 para o título do artigo é que, em seguida, normalmente há conteúdo antes o primeiro título, por exemplo, o cabeçalho do site, incluindo o título do site e outras coisas. Para os usuários que navegam através de títulos, este primeiro conteúdo seria "invisível". Por isso, é boa prática para dar a cada bloco separado uma rubrica própria.

HTML5 formaliza esta com a seccionamento / delineamento algoritmo . Ele resolve muitos problemas delineando você possa ter tido com HTML 4.01, porque a ordem conteúdo pode ser (principalmente) livre agora e você não tem que "inventar" títulos reais, se você não quiser, graças a section / article / nav / aside. Mas também em HTML5 o título site deve ser o h1 que é um filho de body mas não uma criança de qualquer corte elemento / root. Todas as outras secções estão no escopo deste site título.

H1 na página do artigo -? Título do site ou artigo título

Ambos. Este artigo é informativo: a Verdade Sobre múltipla H1 Tags na HTML5 Era .

Não deve ser apenas um, e deve haver uma única

h1

; geralmente este é o título da página. Em seguida, ele deve seguir H2, H3, etc.

Assim sua página pode ficar assim (sem todas as outras tags de html)

h1
  h2
  h2
    h3
..etc

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow