# Format HTML: O que é e como funciona a formatação HTML

Formatar em HTML significa estruturar e definir a aparência de conteúdos de sites, como textos e imagens, por meio de tags HTML. Usando corretamente essas tags, você pode apresentar seu conteúdo de forma mais clara, legível e atrativo.

## O que é formatação em HTML?

A linguagem de marcação HTML oferece ferramentas básicas para **estruturar os diversos elementos de um site**. Com uma variedade de tags HTML, é possível modificar cada um dos elementos – um processo conhecido como formatação HTML. Assim, você pode definir como os textos, imagens e outros conteúdos serão exibidos para o usuário no documento HTML final. As tags permitem, por exemplo, criar títulos, dividir o texto em parágrafos e exibir itens em forma de listas.

## Por que formatar em HTML?

A formatação HTML possibilita otimizar tanto a estrutura quanto a apresentação visual dos diversos elementos de um site. Com a formatação certa, você não só **melhora a legibilidade dos textos**, como também facilita a navegação dos usuários no site. Ao mesmo tempo, formatar em HTML afeta positivamente a [otimização para motores de busca](https://www.ionos.com/pt-br/digitalguide/marketing-online/marketing-em-buscadores/fundamentos-de-seo/ "Princípios básicos de otimização para motores de busca") (SEO), pois um **site compreensível e bem estruturado** é mais fácil de ser lido pelos *crawlers* (programas que analisam conteúdos de sites) dos buscadores.

Dica Acesse o nosso tutorial HTML para iniciantes. Ele apresenta as principais informações sobre a linguagem de marcação HTML.

## Formatar em HTML com tags

Na formatação HTML, há uma diferença entre tags visuais e tags semânticas (*physical tags* e *logical tags*):

- **Tags visuais** influenciam a aparência de um elemento. Elas definem diretamente como textos e outros elementos serão exibidos na página. Por exemplo, a tag `<b>` deixa um texto em negrito, enquanto a tag `<i>` aplica o efeito de itálico. No entanto, as tags HTML visuais não se referem ao contexto semântico.
- **Tags semânticas** determinam a importância de um elemento, assim ajudando a formar a estrutura semântica de um site. Elas permitem que mecanismos de busca, navegadores e tecnologias assistivas compreendam melhor os conteúdos. Um bom exemplo é a tag HTML `<em>`, que é utilizada para enfatizar um trecho importante dentro de um texto e, geralmente, também faz com que as palavras sejam exibidas em itálico.

## Principais tags para formatar em HTML

A linguagem HTML oferece uma vasta gama de tags para formatar conteúdos de sites. As possibilidades vão desde a estruturação de layouts de sites inteiros até modificações em elementos isolados. Nosso artigo sobre tags HTML fornece uma visão geral dos comandos mais importantes. Na tabela a seguir, apresentamos principalmente as tags utilizadas para formatar texto em HTML on-line, com suas respectivas funções:

<table>
  <thead>
    <tr>
      <th>Tag HTML</th>
      <th>Descrição</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`<b>`</td>
      <td>Esta tag visual faz com que uma palavra, frase ou trecho seja exibido em negrito.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<strong>`</td>
      <td>Esta tag HTML semântica serve para destacar trechos de texto, tanto visualmente quanto para os navegadores.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<i>`</td>
      <td>Com esta tag visual, palavras, frases ou trechos específicos são exibidos em itálico.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<em>`</td>
      <td>Esta tag semântica é utilizada para enfatizar trechos importantes. Geralmente, o texto marcado também aparece em itálico no navegador.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<u>`</td>
      <td>Esta tag sublinha o trecho marcado.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<h1>` a `<h6>`</td>
      <td>Estas tags são usadas para criar títulos. Quanto menor o número, maior é o tamanho do título exibido</td>
      <td></td>
    </tr>
    <tr>
      <td>`<p>`</td>
      <td>Esta tag serve para abrir um novo parágrafo.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<big>`</td>
      <td>Com esta tag, partes do texto podem ser exibidas em tamanho maior do que o normal.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<small>`</td>
      <td>Esta tag é utilizada para reduzir a fonte de um trecho.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<sup>`</td>
      <td>Esta tag permite exibir caracteres sobrescritos (ou seja, em tamanho menor e ligeiramente acima da linha) – por exemplo, na equação e = mc².</td>
      <td></td>
    </tr>
    <tr>
      <td>`<sub>`</td>
      <td>Esta tag aplica o efeito subscrito. Um exemplo seria a fórmula molecular da água: H2O.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<ins>`</td>
      <td>Esta tag indica que um trecho de texto foi inserido em um documento.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<del>`</td>
      <td>Esta tag indica que um trecho foi excluído de um documento.</td>
      <td></td>
    </tr>
    <tr>
      <td>`<strike>` ou `<s>`</td>
      <td>Estas tags são utilizadas para aplicar o efeito tachado (ou seja, traçar um risco sobre as letras).</td>
      <td></td>
    </tr>
    <tr>
      <td>`<mark>`</td>
      <td>Com esta tag, podemos aplicar um realce colorido em palavras, frases e trechos de texto.</td>
      <td></td>
    </tr>
  </tbody>
</table>

## Exemplos de formatação em HTML

Ao formatar em HTML, você tem inúmeras possibilidades para estruturar textos e outros elementos de sites, melhorando sua visibilidade e aparência. Para aproveitar totalmente o potencial da formatação HTML, é importante saber como as diversas tags HTML são utilizadas. Os exemplos de uso a seguir ilustram o funcionamento básico de algumas delas:

### Exemplo de uso 1: Exibir texto em negrito

Para fazer com que uma palavra ou um trecho seja exibido em negrito, use a tag HTML `<b>`. Sendo uma tag visual, ela modifica somente a aparência do texto marcado.

```html

<html>
<head>
    <title>Exemplo de uso para texto em negrito</title>
</head>
<body>
    <p>Usando a tag certa, você deixa seu <b>texto em negrito</b>.</p>
<div class="hash d-none" hidden>hash_5e9e31ad54ba0e9831789981ea5149298a077146</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

Usando a tag certa, você deixa seu **texto em negrito**.

### Exemplo de uso 2: Destacar partes do texto

Se você deseja dar destaque a um trecho de texto, tanto para os leitores quanto para os mecanismos de busca e navegadores, utilize a tag HTML `<strong>`. Ela indica a importância do trecho marcado. Normalmente, esse trecho também será exibido em negrito.

```html

<html>
<head>
    <title>Exemplo de uso para destacar trechos de texto</title>
</head>
<body>
    <p>A última palavra da frase é <strong>destacada</strong>.</p>
<div class="hash d-none" hidden>hash_5e9e31ad54ba0e9831789981ea5149298a077146</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

A última palavra da frase é **destacada**.

### Exemplo de uso 3: Exibir palavras e trechos em itálico

É comum grafar palavras em itálico, por exemplo, para distinguir termos estrangeiros durante a leitura. Nesse caso, a tag HTML utilizada é `<i>`.

```html

<html>
<head>
    <title>Exemplo de uso para texto em itálico</title>
</head>
<body>
    <p>A palavra a seguir será exibida em <i>itálico</i>.</p>
<div class="hash d-none" hidden>hash_5e9e31ad54ba0e9831789981ea5149298a077146</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

A palavra a seguir será exibida em *itálico*.

### Exemplo de uso 4: Sublinhar trechos de texto

Naturalmente, ao formatar texto em HTML on-line, também é possível sublinhar palavras ou trechos inteiros – ou seja, grifá-los com uma linha embaixo das letras. Para isso, usamos a tag `<u>`.

```html

<html>
<head>
    <title>Exemplo de uso para texto sublinhado</title>
</head>
<body>
    <p>Em diversas situações, é bom <u>sublinhar</u> uma palavra importante.</p>
<div class="hash d-none" hidden>hash_5e9e31ad54ba0e9831789981ea5149298a077146</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

[![Imagem: Format HTML: Exemplo de texto sublinhado](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/9/c/csm_sublinhar-em-html_d7a29c231f.webp "Format HTML: Exemplo de texto sublinhado")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/sublinhar-em-html.png) Formatar em HTML: Exemplo de texto sublinhado ### Exemplo de uso 5: Tachar palavras

Com as tags `<strike>` ou `<s>`, você pode tachar (riscar) uma ou mais palavras. Essa tag HTML pode ser utilizada, por exemplo, para indicar que certas informações foram corrigidas ou estão desatualizadas.

```html

<html>
<head>
    <title>Exemplo de uso para trecho tachado</title>
</head>
<body>
    <p>Esta oferta é válida até <s>1º de novembro</s> 1º de dezembro.</p>
<div class="hash d-none" hidden>hash_5e9e31ad54ba0e9831789981ea5149298a077146</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Resultado**:

[![Imagem: Format HTML: Exemplo de texto tachado](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/2/5/csm_tachar-em-html_c9a82a96e8.webp "Format HTML: Exemplo de texto tachado")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/tachar-em-html.png) Formatar em HTML: Exemplo de texto tachado


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/format-html-formatar-em-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/format-html-formatar-em-html/) for AI/LLM consumption.