O uso da tag h, especialmente o uso do H1, sempre foi uma questão controversa e também é uma pergunta digna de nosso estudo. Com base na experiência dos meus antecessores, escrevi este artigo com base no meu entendimento das tags H, esperando que seja útil para todos. O que é H tag?
W3C ressalta que as tags H1-H6 podem definir títulos. H1 define o maior título. H6 define o menor título.
H1, H2, H3, H4, H5, H6, como tags de título e diminui de acordo com a importância. Eu acho que é necessário seguir esses princípios, que podem tornar as relações hierárquicas da página mais claras, e permitir que os mecanismos de pesquisa rastreiam melhor e analisem o conteúdo do tópico da página, etc. Para uma melhor compreensão, consulte o seguinte código:
<body> <h1> título de primeiro nível </h1> <p> parágrafo </p> <div> <h2> título de segundo nível </h2> <p> ... </p> <div> <h3> segundo título </h3 </h3> <p> ... </... <h3> <h4> <//HOLD </H4> </h3> <p> ...
O estilo padrão do navegador também diminui com base na importância, e o tamanho da fonte muda de grande para pequeno de H1 para H6. Existem algumas diferenças nos estilos em diferentes navegadores. Devido a essa diferença, geralmente usamos o CSS para unificá -los no layout.
Como você o usa?Atualmente, muitos sites (incluindo sites conhecidos como Taobao, Sina, Sohu) gostam de usar o H1 no logotipo, como mostrado na figura:
Não é sem motivo para todos usarem isso, mas, na verdade, existem muitas vantagens: resume o conteúdo de toda a página, e o logotipo está muito próximo do corpo, o que torna conveniente para os mecanismos de pesquisa agarrar o tópico mais rápido e, em termos de semântica, também é mais preciso.
Obviamente, nem todos os sites usam o H1 no logotipo. O uso da NetEase é um exemplo mais especial:
O NetEase define a tela: nenhum estilo para escondê -lo, que não apenas resolve a contradição de não saber onde colocar o H1, mas também desempenha o papel da otimização de SEO, que pode ser considerado matar dois pássaros com uma pedra.
E a página inicial de Tencent H1 é a notícia de manchete, como mostrado na imagem:
A partir do exemplo acima, podemos ver que o uso do H1 é diferente para os principais sites. Onde colocá -lo no H1? Sempre foi uma questão controversa, mas não acho que haja uma resposta absoluta para onde colocá -la. Eu acho que deve ser considerado com base em fatores como o posicionamento, o tipo e os hábitos de pesquisa de usuários da página da web. Por exemplo, para sites de notícias, você pode colocar o H1 nas notícias da manchete; Para sites de portal abrangentes, você pode colocar o H1 no logotipo; Se o site da empresa também puder colocar o H1 no logotipo, porque os usuários geralmente gostam de pesquisar o nome da empresa; Se houver slogans de site, você também pode colocar o H1 no slogan, o que também é uma boa escolha. Em suma, escolher o que se adapta ao melhor é o melhor.
Em relação ao H2, geralmente gosto de usá -lo na grande coluna da página inicial, como mostrado na figura:
Para a página de conteúdo, estou mais acostumado a dar H2 ao título do artigo, e o título da coluna é representado por H3, como mostrado na figura:
H3 é usado principalmente para títulos de colunas, como mostrado na figura:
A tag H usada na página inicial dos produtos de R&F não apenas tem relacionamentos hierárquicos claros, mas também destaca a importância do conteúdo do produto, o que também é muito benéfico para os mecanismos de pesquisa.
O exemplo a seguir também é muito interessante, como mostrado na figura:
O título da coluna usa o H2 e o título de notícias usa o H1. Se a ordem deles for revertida de acordo com os relacionamentos hierárquicos, não está errado. Ao realmente usar tags H, também podemos defini -lo com base na importância do conteúdo. Portanto, apenas aplicando flexivelmente as teorias básicas pode ser maximizado.
A partir dos exemplos acima, não é difícil ver que o uso da tag h é muito flexível e não se limita a esses usos. Em nossa aplicação, precisamos seguir o princípio de importância decrescente e aprender com um exemplo e aplicá -lo a outros aspectos. O mesmo vale para H4-H6.
Resumiu algunsCom base no entendimento e aplicação de tags H por materiais de referência, especialistas em produção de front-end, sites conhecidos etc., resumi as seguintes especificações, na esperança de lhe trazer algum valor de referência.
H1 Título de primeiro nível
Representa a prioridade superior e sua posição é tão importante quanto a posição das palavras -chave na página. Geralmente é usado em títulos ou manchetes de sites, e alguns sites grandes também são usados em logotipos. Embora os códigos H1 possam ser escritos multiplamente, eles são realmente semanticamente únicos. É melhor aparecer apenas uma vez ou não em uma página.
título H2 Nível 2
Ele aparece principalmente no título do artigo e no título da coluna do conteúdo principal da página. A estrutura de três colunas é geralmente no meio e a estrutura de duas colunas é geralmente do lado importante. Pode ser usado com H3.
Título do Nível Três H3
A barra lateral da página principal geral. H4 é seu auxiliar e aparece não com muita frequência.
O relacionamento no nível da página não pode ser muito profundo, portanto, H4, H5, H6 geralmente aparece menos.