Neste artigo iremos falar sobre as tags de título e seus diversos níveis. O nome em inglês é heading ou headings no plural, então não se assuste caso veja alguns desses nomes durante o texto.
Títulos ou Headings
Títulos são definidos pela tag <h1> tendo níveis até o <h6>.
A tag <h1> é tida com a tag de maior importância, enquanto a tag <h6> é tida como a tag de menor importância.
Abra um editor de sua preferência e digite o conteúdo abaixo. Lembrando que copiar e colar não te ajuda a aprender.
<h1>Título de Nível 1</h1> <h2>Título de Nível 2</h2> <h3>Título de Nível 3</h3> <h4>Título de Nível 4</h4> <h5>Título de Nível 5</h5> <h6>Título de Nível 6</h6>
Lembrete: Pratique todo o conteúdo visto no artigo.
A importância dos Headings
Sites de pesquisas usam os títulos para indexar uma estrutura de conteúdos da sua página web.
Os usuários analisam a página ou a postagem com base no título. Por isso é importante saber utilizar os diferentes níveis de headings na estrutura do seu site ou postagem.
<h1> deve ser usado para os títulos principais, seguidos do <h2> como subtítulo ou título de segundo nível, seguido pelo <h3> e assim por diante.
Lembrete: Pratique todo o conteúdo visto no artigo.
Headings maiores
As tags de título possuem um tamanho padrão para os textos. No entanto, você pode especificar um tamanho utilizando o atributo style e a propriedade CSS font-size na tag.
Exemplo
<h1 style="font-size:55px"> Título nível 1 </h1>
Linhas Horizontais em HTML
A tag <hr> define uma quebra de linha temática em uma página HTML. E frequentemente é mostrada uma linha horizontal na página.
O elemento <hr> é usado para separar um conteúdo (ou definir uma mudança) em uma página HTML.
Exemplo
<h1>Este é um título nível 1</h1> <p>Este é um parágrafo.</p> <hr> <h2>Este é um título nível 2</h2> <p>Este é outro parágrafo.</p> <hr>
Este é um título nível 2
Este é um parágrafo.
Este é um título nível 3
Este é outro parágrafo.
Elemento HTML <head>
O elemento HTML <head> é um container de metadata. Metadata é informação sobre o documento HTML. Mas não se preocupe, as metadatas não são mostradas.
O elemento <head> é colocado entre as tags <html> e <body> como mostra o exemplo abaixo.
<!DOCTYPE html> <html> <head> <title>Meu primeiro HTML</title> <meta charset="UTF-8"> </head> <body> . .
Lembrete: Pratique todo o conteúdo visto no artigo.
Como visualizar o Código Fonte?
Ao ver uma página na internet, você já se perguntou, “Como será que fizeram isso?”.
Visualizando o Código Fonte
Clique com o botão direito do mouse na página de sua preferência e escolha a opção Exibir código fonte da página ou algo semelhante (dependendo do seu navegador). Essa opção irá abrir uma página com todo o código fonte em HTML da página web.
Inspecionar um Elemento HTML
Clique com o botão direito do mouse na página HTML de sua preferência e escolha a opção Inspecionar ou Inspecionar Elemento (dependendo do seu navegador). Essa opção mostra como os elementos da página são feitos (mostra todo o HTML e CSS da página). Você também pode editar os elementos HTML e CSS na aba que abrir no seu navegador.
Lembrete: Pratique todo o conteúdo visto no artigo.