Html Header – Para que serve ?
O elemento Header é 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:
Veja no Exemplo Um Cabeçalho de Página
<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
<!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.
<!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.
<!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 Html Header é usada para os cabeçalhos, Pode usar os elementos de título do <h1> ao <h6>, Logotipo, ícones e Informação de autoria.
Veja mais Artigos sobre <header>
Publicado por: loopnerd
728 Visualizações
Deixe um comentário