Marca <título> em HTML

Hoje abordaremos o título da tag . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.

A tag <title> em HTML é usada para definir o título de um documento. Essa tag está localizada na seção <head> de um documento HTML e fornece um título para a página da Web que é exibida na barra de título ou guia do navegador.

O texto inserido entre as tags <title> de abertura e fechamento é o que aparece na barra de título ou guia do navegador.

Por exemplo, < title> Sr. Exemplos </title> exibiria “Sr. Exemplos” na barra de título ou guia do navegador.

Dê um título ao seu documento HTML definindo o seguinte:

Example: 

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<h1>Hello and Welcome to Mr Examples</h1>
<p>Here you will learn all about HTML CSS JAVASCRIPT AND PYTHON</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para mostrar o título de uma página, você pode seguir o exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Title</title>
<style>
.main_div{
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="main_div">
<iframe src="File.html" width="1200px" height="420px"></iframe>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de como a tag <title> pode ser usada para definir o título da página e também para exibir conteúdo dinâmico:

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>
<head>
<title>My Personal Website</title>
<style>
#page-title {
display: none;
}
.username:before {
content: attr(data-username);
font-size: 20px;
font-weight: bold;
color: maroon;
}
</style>
</head>
<body>
<h1 id="page-title">Welcome,</h1>
<span class="username" data-username="Mr Examples"></span>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de como você pode aplicar estilos CSS à tag de título:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Mr Examples</title>
<style>
title {
font-size: 18px;
font-weight: bold;
color: maroon;
}
</style>
</head>
<body>
This is Mr.Example HTML Title Tag Article
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Também podemos usar a tag <iframe> para mostrar o título da página html:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Title</title>
<style>
.main_div{
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="main_div">
<iframe src="File.html" width="1200px" height="420px"></iframe>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
IMPORTANTE: Em um documento HTML, só pode haver um elemento <title>
Índice-

Usos do título da tag

A tag title <title> especifica o título do documento.

Os títulos devem estar em formato de texto e são exibidos na barra de título ou guia do navegador.

Os documentos HTML devem incluir uma tag <title>

A otimização do mecanismo de pesquisa (SEO) depende muito do conteúdo do título de uma página. Os algoritmos do mecanismo de pesquisa usam títulos de página para determinar a ordem em que as páginas são exibidas nos resultados da pesquisa.

Um elemento <title> consiste em:

  • Fornece um título para a barra de ferramentas do navegador.
  • Especifique um título ao adicionar uma página aos seus favoritos.
  • Os mecanismos de pesquisa exibem o título da página

Para criar um bom título, siga estas dicas:

  • Em vez de um título de uma ou duas palavras, opte por um título mais longo e descritivo.
  • Recomenda-se manter os títulos com menos de 50 a 60 caracteres porque os mecanismos de pesquisa os exibem dessa forma.
  • Quanto ao título, não liste apenas palavras (isso pode afetar a classificação da página no mecanismo de pesquisa).

Portanto, é imperativo que você escolha um título que seja apropriado e significativo!

Importância do título da tag HTML

A tag <title> em HTML é muito importante por vários motivos:

  • O texto dentro da tag <title> é usado pelos mecanismos de pesquisa para determinar sobre o que é a página e como ela deve ser indexada. Um título claro e descritivo pode ajudar a melhorar a classificação do seu site nos mecanismos de pesquisa.
  • O título de uma página da Web geralmente é a primeira coisa que um usuário vê na guia ou na barra de título do navegador e pode ajudá-lo a identificar rapidamente o conteúdo da página. Um título claro e conciso pode tornar seu site mais amigável e fácil de navegar.
  • Leitores de tela e outras tecnologias assistivas usam a tag <title> para identificar a página para usuários com deficiências. Fornecer um título descritivo e preciso pode melhorar a acessibilidade do seu site.
  • O título do seu site também pode ajudar a estabelecer a identidade da sua marca e torná-lo mais memorável para os usuários.

Atributos

Global

A Tag title <title> lida com os Atributos Globais em HTML.

Compatibilidade do navegador

Elemento
<título> Sim Sim Sim Sim Sim

CSS predefinido

A maioria dos navegadores renderiza a tag <title> da seguinte forma por padrão:

title {
display: none;
}

Benefícios do título da tag HTML

A tag <title> em HTML oferece vários benefícios para um site:

  • A tag de título é usada pelos mecanismos de pesquisa para entender o conteúdo da página e como ela deve ser indexada. Uma tag de título bem elaborada pode melhorar a classificação do seu site nos mecanismos de pesquisa.
  • A tag de título geralmente é a primeira coisa que um usuário vê na guia ou na barra de título do navegador. Um título claro e conciso pode ajudar os usuários a identificar rapidamente o conteúdo da página e melhorar a experiência do usuário.
  • Leitores de tela e outras tecnologias assistivas usam a tag <title> para identificar a página para usuários com deficiências. Fornecer um título descritivo e preciso pode melhorar a acessibilidade do seu site.
  • A tag de título também pode ajudar a estabelecer a identidade da sua marca e tornar seu site mais memorável para os usuários.
  • Quando um usuário marca uma página, a tag de título é normalmente usada como o nome do marcador. Um título descritivo e preciso pode ajudar os usuários a encontrar facilmente a página que procuram em seus favoritos.
Se você achou este artigo informativo, compartilhe essas informações valiosas 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
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.