Texto faz parte da essência da web. Um dos primeiros objetivos da internet, antes de ser mundial, era justamente a transmissão de documentos acadêmicos entre universidades. Muito mudou desde lá, mas em termos de HTML, temos praticamente as mesmas tags há mais de uma década.

Principais Tags de Texto

Nesta parte da lição veremos as tags mais utilizadas para marcar texto. Irei demonstrá-las aqui mesmo, nesta página, já aproveitando o texto da explicação.

Esta é uma tag p (paragraph ou parágrafo). Serve para, justamente, estruturar texto em forma de parágrafos, portanto é extremamente útil para texto corrido como artigos e posts. Escrevendo o texto desta forma ele irá fluir naturalmente até o final da página ou do seu container.

Para forçar uma quebra de linha, utiliza-se o elemento br (line break ou quebra de linha)
como foi feito agora.

É possível dar ênfase ao texto (tag em) ou dar forte ênfase (tag strong) que, respectivamente, são representados no navegador como itálico e negrito (porém é possível alterar a sua aparência com CSS).

Outras tags importantes são os títulos, ou headings, que possuem um nível que pode ir do 1 ao 6 (tags h1 a h6). Estas tags servem para dar uma hierarquia de informação a uma página:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Outras tags que já vimos são as de lista: ul, para lista não ordenada (unordered list), e ol, para lista ordenada (ordered list), cada uma com seus respectivos itens entre tags li (list item ou item de lista):

• Item 1
• Item 2
• Item 3

1. Item 1
2. Item 2
3. Item 3

Também podemos fazer um link com a tag a (anchor ou âncora). Esta tag não serve apenas para texto, pode também ser utilizada para imagens. O atributo href (hiper referência) indica o destino do link.

Código HTML das tags abordadas acima:

<!-- parágrafo -->
<p>Este é um parágrafo.</p>

<!--quebra de linha-->
<p>Este é um texto com uma<br>quebra forçada de linha.</p>

<!--ênfase e destaque-->
<p>Texto em <em>ênfase</em> e texto com <strong>forte ênfase</strong>.</p>

<!--títulos-->
<h1>Heading nível 1</h1>
<h2>Heading nível 2</h2>
<h3>Heading nível 3</h3>
<h4>Heading nível 4</h4>
<h5>Heading nível 5</h5>
<h6>Heading nível 6</h6>

<!--links-->
<a href="#">Exemplo de link relativo (a cerquilha "#" faz com que o link vá para o topo da página)</a>

<!--listas-->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Entidades HTML

Quando precisamos escrever símbolos como >, < e ©, utilizamos entidades HTML para isto. Uma entidade começa com "&" e termina com ";", exemplos:

• Para escrever >, no código escrevemos > (gt significa greater than ou "maior que")
• Para escrever <, no código escrevemos < (less than ou "menor que")
• Para escrever &, no código escrevemos & (ampersand, o "'e' comercial")