Tags HTML <h1> a <h6>

Nosso tópico neste post são exemplos de HTML Tag Hn . Na esperança de fornecer aos alunos o que eles precisam aprender.

Em HTML, as tags de cabeçalho são usadas para definir cabeçalhos ou títulos para diferentes seções de uma página da web. Existem seis níveis de tags de cabeçalho em HTML, de <h1> a <h6> , sendo <h1> o mais importante e <h6> o menos importante. Aqui está uma visão geral de como as tags de título funcionam em HTML:

<h1> é usado para o título principal de uma página da web, que geralmente é o título da página.
<h2> é usado para o subtítulo de uma página, que é um título secundário que descreve o tópico principal da página.
<h3> a <h6> são usados para outros subtítulos e subseções de uma página, com cada nível indicando um nível decrescente de importância.

Dica: as tags de título não são usadas apenas para fins visuais, mas também têm significado semântico para mecanismos de pesquisa e leitores de tela. O uso de tags de cabeçalho apropriadas com conteúdo significativo pode melhorar a acessibilidade e o SEO de uma página da web.

O código fornecido explica o funcionamento de diferentes tags de cabeçalho em html:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<h1>Here is how heading 1 looks like</h1>
<h2>Here is how heading 2 looks like</h2>
<h3>Here is how heading 3 looks like</h3>
<h4>Here is how heading 4 looks like</h4>
<h5>Here is how heading 5 looks like</h5>
<h6>Here is how heading 6 looks like</h6>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O plano de fundo dos títulos e as cores do texto podem ser definidos aplicando CSS:

Example:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Blue;">Heading 1 with background color blue</h1>
<h2 style="color:Red;">Heading 2 with color red</h2>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O seguinte código CSS pode ser usado para alinhar títulos:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Heading 1 with text-align center</h1>
<h2 style="text-align:right">Heading 2 with text-align right</h2>
<h3 style="text-align:left">Heading 3 with text-align left</h3>
<h4 style="text-align:justify">Heading 4 with text-align justify</h4>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de uso de tags H1-H6 em um documento HTML para estruturar uma página da Web sobre um livro fictício:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
<h1>The Adventures of Tom Sawyer</h1>
<h2>About the Author</h2>
<p>Mark Twain was an American author and humorist known for his novels The Adventures of Tom Sawyer and Adventures of Huckleberry Finn.</p>
<h2>Summary</h2>
<p>The Adventures of Tom Sawyer tells the story of a young boy growing up in the fictional town of St. Petersburg, Missouri. Tom gets into various mischievous adventures with his friends, including whitewashing a fence and attending his own funeral. Along the way, he also learns valuable lessons about friendship and responsibility.</p>
<h3>Chapters</h3>
<h4>Chapter 1: The Boys' Adventure in the Cave</h4>
<h4>Chapter 2: The Search for Treasure</h4>
<h4>Chapter 3: The Trial of Injun Joe</h4>
<h2>Reviews</h2>
<h3>The New York Times</h3>
<p>"A thrilling and heartwarming tale that will delight readers of all ages."</p>
<h3>Publishers Weekly</h3>
<p>"Mark Twain's classic novel is a timeless masterpiece of American literature."</p>
<h2>Buy the Book</h2>
<p>The Adventures of Tom Sawyer is available for purchase at all major book retailers.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

HTML <h1> a <h6> Marcações:

Uso de tags Hn

Cabeçalhos em HTML são definidos pela Tag Hn < h1 > até < h6 >.

Os cabeçalhos com a tag <h1> são considerados os mais importantes, enquanto o cabeçalho com a tag <h6> é o menos proeminente.

IMPORTANTE: Certifique-se de utilizar um <h1> em cada página – ele especifica o cabeçalho/assunto principal de toda a página.

Além disso, certifique-se de não pular os níveis de título – comece com <h1> , depois <h2> , etc.

Atributos

Global

As tags Hn de <h1> a <h6> são compatíveis com os atributos globais do HTML .

Evento

As tags Hn de <h1> a <h6> são compatíveis com os atributos de eventos do HTML .

Compatibilidade do navegador

Elemento
<h1> – <h6>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

Quando se trata de Tag Hn , muitos navegadores irão renderizar o elemento <h1> com os seguintes valores padrão:

h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

A maioria dos navegadores renderizará o elemento <h2> com os seguintes valores padrão:

h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

A maioria dos navegadores renderizará o elemento <h3> com os seguintes valores padrão:

h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

A maioria dos navegadores renderizará o elemento <h4> com os seguintes valores padrão:

h4 {
display: block;
font-size:
1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

A maioria dos navegadores renderizará o elemento <h5> com os seguintes valores padrão:

h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

A maioria dos navegadores renderizará o elemento <h6> com os seguintes valores padrão:

h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

Importância da Marca HTML Hn

Aqui estão algumas razões pelas quais as tags de título são importantes:

As tags de cabeçalho criam uma hierarquia visual em uma página da Web, tornando mais fácil para os usuários entender a estrutura do conteúdo e navegar na página. Eles também ajudam os usuários a digitalizar rapidamente a página e identificar as seções mais importantes.
Leitores de tela e outras tecnologias assistivas dependem de tags de cabeçalho para navegar em uma página da Web e fornecer contexto para usuários com deficiência visual. Tags de título adequadamente estruturadas podem melhorar significativamente a acessibilidade de uma página da web.
As tags de título fornecem informações valiosas aos mecanismos de pesquisa sobre a estrutura e o conteúdo de uma página da web. Os mecanismos de pesquisa usam tags de cabeçalho para determinar o tópico principal da página e a importância de cada seção. O uso adequado de tags de cabeçalho pode melhorar a visibilidade e a classificação de uma página nos resultados de pesquisa.
As tags de título ajudam a estruturar o conteúdo de uma página da Web e facilitam a leitura e a compreensão. Eles também facilitam a manutenção da consistência em várias páginas de um site.
O uso adequado de tags de título pode ajudar a organizar o conteúdo de uma página da Web e melhorar sua legibilidade. Ao dividir o conteúdo em seções com títulos significativos, os usuários podem encontrar rapidamente as informações de que precisam sem serem sobrecarregados por um grande bloco de texto.

Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

Tags HTML <h1> a <h6>

Example:

Example:

Example:

Example:

Uso de tags Hn

Atributos

Global

Evento

Compatibilidade do navegador

CSS predefinido

Importância da Marca HTML Hn

Sentindo entediado?