Tag HTML <dfn>
A tag HTML <dfn> marca a instância definitória de um termo. Saiba como difere de <i>/<em>, com exemplos de title, <abbr> e id.
A tag HTML <dfn> marca a instância definitória de um termo — o lugar no texto onde esse termo está sendo introduzido e explicado. Os navegadores renderizam seu conteúdo em itálico por padrão, mas a tag diz respeito ao significado, não à aparência: ela informa ao navegador, aos motores de busca e às tecnologias assistivas "é aqui que esta palavra é definida."
Por que usar <dfn> em vez de <i> ou <em>?
É tentador recorrer a <i> ou <em> para colocar um termo em itálico, mas essas tags não carregam nenhuma informação sobre o que o texto significa:
<i>é puramente estilístico — texto em itálico sem semântica especial.<em>marca ênfase de entonação (uma mudança na entonação falada), não uma definição.<dfn>é semântica e legível por máquinas: ela identifica explicitamente o termo que está sendo definido. Leitores de tela podem anunciá-la como uma definição, e ferramentas podem construir glossários a partir dela.
Portanto, quando o itálico existe porque um termo está sendo definido pela primeira vez, use <dfn>. Quando você só quer itálico ou ênfase, use <i> ou <em>.
Sintaxe
A tag <dfn> vem em pares — o conteúdo é escrito entre as tags de abertura <dfn> e de fechamento </dfn>.
A tag <p>, o par <dt>/<dd> ou a tag <section> que envolve o elemento atua como o contexto de definição do termo: o termo definido por <dfn> deve ser explicado dentro desse mesmo bloco.
Exemplo básico da tag HTML <dfn>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language) — the standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the HTML language.</p>
</body>
</html>
Como o termo definido é identificado
O navegador decide qual palavra um <dfn> está definindo usando estas regras, em ordem:
- Se
<dfn>tiver um atributotitle, o valor detitleé o termo sendo definido. O texto visível pode ser uma abreviação (frequentemente usando<abbr>). - Se
<dfn>tiver exatamente um filho — um elemento<abbr>com um atributotitle— e<dfn>não tiver outro conteúdo de texto, então otitledo<abbr>é o termo sendo definido. - Caso contrário, o conteúdo de texto visível do
<dfn>é o termo sendo definido.
Exemplo com um atributo title
Aqui o valor de title é tratado como o termo completo sendo definido, enquanto o texto visível permanece curto:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Mouse over to see the definition.</p>
<dfn title="HyperText Markup Language">HTML</dfn>
</body>
</html>O tooltip do title aparece apenas ao passar o mouse, portanto é invisível para usuários de teclado e toque. Nunca coloque informações essenciais somente no title — combine o termo com texto explicativo visível, ou use <abbr> para que a expansão esteja disponível semanticamente.
Exemplo com a tag <abbr>
Combinar <dfn> com <abbr> é um padrão comum e acessível: <dfn> marca a instância definitória, e <abbr> fornece a expansão completa por meio de seu title.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Mouse over to see the definition.</p>
<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
</body>
</html>Vinculando de volta a uma definição com um id
Se você adicionar um id a um <dfn>, pode criar um link para ele de qualquer lugar na página com um elemento <a> usando um fragmento (#). Isso permite que os leitores saltem diretamente para onde um termo é definido:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
<dfn id="ajax-def">AJAX</dfn> is a technique for updating parts of a
web page without reloading the whole page.
</p>
<p>Later on, we mention <a href="#ajax-def">AJAX</a> again — click the
link to jump back to its definition.</p>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| title | text | Fornece a definição completa ou forma expandida do termo. Quando presente, substitui o termo padrão e é exibido como tooltip ao passar o mouse. |
A tag <dfn> também suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <dfn>
dfn {
color: #0056b3;
font-weight: bold;
}