Tag HTML <cabeçalho>

Hoje abordaremos exemplos de cabeçalho de tags HTML . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.

A tag HTML <header> representa um contêiner para conteúdo introdutório ou um grupo de conteúdo introdutório em uma página da web. É normalmente usado para conter cabeçalhos, logotipos, menus de navegação, barras de pesquisa e outros conteúdos de nível superior que aparecem na parte superior de uma página da web.

O elemento <header> é uma tag semântica, o que significa que fornece informações sobre o significado e a estrutura do conteúdo que contém. Isso ajuda os mecanismos de pesquisa e outras ferramentas da Web a entender a finalidade e o contexto do conteúdo, o que pode melhorar a acessibilidade e a otimização do mecanismo de pesquisa (SEO).

O cabeçalho <article> é o seguinte:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>Here goes your heading for the article</h1>
<p>A report written by Mr Examples</p>
<p>Several details are provided here of the heading</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cabeçalho de uma página:

Example: 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Here goes your heading for the article</h1>
<p>A report written by Mr Examples</p>
</header>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo completo da tag <header> :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#python">Python</a></li>
<li><a href="#js">JavaScript</a></li>
</ul>
</nav>
<h1>Mr Examples</h1>
</header>
<main>
<h2>Welcome to Mr Examples</h2>
<p>This is the content of Mr Examples.</p>
</main>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Uso do cabeçalho da tag

O elemento <header> funciona como uma área de retenção para conteúdo introdutório ou um conjunto de links de navegação.

Normalmente, um elemento <header> inclui:

  • Contém vários títulos (h1-h6)
  • Ícone ou logotipo
  • Dados do autor
IMPORTANTE: Um documento HTML pode conter mais de um elemento de cabeçalho. Por outro lado, um elemento <header> não pode aparecer em um <footer> , <address> ou em qualquer outro elemento de cabeçalho .

Compatibilidade do navegador

Os números na tabela indicam quando o elemento <header> foi totalmente implementado pela primeira vez por um navegador.

Elemento
<cabeçalho> 5,0 9,0 4.0 5,0 11.1

Atributos

Global

O cabeçalho da Tag <header> é compatível com os Atributos Globais em HTML.

Evento

O cabeçalho da tag <header> é compatível com os atributos do evento em HTML.


CSS predefinido

O elemento <header> é frequentemente gerado com os valores padrão fornecidos:

header {
display: block;
}

Benefícios da tag HTML <header>

A tag HTML <header> fornece vários benefícios quando usada corretamente no design e desenvolvimento de páginas da web:

  • O uso da tag <header> ajuda os leitores de tela e outras tecnologias assistivas a entender melhor a estrutura e a finalidade do conteúdo. Isso torna mais fácil para os usuários com deficiência navegar e acessar o conteúdo em uma página da web.
  • A tag <header> fornece aos mecanismos de pesquisa informações adicionais sobre o conteúdo e a estrutura da página. Isso pode melhorar a visibilidade e a classificação da página nos resultados da pesquisa.
  • Usando a tag <header> , web designers e desenvolvedores podem estabelecer uma estrutura consistente para a seção de cabeçalho de uma página web. Isso ajuda a criar um design coeso e melhora a experiência do usuário.
  • A tag <header> pode ser usada para conter menus e links de navegação, facilitando a localização e o acesso dos usuários às principais seções de um site.
  • A tag <header> pode ser facilmente estilizada usando CSS para criar um design exclusivo e visualmente atraente para a seção de cabeçalho de uma página da web. Isso pode ajudar a melhorar a aparência geral de um site.
Se este artigo foi útil para atender aos seus desejos educacionais, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone