Pular para o conteúdo principal

Destacando texto com cabeçalhos em html

Utilizando headings(cabeçalhos) em seu documento html

Em Marcando Texto e Definindo o Idioma do Documento, vimos como marcar textos em um documento html utilizando a tag <p></p> e também aprendemos como definir o idioma para o documento. Na postagem de hoje veremos como dar destaque ao nosso texto através da utilização de cabeçalhos. 

Tags h1 a h6

O html possui tags específicas que destacam o texto, de modo tanto o usuário que lê o texto, quanto o navegador, ferramentas de busca e leitores de telas para pessoas com deficiência visual possam identificar parte do texto como cabeçalhos para títulos de capítulos e subcapítulos.  As tags de cabeçalho vão de <h1></h1>a</h6></h6> começando pelo nível mais importante (h1). 

Não é mera estética

É boa prática que cada documento html possua um e somente um <h1>. Embora o navegador utilize um estilo próprio para exibição dos textos de cabeçahos <h> (normalmente com letras maiores e em negrito), eles não devem ser utilizados com fins meramente estéticos. Veremos em postagens futuras como estilizar texto quando aprendermos a tecnologia chamada CSS.

Da mesma forma que fizemos com os exemplos anteriores crie um novo documento do zero, usando a mesma estrutura básica que já aprendemos (<!DOCTYPE html>, <html>, <head>, <title>, <meta>, <body>... Quanto mais você reescreve e pratica, mais rápido você se acostuma com o uso das tags e sua estrutura. Somente APÒS terminar compare o seu código com o código abaixo:

<!DOCTYPE html>

<html>

  <head>

    <title>Minha Página Web</title>

    <meta charset="utf-8">

  </head>

  <body>

    <h1>Este é um cabeçalho H1</h1>

    <h2>Este é um cabeçalho H2</h2>

    <h3>Este é um cabeçalho H3</h3>

    <h4>Este é um cabeçalho H4</h4>

    <h5>Este é um cabeçalho H5</h5>

    <h6>Este é um cabeçalho H6</h6>    

  </body>

</html>

Salve o documento com o nome que preferir, em um local de fácil acesso e com a extensão do arquivo ".html" ou ".htm" e abra o documento para visualizar o resultado no navegador.

Importante! Embora existam 6 níveis possíveis, é boa prática utilizar cabeçalhos até o nível 3 ou 4 somente visando tornar o documento mais simples e estruturado.

Conclusão

Lembrando, o grande poder e uso das tags <h> (1-6) é para estruturar os cabeçalhos, títulos e subtítulos por ordem de importância, não para destacá-los visualmente, como já havia falado antes.

Por hoje é isso! Na próxima postagem veremos uma breve introdução ao alinhamento e estilização de textos. Ficou com alguma dúvida? Comente! 

Até a próxima!


Comentários

Postar um comentário