Articles

Headings HTML: O Guia Completo Para a Adição de Manchetes Para a Estrutura do Documento

Conteúdo de cabeçalho

Os seis tags de título são uma parte importante do conteúdo HTML escrito. Além da necessidade um pouco óbvia que eles preenchem (as pessoas às vezes querem colocar manchetes em cima das coisas), as marcas de manchete também têm o valor SEO, ajudá-lo a ser um escritor mais organizado, e fazer páginas mais user-friendly.,

marcas de Manchete e SEO

há duas coisas que um motor de busca está tentando descobrir sobre a sua página:

  • o que é?quão bom é?

geralmente, links para uma página são usados como uma medida de qualidade (como é bom) e análise na página é usado para descobrir o que a página é sobre. (Há algumas sobreposições aqui, é claro: o Google faz alguns julgamentos sobre a qualidade de uma página, olhando para a página, e também tenta descobrir o que a página é sobre, olhando para o que outras páginas dizem quando eles se conectam a ela.,) Uma das (muitas) coisas que o Google e outros motores de busca olhar determinar o conteúdo de uma página é as palavras que aparecem dentro de tags de cabeçalho. É por isso que, se você está tentando classificar para palavras ou frases específicas, é realmente uma idéia para incluir essas palavras e frases em suas tags de cabeçalho.

escrita mais organizada

quando as pessoas escrevem sem usar tags de cabeçalho (por exemplo, quando escrevem à mão ou em editor visual como MS Word), muitas vezes eles apenas escrevem em longas e ininterruptas correntes de texto que continuam muito tempo., Ou, pior ainda, eles podem adicionar manchetes visuais (com negrito, todas as capas, texto maior, ou algo mais. Isso é muito comum, como as pessoas instintivamente sabem que devem dividir o texto em pedaços menores. O problema com isso é que não é claro como as diferentes seções se relacionavam umas com as outras. É suposto a secção com letra 15pt ser uma subsecção das manchetes da parte com letra a negrito 14pt? Muitas vezes, nem o escritor sabe porque não pensou nisso.,

as marcas de cabeçalho criam uma hierarquia de conteúdo

numa página com um único pedaço de conteúdo (que deve ser a maioria das páginas), o título principal para esse conteúdo deve ser uma etiqueta

. As secções principais desse conteúdo devem ser alinhadas com<h2>. As subsecções dentro dessas secções devem ser encabeçadas com<h3>, e assim por diante. Deve ser possível extrair um esboço das suas marcas de manchete. (Na verdade, nós fazemos isso — olhe para o widget conteúdo no topo da página., Esta estrutura torna a escrita mais organizada, o que (pelo menos 99% do tempo) também torna a escrita melhor.

Protip: muitos de nós que escrevemos online de facto mapeiam as manchetes primeiro e depois preenchem as secções. É apenas delineamento à moda antiga, mas com certeza pode fazer a escrita ir muito mais rápido e o resultado final é geralmente muito mais coerente do que se você apenas começou no topo e esperava chegar a algum lugar antes de terminar.

as manchetes são boas para os usuários

Aqui está um pequeno segredo sujo sobre o conteúdo online: leitores skim. Quase ninguém lê cada palavra de um artigo online., E há muito pouco que possas fazer. Não podes impedi-lo. Mas você pode fazê-lo de modo que os skimmers terão algo para se agarrar à medida que seus olhos se movem para baixo da página. Manchetes, se eles são bem distribuídos e relevantes para o seu conteúdo, dar a skimmers um monte de pequenas maneiras de volta para o texto do artigo. Eles também dividem o artigo em pedaços aparentemente digeríveis do tamanho de mordida, de modo que um escumador impaciente não é feito ansioso por uma longa Soluna de texto ininterrupto.,

And don’t forget linking

As of HTML5, you can link to any element on a page by appending a hash-sign (#) and the id do elemento. (No passado, só se podia ligar a elementos âncora.) Ao adicionar um id a cada cabeçalho de sua página, você pode permitir que as pessoas se conectem a qualquer lugar em seu documento. (Novamente, veja como os links de conteúdo no topo da página funcionam.,) Estes links in-document podem ser extremamente úteis, especialmente se você fornecer conteúdo de referência de qualquer tipo, ou se seus artigos são particularmente longos.

usando marcas de cabeçalho para estruturar o seu conteúdo

em termos gerais, existem dois tipos de páginas de conteúdo: páginas de conteúdo único (que apresentam uma única parte de Conteúdo) e páginas de índice (que listam um monte de conteúdo). As páginas de índice incluem a principal página de blog de um site, categoria e arquivos de tag, páginas de autor que listam todos os artigos escritos pelo autor, e assim por diante., Então há também o conteúdo (barras laterais, widgets, footers) que aparece em quase todas as páginas e que não é realmente “conteúdo.”Como você usa tags de manchetes nestas situações pode ter um impacto na SEO e usabilidade.

<

> e <h2> os elementos

No único conteúdo de páginas em todo o site o título de uma determinada parte do conteúdo deve quase sempre ser <h1> tag perto do topo da <body>., Então, como mencionado acima, suas seções dentro do artigo pode usar<h2> tags.

<main><article> <h1>All About Headlines</h1> . . . <h2>Headlines and SEO</h2> . . . <h2>Headlines and Structure</h2> . . . </article></main> 

Em uma página de índice, normalmente faz sentido colocar o título do site em uma tag <h1> tag, ou colocar o nome do índice de lá: o nome da categoria, o nome do autor, ou o que é que define essa página. Em seguida, os títulos de todas as peças individuais que estão listadas lá deve ter um elemento <h2> para seus títulos.,

no passado, tem sido comum usar um ID

tag para o título do site quando aparece em páginas de conteúdo único.

<header> <h2>HTML Code Tutorials</h2> <nav><!-- menu --></nav> </header> <main> <h1>Actual Title of This Page</h1? . . . </main> 

opiniões são mistas sobre isso, mas a tendência é cada vez menor. Mais pessoas estão simplesmente colocando o Título (e, mais provavelmente, um logo img) no cabeçalho e guardando as marcas de cabeçalho para conteúdo específico na página. Parte da sua própria consideração para se fazer isso provavelmente terá a ver com o quão importante é o título do seu próprio site em relação aos seus objetivos SEP.,

Widgets and other “non-content”

It has also been common until recently to use <h3> or <h4> elements for widget titles in sidebars. Muitos sistemas de gerenciamento de conteúdo simplesmente fazem isso automaticamente, então isso pode não importar para você. Mas é algo que você pode querer pensar se você está projetando a marca de toda a sua página do zero. Você quer que seus elementos de manchete sugiram que o significado real de sua página é “Login” ou “Inscrever-se para a lista de discussão”?, (É claro que isto é parcialmente evitado colocando a sua barra lateral num elemento <aside>.)

Adam é um escritor técnico especializado em documentação de desenvolvimento e tutoriais.