Estilização
Como estilizar o texto HTML?
Você pode utilizar diversas tags para estilizar o texto, como <i> para itálico e <b> para negrito. Abaixo, apresentamos uma tabela com as principais tags de estilização, exemplos de uso e seus respectivos resultados.
| Tag | Exemplo | Resultado |
|---|---|---|
<i> ou <em> | Texto em <i>itálico</i> | Texto em itálico |
<b> ou <strong> | Texto em <b>negrito</b> | Texto em negrito |
<u> ou <ins> | Texto <u>sublinhado</u> | Texto sublinhado |
<s> ou <del> | Texto <s>riscado</s> | Texto |
<mark> | Texto <mark>marcado</mark> | Texto marcado |
<small> | Texto <small>pequeno</small> | Texto pequeno |
<code> | Trecho de <code>código</code> | Trecho de código |
<var> | Trecho de <var>código</var> | Trecho de código |
<sup> | x<sup>2</sup> + y<sup>3</sup> | x2 + y3 |
<sub> | H<sub>2</sub>O | H2O |
A importância da semântica
A semântica no HTML refere-se ao uso de tags com significados claros que ajudam a descrever o conteúdo de forma mais eficiente. Isso melhora a acessibilidade, tornando o conteúdo mais compreensível para leitores de tela, e facilita o trabalho de motores de busca, como o Google, na indexação do site.
- Acessibilidade: Tags semânticas permitem que tecnologias assistivas, como leitores de tela, interpretem e apresentem o conteúdo de maneira adequada para usuários com deficiência.
- SEO (Search Engine Optimization): Motores de busca utilizam a semântica para entender a hierarquia e o contexto do conteúdo, melhorando o ranqueamento nos resultados de pesquisa.
- Manutenção e colaboração: Códigos semanticamente organizados são mais fáceis de entender, modificar e manter, especialmente em projetos colaborativos.
Elementos estéticos:
Elementos puramente estéticos, como <i>, <b>, <u>, e <s>, são usados para alterar apenas a aparência do texto sem transmitir significado adicional. Por exemplo, <i> coloca o texto em itálico, e <b> aplica negrito. Esses elementos são úteis para estilização visual, mas seu uso é desencorajado em situações onde a semântica é importante, pois não fornecem contexto ou relevância para leitores de tela ou buscadores.
Elementos com semântica:
Já os elementos semânticos, como <em>, <strong>, <ins>, e <del>, têm a função de indicar o significado e a importância do texto. Por exemplo, <em> adiciona ênfase ao texto, enquanto <strong> indica maior relevância. Esses elementos não apenas afetam o estilo visual, mas também possuem significado interpretado por leitores de tela e motores de busca. Usar elementos semânticos é crucial para garantir acessibilidade e clareza no conteúdo.
Recomenda-se sempre priorizar o uso de elementos semânticos quando possível, substituindo elementos estéticos para melhorar a acessibilidade, o SEO e a clareza do código HTML.
Origem dos termos:
| Termo | Origem | Tradução |
|---|---|---|
<i> | Italic | Itálico |
<b> | Bold | Negrito |
<u> | Underline | Sublinhado |
<s> | Strikethrough | Riscado |
<em> | Emphasis | Ênfase |
<strong> | Strong | Forte |
<ins> | Inserted | Inserido |
<del> | Deleted | Deletado |
<mark> | Mark | Marcado |
<small> | Small | Pequeno |
<code> | Code | Código |
<var> | Variable | Variável |
<sup> | Superscript | Sobrescrito |
<sub> | Subscript | Subscrito |