Formatar em HTML significa es­tru­tu­rar e definir a aparência de conteúdos de sites, como textos e imagens, por meio de tags HTML. Usando cor­re­ta­mente essas tags, você pode apre­sen­tar seu conteúdo de forma mais clara, legível e atrativo.

O que é for­ma­ta­ção em HTML?

A linguagem de marcação HTML oferece fer­ra­men­tas básicas para es­tru­tu­rar os diversos elementos de um site. Com uma variedade de tags HTML, é possível modificar cada um dos elementos – um processo conhecido como for­ma­ta­çã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 pa­rá­gra­fos e exibir itens em forma de listas.

Por que formatar em HTML?

A for­ma­ta­ção HTML pos­si­bi­lita otimizar tanto a estrutura quanto a apre­sen­ta­ção visual dos diversos elementos de um site. Com a for­ma­ta­ção certa, você não só melhora a le­gi­bi­li­dade dos textos, como também facilita a navegação dos usuários no site. Ao mesmo tempo, formatar em HTML afeta po­si­ti­va­mente a oti­mi­za­ção para motores de busca (SEO), pois um site com­pre­en­sí­vel e bem es­tru­tu­rado é mais fácil de ser lido pelos crawlers (programas que analisam conteúdos de sites) dos bus­ca­do­res.

Formatar em HTML com tags

Na for­ma­ta­ção HTML, há uma diferença entre tags visuais e tags se­mân­ti­cas (physical tags e logical tags):

  • Tags visuais in­flu­en­ciam a aparência de um elemento. Elas definem di­re­ta­mente 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 se­mân­ti­cas de­ter­mi­nam a im­por­tân­cia de um elemento, assim ajudando a formar a estrutura semântica de um site. Elas permitem que me­ca­nis­mos de busca, na­ve­ga­do­res e tec­no­lo­gias as­sis­ti­vas com­pre­en­dam melhor os conteúdos. Um bom exemplo é a tag HTML <em>, que é utilizada para enfatizar um trecho im­por­tante dentro de um texto e, ge­ral­mente, também faz com que as palavras sejam exibidas em itálico.
Hos­pe­da­gem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o de­sem­pe­nho com um clique à medida que o tráfego cresce
  • Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana

Prin­ci­pais tags para formatar em HTML

A linguagem HTML oferece uma vasta gama de tags para formatar conteúdos de sites. As pos­si­bi­li­da­des vão desde a es­tru­tu­ra­ção de layouts de sites inteiros até mo­di­fi­ca­ções em elementos isolados. Nosso artigo sobre tags HTML fornece uma visão geral dos comandos mais im­por­tan­tes. Na tabela a seguir, apre­sen­ta­mos prin­ci­pal­mente as tags uti­li­za­das para formatar texto em HTML on-line, com suas res­pec­ti­vas funções:

Tag HTML Descrição
<b> Esta tag visual faz com que uma palavra, frase ou trecho seja exibido em negrito.
<strong> Esta tag HTML semântica serve para destacar trechos de texto, tanto vi­su­al­mente quanto para os na­ve­ga­do­res.
<i> Com esta tag visual, palavras, frases ou trechos es­pe­cí­fi­cos são exibidos em itálico.
<em> Esta tag semântica é utilizada para enfatizar trechos im­por­tan­tes. Ge­ral­mente, o texto marcado também aparece em itálico no navegador.
<u> Esta tag sublinha o trecho marcado.
<h1> a <h6> Estas tags são usadas para criar títulos. Quanto menor o número, maior é o tamanho do título exibido
<p> Esta tag serve para abrir um novo parágrafo.
<big> Com esta tag, partes do texto podem ser exibidas em tamanho maior do que o normal.
<small> Esta tag é utilizada para reduzir a fonte de um trecho.
<sup> Esta tag permite exibir ca­rac­te­res so­bres­cri­tos (ou seja, em tamanho menor e li­gei­ra­mente acima da linha) – por exemplo, na equação e = mc².
<sub> Esta tag aplica o efeito subscrito. Um exemplo seria a fórmula molecular da água: H2O.
<ins> Esta tag indica que um trecho de texto foi inserido em um documento.
<del> Esta tag indica que um trecho foi excluído de um documento.
<strike> ou <s> Estas tags são uti­li­za­das para aplicar o efeito tachado (ou seja, traçar um risco sobre as letras).
<mark> Com esta tag, podemos aplicar um realce colorido em palavras, frases e trechos de texto.
Construa sua marca com um ótimo domínio
Registre um nome de domínio
  • SSL Wildcard grátis para mais segurança
  • Registro privado grátis para mais pri­va­ci­dade
  • Domain Connect grátis para con­fi­gu­rar DNS fácil

Exemplos de for­ma­ta­ção em HTML

Ao formatar em HTML, você tem inúmeras pos­si­bi­li­da­des para es­tru­tu­rar textos e outros elementos de sites, me­lho­rando sua vi­si­bi­li­dade e aparência. Para apro­vei­tar to­tal­mente o potencial da for­ma­ta­ção HTML, é im­por­tante saber como as diversas tags HTML são uti­li­za­das. Os exemplos de uso a seguir ilustram o fun­ci­o­na­mento 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.

<!DOCTYPE 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>
</body>
</html>
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 me­ca­nis­mos de busca e na­ve­ga­do­res, utilize a tag HTML <strong>. Ela indica a im­por­tân­cia do trecho marcado. Nor­mal­mente, esse trecho também será exibido em negrito.

<!DOCTYPE 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>
</body>
</html>
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 dis­tin­guir termos es­tran­gei­ros durante a leitura. Nesse caso, a tag HTML utilizada é <i>.

<!DOCTYPE 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>
</body>
</html>
html

Resultado:

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

Exemplo de uso 4: Sublinhar trechos de texto

Na­tu­ral­mente, 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>.

<!DOCTYPE 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>
</body>
</html>
html

Resultado:

Imagem: Format HTML: Exemplo de texto sublinhado
Formatar em HTML: Exemplo de texto su­bli­nhado

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 in­for­ma­ções foram cor­ri­gi­das ou estão de­sa­tu­a­li­za­das.

<!DOCTYPE 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>
</body>
</html>
html

Resultado:

Imagem: Format HTML: Exemplo de texto tachado
Formatar em HTML: Exemplo de texto tachado
Ir para o menu principal