Neste tutorial, você aprenderá como formatar texto em páginas da Web usando tags HTML.
Formatar texto usando HTML
O HTML fornece várias tags que você pode usar para fazer com que algum texto em uma página da Web pareça diferente do texto normal, por exemplo, você pode usar a tag <b> para tornar o texto em negrito e a tag <i> para fazer o texto parecer diferente Itálico , a tag <mark> torna o texto em itálico para destacar o texto, a tag <code> mostra uma parte do código de computador, as tags <ins> e <del> marcam inserções e exclusões editoriais e assim por diante.
Os exemplos a seguir demonstram as tags de formatação mais usadas. Agora, vamos tentar entender como essas tags funcionam basicamente:
<p>Este é <b>texto em negrito</b>.</p>
<p>Este é um <strong>texto muito importante</strong>.</p>
<p>Este é <i>texto em itálico</i>.</p>
<p>Este é <em>texto enfatizado</em>.</p>
<p>Este é <mark>texto destacado</mark>.</p>
<p>Este é <code>código de computador</code>.</p>
<p>Este é um <small>texto menor</small>.</p>
<p>Este é o texto <sub>subscrito</sub> e <sup>sobrescrito</sup>.</p>
<p>Este é <del>texto excluído</del>.</p>
<p>Este é <ins>texto inserido</ins>.</p>Por padrão, as tags <strong> geralmente são renderizadas como <b> nos navegadores, enquanto as tags <em> são renderizadas como <i>. No entanto, esses rótulos têm significados diferentes.
Diferença entre as tags <strong> e <b>
As tags <strong> e <b> tornam o texto contido em negrito por padrão, mas a tag <strong> indica que seu conteúdo é importante, enquanto a tag <b> existe apenas para chamar a atenção do leitor, não para transmitir isso nada de especial importante.
<p><strong>AVISO!</strong> Prossiga com cuidado.</p>
<p>O show será realizado no <b>Hyde Park</b> em Londres.</p>Diferença entre as tags <em> e <i>
Da mesma forma, as tags <em> e <i> renderizam o texto contido em itálico por padrão, mas a tag <em> significa que seu conteúdo é enfatizado em comparação com o texto ao redor e a tag <i> é usada para marcar o texto que é separado do texto normal por motivos de legibilidade , como um termo técnico, uma frase idiomática de outro idioma, um pensamento etc.
<p>Os gatos são animais <em>fofos</em>.</p>
<p>O <i>João</i> partiu ontem à noite.</p>Observação: use as tags <em> e <strong> quando o conteúdo da página exigir que determinadas palavras ou frases tenham forte ênfase ou importância. Além disso, em HTML5, as tags <b> e <i> foram redefinidas antes de não terem semântica.
Formato de citação
Você pode formatar facilmente blocos de citação de outras fontes usando a tag HTML <blockquote>.
As citações em bloco geralmente são mostradas com as margens esquerda e direita recuadas, com algum espaço extra acima e abaixo. Vamos tentar um exemplo para ver como funciona:
<blockquote>
<p>Aprenda com o ontem, viva o hoje, espere pelo amanhã. O importante é não parar de questionar.</p>
<cite>— Albert Einstein</cite>
</blockquote>Dica: tags cite são usadas para descrever citações de trabalhos criativos. Deve incluir o título do trabalho ou o nome do autor (pessoa ou organização) ou referência de URL.
Para citações curtas, você pode usar a tag <q>HTML. A maioria dos navegadores exibe aspas em linha ao redor do texto entre aspas. Aqui está um exemplo:
<p>De acordo com a Organização Mundial da Saúde (OMS): <q>Saúde é um estado de completo bem-estar físico, mental e social.</q></p>Mostrar abreviações
As abreviaturas são formas abreviadas de palavras, frases ou nomes.
Você pode usar a tag <abbr> para abreviações. Use o atributo title nesta tag para fornecer uma extensão completa da abreviação, que o navegador exibe como uma dica de ferramenta quando o cursor do mouse passa sobre o elemento. Vamos tentar um exemplo:
<p>O <abbr title="World Wide Web Consortium">W3C</abbr> é a principal organização internacional de padrões para a <abbr title="World Wide Web">WWW ou W3</abbr>. Foi fundada por Tim Berners-Lee.</p>Leia também: HTML: guia sobre links
Marcar um endereço de contato
As páginas da Web geralmente incluem endereços de rua ou postais. HTML fornece uma tag especial para representar informações de contato (físicas e/ou digitais) de uma pessoa, pessoa ou organização.
Idealmente, essa tag deve ser usada para exibir informações de contato relacionadas ao próprio documento, como o autor do artigo. A maioria dos navegadores exibe blocos de endereço em itálico. Aqui está um exemplo:
<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>Leia também: HTML: guia sobre links
