HTML - Formatação
Se você usa um processador de texto, deve estar familiarizado com a capacidade de colocar o texto em negrito, itálico ou sublinhado; essas são apenas três das dez opções disponíveis para indicar como o texto pode aparecer em HTML e XHTML.
Texto em negrito
Qualquer coisa que apareça dentro <b>...</b> elemento, é exibido em negrito conforme mostrado abaixo -
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto Itálico
Qualquer coisa que apareça dentro <i>...</i> elemento é exibido em itálico conforme mostrado abaixo -
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto Sublinhado
Qualquer coisa que apareça dentro <u>...</u> elemento, é exibido com sublinhado conforme mostrado abaixo -
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Strike Text
Qualquer coisa que apareça dentro <strike>...</strike> elemento é exibido com tachado, que é uma linha fina através do texto, conforme mostrado abaixo -
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Fonte monoespaçada
O conteúdo de um <tt>...</tt>elemento é escrito em fonte monoespaçada. A maioria das fontes são conhecidas como fontes de largura variável porque letras diferentes têm larguras diferentes (por exemplo, a letra 'm' é mais larga do que a letra 'i'). Em uma fonte monoespaçada, no entanto, cada letra tem a mesma largura.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto sobrescrito
O conteúdo de um <sup>...</sup>elemento é escrito em sobrescrito; o tamanho da fonte usado é o mesmo tamanho dos caracteres ao seu redor, mas é exibido a metade da altura de um caractere acima dos outros caracteres.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto Subscrito
O conteúdo de um <sub>...</sub>elemento é escrito em subscrito; o tamanho da fonte usado é o mesmo dos caracteres ao seu redor, mas é exibido a metade da altura de um caractere abaixo dos outros caracteres.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto Inserido
Qualquer coisa que apareça dentro <ins>...</ins> elemento é exibido como texto inserido.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto Excluído
Qualquer coisa que apareça dentro <del>...</del> elemento, é exibido como texto excluído.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto Maior
O conteúdo do <big>...</big> elemento é exibido com um tamanho de fonte maior do que o resto do texto ao seu redor, conforme mostrado abaixo -
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Texto Menor
O conteúdo do <small>...</small> elemento é exibido com um tamanho de fonte menor do que o resto do texto ao seu redor, conforme mostrado abaixo -
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Agrupando Conteúdo
o <div> e <span> os elementos permitem agrupar vários elementos para criar seções ou subseções de uma página.
Por exemplo, você pode querer colocar todas as notas de rodapé em uma página dentro de um elemento <div> para indicar que todos os elementos dentro desse elemento <div> estão relacionados às notas de rodapé. Você pode então anexar um estilo a este elemento <div> para que apareçam usando um conjunto especial de regras de estilo.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
O elemento <span>, por outro lado, pode ser usado para agrupar apenas elementos embutidos. Então, se você tem uma parte de uma frase ou parágrafo que deseja agrupar, você pode usar o elemento <span> como segue.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Isso produzirá o seguinte resultado -
Essas tags são comumente usadas com CSS para permitir que você anexe um estilo a uma seção de uma página.