Tags HTML para Formatação de Texto
Tags HTML de formatação de texto: tags semânticas como strong e em versus tags apresentacionais como b e i, com exemplos práticos.
HTML oferece um conjunto de elementos inline para formatação de texto. Eles se dividem em dois grupos, e compreender a diferença entre eles é o aspecto mais importante desta página.
- Tags semânticas (lógicas) descrevem o que o texto significa — que uma palavra é importante, enfatizada, um termo definido ou uma abreviação. Exemplos:
<strong>,<em>,<mark>,<abbr>. - Tags apresentacionais (físicas) descrevem como o texto deve parecer — negrito, itálico, sublinhado — sem dizer nada sobre seu significado. Exemplos:
<b>,<i>,<u>,<small>.
Por que essa distinção é importante
Dois elementos podem parecer idênticos no navegador, mas carregar significados muito diferentes:
- Leitores de tela e acessibilidade. Um leitor de tela pode mudar o tom de voz para
<strong>e<em>, sinalizando importância e ênfase a um usuário com deficiência visual. Ele não faz isso para<b>e<i>, que são silenciosos e puramente visuais. - SEO. Mecanismos de busca dão peso à marcação semântica. Envolver uma frase-chave em
<strong>indica aos rastreadores que ela é importante;<b>apenas muda a fonte. - Manutenibilidade. O significado permanece correto quando o CSS é alterado. Se você decidir que textos importantes devem ser vermelhos em vez de negrito,
<strong>ainda significa "importante" e basta reestilizá-lo.
Uma boa regra geral: prefira sempre a tag semântica. Use uma tag apresentacional somente quando quiser explicitamente um efeito visual sem nenhum significado subjacente.
Vamos analisar cada tag de formatação em detalhes.
As Tags <h1>-<h6>
As tags <h1>-<h6> são usadas para definir títulos HTML. Existem 6 níveis de títulos em HTML; o <h1> define o título mais importante e o <h6> o menos importante.
Exemplo das tags HTML <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Resultado
As Tags <b> e <strong>
Ambas renderizam em negrito por padrão, mas têm significados diferentes em HTML5.
- A tag
<strong>é uma tag semântica que marca o texto como tendo grande importância, seriedade ou urgência — conteúdo que o leitor não deve ignorar. - A tag
<b>é uma tag apresentacional que marca o texto como deslocado estilisticamente da prosa ao redor sem transmitir importância extra — por exemplo, o nome de um produto, uma palavra-chave em um índice ou a frase de abertura de um artigo.
Qual usar? Se o negrito existe para sinalizar importância, use <strong>. Se você quer apenas negrito por convenção tipográfica sem significado adicional, use <b> (ou, melhor ainda, estilize o texto com CSS).
Exemplo das tags HTML <b> e <strong>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the <strong> tag to highlight the importance <strong> of this part of the text</strong>.</p>
<p>The <b> tag is a physical tag that stands for <b>bold text</b>.</p>
</body>
</html>As Tags <i> e <em>
Ambas renderizam em itálico por padrão, mas têm significados distintos em HTML5.
- A tag
<em>é uma tag semântica que marca ênfase de entonação — o tipo que muda o significado de uma frase ("Eu adoro HTML" vs. "Eu adoro HTML"). Um leitor de tela pode pronunciá-la com ênfase extra. - A tag
<i>é uma tag apresentacional para texto em uma voz ou modo alternativo: um termo técnico, uma expressão em língua estrangeira, um pensamento, o nome de um navio ou outro conteúdo tradicionamente exibido em itálico — sem implicar ênfase.
Qual usar? Se você está enfatizando uma palavra para que seja lida em voz alta com entonação, use <em>. Para uma convenção tipográfica em itálico sem ênfase, use <i>.
Exemplo das tags HTML <i> e <em>:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph</p>
<p>The important part of the text is defined <em> in italic</em>.</p>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p>
</body>
</html>A Tag <pre>
A tag <pre> é usada para definir texto pré-formatado. Os navegadores renderizam o texto incluído com espaços em branco e quebras de linha.
Exemplo da tag HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>A Tag <mark>
A tag <mark> é usada para apresentar uma parte do texto em um documento como marcada ou destacada para fins de referência.
Exemplo da tag HTML <mark>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
</body>
</html>Resultado
A Tag <small>
A tag <small> reduz o tamanho da fonte do texto em um tamanho menor do que o tamanho de fonte base do documento (de médio para pequeno, ou de muito grande para grande). A tag geralmente contém itens de importância secundária, como avisos de direitos autorais, comentários laterais ou avisos legais.
Exemplo da tag HTML <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>As Tags <del> e <s>
A tag <del> especifica uma parte do texto que foi excluída do documento. Os navegadores exibem esse texto com tachado.
Exemplo da tag HTML <del>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> She likes <del>violets</del> snowdrops․</p>
</body>
</html>A tag <s> marca texto que não é mais preciso ou relevante — por exemplo, um preço antigo ao lado de um preço com desconto. (Observação: <s> não é destinado a exclusões em um documento editado; use <del> para isso.)
Exemplo da tag HTML <s>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><s>I am studying in high school.</s></p>
<p>I am studying in a university.</p>
</body>
</html>O conteúdo de ambas as tags é exibido com tachado. No entanto, apesar da semelhança visual, essas tags não podem substituir uma à outra: <del> significa "removido em uma edição", enquanto <s> significa "não é mais preciso".
As Tags <ins> e <u>
A tag <ins> define texto que foi inserido (adicionado) ao documento, geralmente como contraparte de <del>. O conteúdo é exibido sublinhado por padrão.
Exemplo da tag HTML <ins>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
</body>
</html>Resultado
Em HTML5, a tag <u> representa uma anotação não-textual e não-articulada — texto marcado com um estilo (sublinhado por padrão) que carrega um significado não expresso explicitamente no texto. Usos típicos incluem sinalizar palavras com erros ortográficos ou marcar nomes próprios em texto chinês. Evite <u> para decoração simples, pois os usuários podem confundir o sublinhado com um link; use text-decoration do CSS em vez disso.
Exemplo da tag HTML <u>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Here we used <u>the <u> tag</u>.</p>
</body>
</html>As Tags <sub> e <sup>
A tag <sub> define textos em subscrito. O texto em subscrito fica abaixo da linha de base dos outros símbolos da linha e possui fonte menor. A tag <sup> define o sobrescrito, que é posicionado levemente acima da linha de tipo normal e é relativamente menor que o restante do texto. A linha de base passa pela borda superior ou inferior dos símbolos.
Exemplo das tags HTML <sub> e <sup>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH </p>
<p>E = mc<sup>2</sup>, where E — rest energy, m — mass, c — the speed of light. </p>
</body>
</html>Resultado
A Tag <dfn>
A tag <dfn> marca a instância de definição de um termo — o lugar no texto onde o termo está sendo definido, não todos os lugares onde ele aparece. É uma tag semântica; os navegadores a renderizam em itálico por padrão, mas esse estilo é incidental e pode ser alterado com CSS.
Exemplo 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 language HTML</p>
</body>
</html>Mais Elementos de Texto Semânticos
HTML possui várias outras tags inline que adicionam significado a tipos específicos de texto. Elas não servem para estilização — cada uma descreve o que o texto é:
<abbr>— uma abreviação ou sigla, ex.:<abbr title="HyperText Markup Language">HTML</abbr>. O atributotitlefornece a expansão completa ao passar o mouse.<cite>— o título de uma obra citada (um livro, filme, artigo etc.).<q>— uma citação curta inline; o navegador adiciona aspas automaticamente.<code>— um fragmento de código de computador, exibido em fonte monoespaçada.<kbd>— entrada de teclado que o usuário deve digitar, ex.: Ctrl + C.<samp>— saída de amostra de um programa ou sistema.<var>— uma variável em uma expressão matemática ou contexto de programação.
Exemplo de elementos de texto semânticos:
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is huge.</p>
<p>As stated in <cite>The HTML Handbook</cite>:
<q>Use the right element for the job.</q></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to run <code>document.title</code>.</p>
<p>The program printed <samp>Hello, world!</samp> where <var>x</var> = 5.</p>
</body>
</html>Tags Obsoletas — Não Utilize
Um conjunto de antigas tags de formatação foi removido do padrão HTML. Elas ainda podem renderizar nos navegadores, mas nunca devem ser usadas — substitua a apresentação por CSS e o significado por tags semânticas:
| Tag obsoleta | O que fazia | Use em vez disso |
|---|---|---|
<font> | Definia cor, tamanho, fonte | CSS color, font-size, font-family |
<center> | Centralizava o conteúdo | CSS text-align: center ou margin: auto |
<tt> | Texto em teletipo / monoespaçado | <code>, <kbd>, <samp>, ou CSS font-family: monospace |
<strike> | Texto tachado | <del> / <s>, ou CSS text-decoration: line-through |
<big> | Texto maior | CSS font-size |
Tags Estruturais: <p>, <br> e <hr>
As três próximas tags não são tags de formatação de texto — elas estruturam o fluxo do conteúdo em vez de estilizar palavras inline — mas estão intimamente relacionadas e vale a pena abordá-las aqui.
A tag <p> define o parágrafo. Os navegadores adicionam automaticamente uma margem de 1em antes e depois de cada parágrafo.
Exemplo da tag HTML <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
</body>
</html>A tag <br> insere uma única quebra de linha. Diferente da tag <p>, nenhum recuo vazio é adicionado antes da linha.
Exemplo da tag HTML <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>How to use the <br /> tag</h1>
<p> We can insert the <br /> tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>Em HTML5, a tag <hr> define uma mudança temática entre elementos de nível de parágrafo em uma página HTML. Em versões anteriores do HTML, era usada para desenhar uma linha horizontal na página, separando visualmente o conteúdo. Em HTML5, o elemento possui significado semântico.
Exemplo da tag HTML <hr>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Football</h1>
<p>A team sport involving kicking a ball to score a goal. </p>
<hr />
<h1>Basketball</h1>
<p>A game that is played between two teams of five players.</p>
</body>
</html>