Quando você adiciona texto ao código HTML de uma página da Web, digamos em um elemento de parágrafo, você tem pouco ou nenhum controle sobre onde essas linhas de texto serão quebradas ou o espaçamento que será usado. Isso ocorre porque o navegador da web fluirá o texto conforme necessário com base na área que o contém. Isso inclui sites responsivos que terão um layout muito fluido que muda de acordo com o tamanho da tela que está sendo usada para visualizar a página. O texto HTML quebrará uma linha onde for necessário, uma vez que atingiu o final de sua área contida. No final, o navegador desempenha um papel mais importante em determinar como o texto é quebrado do que você. Em termos de adição de espaçamento para criar um determinado formato ou layout, o HTML não reconhece o espaçamento adicionado ao código, incluindo barra de espaço, tabulação ou retorno de carro. Se você colocar vinte espaços entre uma palavra e a palavra que vem depois dela, o navegador renderizará apenas um único espaço ali. Isso é conhecido como colapso do espaço em branco e, na verdade, é um dos conceitos de HTML que muitos novos no setor enfrentam no início. Eles esperam que o espaço em branco do HTML funcione da maneira que funciona em um programa como o Microsoft Word, mas não é assim que o espaço em branco do HTML funciona. Na maioria dos casos, o manuseio normal de texto em qualquer documento HTML é exatamente o que você precisa, mas em outros casos, você pode realmente querer mais controle sobre exatamente como o texto é espaçado e onde quebra as linhas. Isso é conhecido como texto pré-formatado (em outras palavras, você dita o formato). Você pode adicionar texto pré-formatado às suas páginas da web usando o HTML
type = “código”>
Usando a tag
Muitos anos atrás, era comum ver páginas da web com blocos de texto pré-formatado. Usar a tag
para definir seções da página conforme formatadas pela própria digitação foi uma maneira rápida e fácil para os designers da web fazerem com que o texto fosse exibido da maneira que desejavam. Isso foi antes do surgimento do CSS para layout, quando os web designers estavam realmente presos tentando forçar o layout usando tabelas e outros métodos somente HTML. Isso (meio) funcionou porque o texto pré-formatado é definido como um texto no qual a estrutura é definida por convenções tipográficas ao invés de renderização HTML. Hoje, essa tag não é muito usada porque CSS nos permite ditar estilos visuais de maneira muito mais eficiente do que tentar forçar a aparência em nosso HTML e porque os padrões da Web ditam uma separação clara de estrutura (HTML) e estilos (CSS). Ainda assim, pode haver casos em que o texto pré-formatado faça sentido, como para um endereço de correspondência onde você deseja forçar as quebras de linha ou para exemplos de poesia em que as quebras de linha são essenciais para a leitura e o fluxo geral do conteúdo. Aqui está uma maneira de usar a tag HTML
: HTML típico reduz o espaço em branco no documento. Isso significa que os retornos de carro, espaços e caracteres de tabulação usados neste texto seriam todos recolhidos em um espaço. Se você digitou a citação acima em uma tag HTML típica como a tag p (parágrafo), você terminaria com uma linha de texto, como esta: Twas brillig e os toves slithey Giraram e gimble no wabe A tag pre deixa o caracteres de espaço em branco como estão. Portanto, quebras de linha, espaços e tabulações são mantidos na renderização desse conteúdo pelo navegador. Colocar a citação dentro de uma tag
para esse mesmo texto resultaria nesta exibição: Twas brillig e os slithey toves
Girou e gimble
dentro
a
aspirante a
Sobre fontes
A tag
faz mais do que apenas manter os espaços e quebras para o texto que você escreve. Na maioria dos navegadores, ele é escrito em uma fonte monoespaçada. Isso torna os caracteres no texto todos iguais em largura. Em outras palavras, a letra i ocupa tanto espaço quanto a letra w. Se você preferir usar outra fonte no lugar da fonte monoespaçada padrão que o navegador exibe, você ainda pode alterar isso com folhas de estilo e selecionar qualquer outra fonte na qual gostaria que o texto fosse renderizado.
HTML5
Uma coisa a se ter em mente é que, em HTML5, o atributo “largura” não é mais compatível com o elemento
. No HTML 4.01, a largura especificava o número de caracteres que uma linha conteria, mas foi eliminado no HTML5 e posteriores.
