Uso de cabeçalhos H1 vs. H2 no composer

ao usar um cabeçalho markdown de primeiro nível (#) em um tópico, isso resultará em h1 ou h2 na saída HTML?

1 curtida

Ele irá gerar um <h1> :slight_smile:

1 curtida

então isso significa que o Discourse assume que é bom ter múltiplas tags <h1> em uma página? Parece que se o título do tópico for h1, os cabeçalhos de primeiro nível dentro desse tópico deveriam ser h2 por padrão, não?

1 curtida

O Discourse não assume nada, ele gerará o que você pedir para ele gerar.
É uma prática melhor usar ## usar ### como títulos de nível superior dentro de uma postagem, com certeza :slight_smile:

ed: veja Use of H1 vs. H2 headings in composer - #16 by Canapin

2 curtidas

Isso é definitivamente uma “educação do usuário” da qual acho que poderíamos nos poupar ao não fazer com que # seja um título de nível 1… :anxious_face_with_sweat:

Você sabe se há alguma maneira de mudar isso? Ou pelo menos ocultar os títulos de nível 1 na barra de ferramentas? (Eu suponho que pessoas que escrevem diretamente em Markdown são um alvo de educação realista…)

1 curtida

Sim, é bem simples. O elemento de lista tem um atributo data-name="heading-1" que você pode selecionar com CSS :slight_smile:

1 curtida

Heh - eu estava vendo isso também. Em um teste rápido, isso oculta a opção H1 tanto no editor de markdown quanto no editor de texto rico:

button[data-name="heading-1"] {
  display: none;
}

(Eu posso manter isso! Não vejo muita razão para oferecer H1 no editor.)

2 curtidas

Eu entendo seu ponto, mas isso não é algo que o Discourse necessariamente decidiu de uma forma ou de outra. O Discourse segue uma convenção de markdown chamada CommonMark, e ela especifica que # deve ser convertido em um H1. Eu acho que essa convenção de como os cabeçalhos de markdown são convertidos em tags HTML é bem padrão em especificações de markdown importantes.

2 curtidas

Bem, dois cabeçalhos <h1> não são uma pergunta tão grande na verdade. É um meme de SEO muito antigo, que não é um problema há muito tempo. O Google e outros usarão o primeiro ou o que considerarem mais adequado.

Podemos discutir se dois cabeçalhos principais são a jogada mais inteligente em termos de conteúdo, mas quando uma plataforma usará um estilo diferente para o nome do tópico e os cabeçalhos nas postagens, isso realmente não importa.

Ainda assim, é mais adequado usar ##/<h2> nas postagens. Mas como isso não desempenha nenhum papel real, minha opinião é que é melhor que os usuários usem alguns cabeçalhos que evitem esses porque estão com medo de usar os cabeçalhos “errados” :man_shrugging:

2 curtidas

Os títulos podem ser apenas um pequeno sinal para SEO hoje – mas eu ainda não gosto de múltiplos H1s porque sou um nerd. :nerd_face:

Também estou pensando em como a Steph está criando documentação imprimível para Publicação de Páginas, onde os H1s na postagem estão sendo renderizados ainda maiores que o H1 superior da página:

imagem

Torná-los H2 os manteria um pouco menores que o H1 superior:

imagem

1 curtida

Sim, esse é o problema. Para mim é natural usar primeiro o cabeçalho de primeiro nível, mas se o tema não for estilizado com a mesma suposição, fica confuso. Há uma espécie de desconexão aqui.

(Nota lateral: está mostrando a doc para você em inglês sem nenhuma intervenção da sua parte?!?)

Isso é natural, sim, e faz sentido quando você está construindo uma página da web do zero. Mas um CMS ou sistema de publicação quase sempre obtém o H1 da página de um campo de título, então você normalmente usaria o H2 para as seções de conteúdo.

(E eu usei a ferramenta de tradução do navegador da web para obter o inglês.)

1 curtida

Eu concordo. Mas não deveríamos esperar que os membros da comunidade precisem saber disso, na minha opinião.

Sim – e eu não vejo desvantagem em apenas ocultar a opção H1.

Embora eu não veja muito uso de títulos pela maioria dos usuários ao fazer postagens típicas. Pessoas que criam tópicos de documentação mais longos provavelmente têm (ou rapidamente terão) um pouco mais de experiência com ## e aquele ícone "TT".

(Além disso: acabei de notar esta discussão antiga interessante onde é sugerido que os títulos só devem ser usados em tópicos e proibidos em respostas: Desabilitar cabeçalhos em respostas como h1 e h2)

2 curtidas

Além disso: Acabei de notar esta discussão antiga e interessante onde é sugerido que os cabeçalhos só devem ser usados em tópicos e proibidos em respostas: Desabilitar cabeçalhos em respostas como h1 e h2

Se isso for de interesse de alguém, este pequeno trecho oculta totalmente o ícone de cabeçalho “TT” no compositor apenas ao responder:

.composer-action-reply button.heading {
  display: none;
}
1 curtida

Os títulos não servem apenas para SEO, mas também para acessibilidade.

Os leitores de tela podem pular de um título para outro, e podemos especificar a profundidade do cabeçalho com atalhos de teclado.

Os tópicos têm seus títulos <h1>, mas cada resposta é precedida por seu próprio <h2> oculto, visível para leitores de tela:

<h2 aria-hidden="false" class="sr-only" id="post-heading-9">
  post by Jagster 4 hours ago
</h2>

Portanto, em qualquer caso, quando você publica um título <h1> ou <h2> em seu conteúdo, ele sempre será um descendente de um <h2> pré-existente :upside_down_face:

Eu diria que usar títulos acima de <h3> em uma postagem pode tornar a navegação por leitura de tela um pouco estranha.

Embora não seja totalmente consistente entre os tópicos existentes, os modelos de postagem de Customization > Plugin usam <h3> como títulos principais:

| | | |
| - | - | - |
| :information_source: | **Summary** | Em poucas palavras, o que este plugin faz? |
| :hammer_and_wrench: | **Repository Link** | <> |
| :open_book: | **Install Guide** | [Como instalar plugins no Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |

<br>  
  
### Features
 
Descreva os principais recursos do plugin
 
### Configuration

Inclua etapas detalhadas sobre como configurar o plugin (inclua capturas de tela onde for necessário)

### Settings 
 
Inclua uma tabela de configurações e descrições das configurações

| Name | Description
|-|-|
|

Curiosamente, este não é o caso para os modelos de Customization > Theme e Customization > Theme component, mas seus modelos não contêm títulos. Talvez isso devesse ser alterado.

4 curtidas

Concordo. Eu também sou um pouco nerd e gosto que minha hierarquia de títulos seja limpa.
Então, na verdade, em uma postagem só devemos usar h3 h4 h5 se quisermos fazer as coisas corretamente — pode ser interessante ter algum tipo de componente de tema que “corrija” isso, significaria remover os níveis de título mais altos dos botões e “traduzir” o estilo para h3 e abaixo nos tópicos para que pareça certo quando os usarmos…?

Há também h6 caso você precise de mais um nível nas postagens, mas é minúsculo

H5 também é menor que o texto normal na postagem, então não tenho certeza se eu usaria isso

este é h5
2 curtidas

Ah, eu não sabia disso! Provavelmente explica o comentário de Pfaffman de que “o primeiro nível de cabeçalho em uma postagem deve ser um h3” [1]

O truque de CSS então se torna:

button[data-name="heading-1"], button[data-name="heading-2"] {
  display: none;
}

Obrigado por abordar a acessibilidade – estou trabalhando para mantê-la em mente.


  1. source ↩︎

3 curtidas

Você certamente poderia ajustar os estilos para H3-5… ou eles podem estar bons como estão:

2 curtidas