Header Html

Html Head

Postado: 8 de janeiro de 2022 Tempo de Leitura: 2 Minutos

Header Html para que ser ?

O elemento Header Html é usado para definir uma seção de header, mas em relação ao elemento que a contém. Ou seja, pode ser usado como título de uma página inteira o uso mais comum, mas também como título de um artigo ou de qualquer outra parte do conteúdo da página.

Definição do <header> no Html5

O elemento <header> representa um contêiner para conteúdo introdutório ou um conjunto de links de navegação.

Um elemento <header> normalmente contém:

Um ou mais elementos de título do <h1> ao <h6>
Logotipo ou ícones
Informação de autoria

Veja no Exemplo Um Cabeçalho de Página

HTML

<header>
  <h1>Título da Página Principal</h1>
  <img src="banner.png" alt="Banner Html">
</header>

<header>
  <h2>Artigos de Css</h2>
  <img src="banner-css.png" alt="Banner Css">
</header>

Veja o código mais completo na prática

HTML

<!DOCTYPE html>
<html lang="pt-br">
 
 <head>
    <meta name="Loop Nerd" content="Códigos Pronto" />
    <meta name="description" content="Blog Loop Nerd Códigos Html Prontos para você utilizar no seu negócio."/>
    <meta name="keywords" content="Loop Nerd – Códigos Html Prontos"/>
    <meta name="author" content="https://www.loopnerd.com.br" />
    <meta name="URL" content="https://www.loopnerd.com.br"/>
    <meta http-equiv="content-language" content="pt-br" />
    <meta name="robots" content="index, follow"/>
 </head>

 <body>

  <header>
   <h1>Códigos Html Prontos</h1>
   <h2>Guia de Referências Códigos Html Prontos para agilizar seu tempo</h2>
  </header>

  <article>
 
    <header>
      <h3>Conheça as principais tags semânticas do html5</h3>
      <p>
         o papel do HTML5 não é apenas estruturar documentos para web, mais também descrever o 
         significado do conteúdo presente nesses documentos por meio de TAGS semânticas.
      </p>
    </header>

  </article>

  <article>
 
    <header>
      <h3>Html – Tags de Formatação de Texto</h3>
      <p>
         Neste artigo eu vou listar as tags de formatação de texto que são mas utilizada.
      </p>
    </header>

  </article>

  <footer>
   <p>Todos os direitos reservados. Loop Nerd 2022</p>
  </footer>
 
 </body>

</html>

IMPORTANTE

Agora Você já Sabe Header Html – Para que serve !

Sabe qual a Diferença de <head> para <header> ?

Etiqueta Principal: <head>

O elemento HTML <head> Fornece informações gerais (metadados) sobre o documento, incluindo seu título e links para/definições de scripts e folhas de estilo.

HTML

<!DOCTYPE html>
<html lang="pt-br">
 
 <head>
    <meta name="Loop Nerd" content="Códigos Pronto" />
    <meta name="description" content="Blog Loop Nerd Códigos Html Prontos para você utilizar no seu negócio."/>
    <meta name="keywords" content="Loop Nerd – Códigos Html Prontos"/>
    <meta name="author" content="https://www.loopnerd.com.br" />
    <meta name="URL" content="https://www.loopnerd.com.br"/>
    <meta http-equiv="content-language" content="pt-br" />
    <meta name="robots" content="index, follow"/>
 </head>

<body>

  Conteúdo  Corpo da página.
  
</body>

</html>

Tag do cabeçalho: <header>
O elemento HTML5 <header> Representa um grupo de auxílios introdutórios ou de navegação. Pode conter alguns elementos de cabeçalho, mas também outros, como um logotipo, cabeçalho da seção quebrada, um formulário de pesquisa e assim por diante.

HTML

<!DOCTYPE html>
<html lang="pt-br">
 
 <head>
    <meta name="Loop Nerd" content="Códigos Pronto" />
    <meta name="description" content="Blog Loop Nerd Códigos Html Prontos para você utilizar no seu negócio."/>
    <meta name="keywords" content="Loop Nerd – Códigos Html Prontos"/>
    <meta name="author" content="https://www.loopnerd.com.br" />
    <meta name="URL" content="https://www.loopnerd.com.br"/>
    <meta http-equiv="content-language" content="pt-br" />
    <meta name="robots" content="index, follow"/>
 </head>
 <body>

  <header>
   <h1>Códigos Html Prontos</h1>
   <p>Guia de Referências Códigos Html Prontos para agilizar seu tempo</p>
  </header>

   <p>Texto aqui...</p>
  
  <footer>
   <p>Todos os direitos reservados. Loop Nerd 2022</p>
  </footer>
 
 </body>
</html>

Resumo:

A tag head é usada para o Título do Documento, Folhas de Estilo , Scripts e Meta Tags

A Header Html é usada para os cabeçalhos, Pode usar os elementos de título do <h1> ao <h6>, Nav, Logotipo, ícones e Informação de autoria.

Publicado por: Loop Nerd

4.946 Visualizações

HTML Tags

Header Html

HTML h1

Html Head

Deixe um comentário Cancelar resposta

Artigos Relacionados

Section Html

Nav Html