Títulos e outros

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?

Textos "Exibir código fonte da página" e "Inspecionar" em um fundo preto.
Como visualizar o Código Fonte – Chrome

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.

Curta nossa página no Facebook

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here