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 (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.
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.
- Fique online com 99,99% de tempo de atividade e segurança robusta
- Aumente o desempenho 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
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:
| 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 visualmente quanto para os navegadores. | |
<i>
|
Com esta tag visual, palavras, frases ou trechos específicos são exibidos em itálico. | |
<em>
|
Esta tag semântica é utilizada para enfatizar trechos importantes. Geralmente, 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 caracteres sobrescritos (ou seja, em tamanho menor e ligeiramente 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 utilizadas 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. |
- SSL Wildcard grátis para mais segurança
- Registro privado grátis para mais privacidade
- Domain Connect grátis para configurar DNS fácil
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.
<!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>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.
<!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>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>.
<!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>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>.
<!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>Resultado:
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.
<!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>Resultado:
