Tag HTML <dfn>

Discutiremos Tag dfn com exemplos . Neste post, espero que cumpra os requisitos educacionais.

Um termo pode ser marcado com <dfn> :

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p><dfn>Python </dfn>can be used to create a wide variety of different types of things, including websites.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um termo dentro da tag <dfn> pode consistir no seguinte:

1. Assim como o conteúdo do elemento <dfn>:

Example

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p><dfn>Python</dfn> can be used to create a wide variety of different types of things, including websites.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

2. O atributo de título também pode ser adicionado:

Example

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p><dfn title="Programming Language">Python</dfn> can be used to create a huge variety of different types of things, including websites.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

3. Com uma tag <abbr> dentro do elemento <dfn>:

Example

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p><dfn><abbr title="Programming Language">Python</abbr></dfn> can be used to create a vast variety of different types of things, including websites.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p><dfn id="python-def">Python </dfn> can be used to create a huge variety of different types of things, including websites.</p>
<p>This is a paragraph tag used</p>
<p>This is a paragraph tag used.</p>
<p>Learn <a href="#python-def">Python</a> now.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da tag <dfn> com CSS aplicado a ela:

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
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>Definition Example</title>
<style>
/* Style for the definition term */
dfn {
font-style: italic;
position: relative;
cursor: pointer;
}
/* Style for the tooltip */
dfn span{
display: none;
position: absolute;
background-color: #f9f9f9;
color: black;
text-align: center;
padding: 5px;
border-radius: 6px;
}
dfn:hover span{
display: inline;
}
</style>
</head>
<body>
<p>The <dfn><span>A network of computers that are connected to each other and can communicate with each other using a standardized set of protocols, such as TCP/IP.</span>Internet</dfn> is a global network of interconnected computers.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Usos e Definição

Tag dfn OU tag <dfn> indica “elemento de definição”, representa um termo que explicará o conteúdo.

Sempre que um termo é definido ou explicado, <dfn> pai mais próximo também deve incluir a definição.


Compatibilidade do navegador

Elemento
<dfn> Sim Sim Sim Sim Sim

Atributos Globais

Em HTML , a tag <dfn> aceita atributos globais .


Atributos do Evento

Em HTML, o Tag dfn <dfn> também aceita Atributos de Evento .


Configurações padrão de CSS

Tag Dfn <dfn> será exibido pela maioria dos navegadores com estes valores padrão:

dfn {
font-style: italic;
}

Vantagens da tag HTML <dfn>

A tag HTML <dfn> é usada para definir um termo em um documento. Aqui estão algumas vantagens de usar a tag <dfn> :

  • Ao usar a tag <dfn> , você pode definir claramente um termo dentro do documento, tornando mais fácil para os leitores entender o significado do termo dentro do contexto do documento.
  • Quando usada corretamente, a tag <dfn> pode ajudar a aprimorar a acessibilidade de sua página da Web, fornecendo uma hierarquia de informações clara e estruturada. Leitores de tela e outras tecnologias assistivas podem usar essas informações para fornecer uma melhor experiência de usuário para usuários com deficiências.
  • O uso adequado da tag <dfn> pode ajudar a melhorar o SEO de sua página da Web, fornecendo aos mecanismos de pesquisa uma compreensão clara do conteúdo de sua página. Isso pode ajudar a sua classificação de página mais alta nos resultados de pesquisa para palavras-chave relevantes.
  • A tag <dfn> pode ser estilizada e personalizada usando CSS, permitindo que você crie um conteúdo atraente e envolvente em sua página da web. Você pode usar diferentes estilos, fontes e cores para destacar suas definições e chamar a atenção do usuário.
Se este artigo foi informativo o suficiente para ajudá-lo a atender aos seus requisitos 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