FORMATAÇÃO DE

TEXTOS

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 1 de 13

M01C08

FORMATAÇÃO DE
TEXTOS

Eu já consigo sen-r que estamos evoluindo na

HTML, você não? Agora nossos documentos
começam a tomar uma organização maior com
os Atulos e parágrafos, mas às vezes precisamos
de algo a mais. Vamos ver algumas formatações
i m p o r ta nte s e q u e u s a re m o s q u a n d o
começarmos a produzir nossos conteúdos. Não
se esqueça de manter tudo anotado, pois
veremos muitas tags novas.

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 2 de 13

Você já ouviu falar de semântica?
Tá aí mais uma palavra bonita pra gente aprender: “semântica”. Se você nunca
ouviu falar nela, provavelmente não está entendendo direito, mas saiba que a maior
mudança da HTML4 para a HTML5 é o acréscimo da semântica aos elementos.

Vamos procurar no dicionário, e vou fazer isso no Michaelis, que tem

uma versão online e gratuita. Segundo o pai-dos-burros:

“Semântica é o significado dos

vocábulos, por oposição à sua
forma.”
Analisando a frase acima percebemos que uma palavra pode ter
forma e significado, e que a semântica dá mais valor ao significado.

Na HTML4, tínhamos tags como <b> que colocava um texto em negrito, <u> que
colocava o termo sublinhado e <blink> que fazia o texto piscar. Essas eram tags que
representavam apenas uma forma. Você dizia que queria um texto sublinhado, mas
qual era o motivo? Qual era o sentido de sublinhar alguma coisa? Vamos ver um
exemplo:

Juvenal era um sujeito de muita sorte. E já

começou de pequeno, onde morou na <u>Rua Marquês
de Lira Filho</u>, um local de fácil acesso ao
Centro da cidade.

Em HTML4, colocamos o par de tags <u> e </u> para delimitar o termo Rua Marquês
de Lira Filho. Isso seria uma maneira de determinar somente um formato visual para
chamar atenção para o endereço onde o cara nasceu. O sublinhado é apenas uma
forma, sem significado explícito. Sublinhamos só pra chamar atenção visualmente.

Já a HTML5 chegou com o conceito de valorizar a semântica, logo suas tags tentam
levar um significado embutido muito forte. Logo, a frase acima ficaria assim:

Juvenal era um sujeito de muita sorte. E já

começou de pequeno onde morou na <address>Rua
Marquês de Lira Filho</address>, um local de
fácil acesso ao Centro da cidade.

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 3 de 13

Note que agora, usamos a tag <address> para dar um significado ao destaque que
fizemos. Estamos chamando atenção para Rua Marquês de Lira Filho por se tratar do
endereço da pessoa. No caso, um navegador de celular pode até sugerir que você veja
o mapa do local e trace a rota para chegar lá. Viu? SIGNIFICADO!

Sendo assim, em HTML5, vemos de forma bastante evidente a presença do chamado

HTML semântico ou tags semânticas ou ainda o conteúdo semântico. Você quer
que um endereço apareça na forma de um texto sublinhado? Use CSS para configurar
isso, a HTML serve para dar sentido ao conteúdo. É assim que tudo vai funcionar.

Desde a mudança de versões, a W3C - consórcio responsável por normatizar a HTML

- tem dado muito valor por adicionar novas tags que tenham mais significado e a tirar
algumas tags que só se focam no efeito visual (forma) de apresentação. O intuito é
deixar a apresentação gráfica por conta das CSS.

Tags morrem, você sabia?

Existem tags que ainda funcionam hoje em dia, mas estão prestes a
serem consideradas obsoletas, como as tags <font> e <center>. E
existem outras que simplesmente foram excluídas das versões mais
atuais da HTML5, como é o caso do <applet> e <blink>.

Isso acontece porque a linguagem evolui, e nesse processo algumas tags

param de fazer sentido pois existem outras bem melhores e que fazem
mais sentido.

Sendo assim, a própria W3C sugere que no lugar de <b>, que significa bold ou
negrito e que seria simplesmente uma forma de apresentar um dado, passemos a
usar a tag <strong>, que tem um significado de força ou potência dentro da frase.

FIQUE SEMPRE DE OLHO: Existe um documento oficial do

C o n s ó r c i o d a Wo r l d W i d e We b ( W 3 C ) q u e é a t u a l i z a d o
constantemente com as tags que estão ficando obsoletas e algumas
substituição desejáveis que devemos fazer.

https://www.w3.org/TR/html5-
Diferenças entre HTML4 e 5:
diff/#absent-attributes

https://dev.w3.org/html5/
Elementos obsoletos na HTML5:
pf-summary/obsolete.html

Sendo assim, se você está aprendendo HTML com o uso das tags <font>, <big>,
<center>, <srtike> e muitas outras, pode mandar esses links OFICIAIS que estão
aí em cima para quem está te ensinando desse jeito. Talvez essa pessoa nem saiba
ainda que deverá atualizar seus materiais o quanto antes.

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 4 de 13

Antes de começar, fique de olho
nos exercícios
Como você já deve saber, esse material é para ser consumido
juntamente com os demais conteúdos disponibilizados no nosso
repositório público do Curso de HTML+CSS, disponível em
https://gustavoguanabara.github.io. Pois abra o
código disponível dos exercícios resolvidos e analise os códigos dos
exercícios ex007 e ex008. Abra também o link onde você pode
executar os exercícios e rode esses mesmos exemplos 007 e 008. As
coisas vão ficar muito claras pra você daqui pra frente, eu garanto!

Negrito e Itálico
Vamos ver agora algumas formatações bem usadas das últimas versões da
linguagem, começando pelos famosos negrito e itálico.

Como vimos anteriormente, existem as tags <b> e <i> para essa tarefa, mas elas não
possuem significado e focam apenas na forma, sendo assim, são pouco semânticos.
Sendo assim, recomendamos que você passe a usar as tags <strong> e <em> para
realizar essas mesmas formatações visuais, só que agora com sentido.

A tag <strong> significa que o termo delimitado possui força dentro da frase. Logo,
ele aparecerá em negrito.

Já a tag <em> significa que queremos dar ênfase (do Inglês emphasis) ao termo.
Logo, ele aparecerá em itálico.

Note que, ao usar <strong> e <em> no lugar de <b> e <i>, damos mais significado aos
nossos termos e conteúdos. Como eles vão ser representados visualmente (forma),
vai depender das nossas folhas de estilo CSS.

Você sabe usar marca

texto?
Provavelmente você já viu ou usou uma dessas canetas marca texto em
seu dia-a-dia. Elas servem para você marcar uma parte do texto na qual
você quer dar uma ênfase descomunal, já que se trata de um trecho muito
valioso para você, assim como acabamos de fazer.

Para fazer essas marcas em HTML5, usamos a tag <mark>…</mark> para

delimitar o texto que queremos demarcar, como se estivéssemos usando uma
caneta marcador.

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 5 de 13

 COMO FAÇO PARA MUDAR A COR DA CANETA? Com certeza
você já deve estar se perguntando como usar outras cores. Pois saiba
que isso é totalmente possível, contanto que as configurações sejam
especificadas nas folhas de estilo CSS.

<big> morreu, mas o <small> ainda

sobrevive
Tem certas coisas que simplesmente não são fáceis de entender. A
tag <big> (que deixava o texto maior) está depreciada pela HTML5,
mas a tag <small> (que deixa o texto menor> segue firme e forte
na vida da linguagem.

E não adianta ficar me olhando com essa cara de reprovação. Eu não tenho culpa
nenhuma por conta dessa decisão, sou apenas um mero professor que se foca em
mostrar os fatos, não em fazê-los ter um sentido claro. Tem certas coisas que a gente
não questiona, só aceita que dói menos.

Texto deletado
Antigamente existia a tag <strike>, que hoje também está depreciada pela última
versão da HTML. No lugar dela entrou a tag <del>, que significa que o texto está ali,
pode até ser lido, mas deve ser desconsiderado pelo leitor. Exatamente como eu
acabei de fazer.

Texto inserido
O texto inserido é o exato oposto do texto deletado que vimos anteriormente. Nesse
caso, se colocarmos um texto qualquer dentro de <ins> e </ins>, estamos dizendo
que o texto está ali, deve ser lido e você deve prestar atenção nele. É o que fazíamos
anteriormente ao utilizar a tag <u> para sublinhar um texto.

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 6 de 13

Textos sobrescrito e subscrito
Quantas vezes você tentou escrever um x2 ou um H2O em
um documento e ficou na dúvida de como fazer pra esses
números ficarem pequeninos ali em cima ou embaixo. Pois
a HTML tem as tags <sub> e <sup> justamente para essa
finalidade. Ao analisar os exemplos de código que apontei
no início desse documento, você vai perceber melhor a
diferença entre eles.

Trechos de código
Nós somos (ou seremos) programadores, e por isso compartilhamos muito código-
fonte em diversas linguagens. Para isso, existe a tag <code> da HTML onde você pode
delimitar seu código. A principal vantagem no uso dessa tag é a o valor semântico que
ela representa, indicando ao navegador que se trata de um código de computador.
Porém, existe também um efeito visual, pois as letras ficam no modo mono-espaçadas
(monospace), o que facilita bastante a leitura do código. Analise, por exemplo, o
trecho de código a seguir:

Você pode achar que o código vai

aparecer lindamente no seu site,
porém o que acontece é simplesmente
uma mudança das letras, para que
elas fiquem mono-espaçadas (veja a
imagem).

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 7 de 13

Para resolver esse problema, vamos usar uma outra tag HTML chamada <pre>, que
mantém o texto pré-formatado, exatamente da mesma maneira na qual ele foi
digitado, incluindo quebras de linhas, espaços e tabulações.

Notou agora a diferença? A junção das

tags <pre> e <code> em conjunto nos
trouxe um resultado visual bem mais
interessante.

AS TAGS, UNIDAS JAMAIS SERÃO VENCIDAS! No exemplo

acima você pode perceber que adicionamos uma tag dentro da outra.
Quando isso acontece, é como se elas juntassem suas forças para gerar
um resultado ainda mais poderoso. É possível então juntar <strong> e
<em> e gerar um resultado como esse: em negrito e em itálico ao
mesmo tempo!

“Citações”
Se você já escreveu um texto sequer na sua vida, com certeza já
teve que fazer citações. Uma citação é um trecho de texto, escrito
ou dito por outra pessoa, que vai ilustrar perfeitamente algo que
você quer explicar.

Normalmente, uma citação aparece entre aspas ou com as

margens deslocadas em relação ao texto. Confuso pra você? Pois
volte na página 2 desse capítulo e lá você vai ver três citações escritas. Com certeza
você vai descobrir!

Para criar uma citação em HTML, podemos usar a tag <q> (do Inglês quote, que
significa citar). O texto que estiver entre <q> e </q> já vai receber automaticamente
as aspas, mas não terá nenhum deslocamento. Essa técnica é mais usada quando
queremos uma citação no meio de um parágrafo.

Também podemos criar citações mais longas (em bloco) e que tenham um parágrafo
só para si. Nesse caso, colocaremos tudo dentro de <blockquote> e </blockquote> e

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 8 de 13

o texto ganha um recuo automaticamente. Podemos também colocar um link para o
texto original, usando o parâmetro cite dentro da tag.

Abreviações
Essa é uma novidade da HTML5 e que ajuda muito em áreas como a de Tecnologia,
que usa muitas siglas e abreviações. Sempre que você quiser escrever uma sigla, mas
deixar claro ao usuário (e aos mecanismos de busca) o significado dela, use a tag
<abbr>.

Note no código acima que usamos o title para

indicar o significado da sigla. Ao lado, mostro
o funcionamento desse código no navegador.

Quando passamos o mouse sobre a sigla

abreviada, um pequeno texto aparece com o seu significado.

ODITREVNI OTXET
Não entendeu nada desse título? Pois volte ali em cima e leia da última letra até a
primeira. Achou inútil? Eu também. Pois é exatamente essa a função da tag <bdo>.

Para começo de conversa, BDO significa bi-directional override. Ao usar essa tag,
coloque também o parâmetro dir para indicar uma das duas direções possíveis:

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 9 de 13

rtl = da direita para a esquerda (right-to-left)
ltr = da esquerda para a direita (left-to-right)

E aí, já acabou?
Nesse capítulo, aprendemos vários tipos de formatação de textos. Mas gostaria de
deixar bem claro que existem muitos outros. O que fiz aqui foi uma seleção dos mais
usados (e também o <bdo>, que é o mais inútil) e vamos dar prosseguimento na
matéria. Se por acaso, mais pra frente, precisarmos usar alguma outra tag de
formatação de textos, eu explico pontualmente. Combinado?

Hora de exercitar
Eu já dei esse conselho lá em cima, mas não custa nada repetir. Acesse
agora mesmo o endereço do nosso repositório público em https://
gustavoguanabara.github.io/html-css/exercicios/ e
execute o exercício 007 e o exercício 008 no seu computador e tente
atingir esse mesmo resultado em casa, sem copiar o código que eu
criei. Nesse momento, a prática é algo que você mais precisa. Se
por acaso ficar difícil, pode acessar o repositório público de HTML
e CSS e dar uma olhada nos comandos, mas EVITE COPIAR.

Quer acompanhar tudo em vídeo?

Eu sei que às vezes as pessoas gostam mais de assistir
vídeos do que ler livros, e é por isso que eu lanço há
anos materiais no canal Curso em Vídeo no YouTube. O
link que vou compartilhar contigo faz parte da playlist
completa onde você encontra o Módulo 1 do Curso
de HTML5 e CSS3, completamente gravado com base
nesse material.

Além de acessar o link a seguir,

você também pode ter acesso às aulas apontando a câmera do
seu celular para o código QR ao lado. Todo dispositivo
smartphone ou tablet atualizado já possui esse recurso de
leitura de códigos habilitado por padrão.

https://www.youtube.com/
Módulo 1 do curso:
playlist?list=PLHz_AreHm4dkZ9-
atkcmcBaMZdmLHft8n

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 10 de 13

Teste seus conhecimentos
Terminou de ler esse capítulo e já acompanhou todos os vídeos e
referências externas que indicamos? Pois agora, responda às
seguintes perguntas objetivas e marque em cada uma delas a única
opção verdadeira. Aí sim, você vai poder comprovar que realmente
entendeu o conteúdo.

1. A versão anterior da linguagem, a 5. No lugar da tag <b> para negrito e

HTML4 era bastante focada no(a) _____ <i> para itálico, é recomendável usar
do conteúdo. Já a versão HTML5 já fica em HTML5 as novas tags:
mais voltada para o(a) _____ da
estrutura desse conteúdo. <strong> e <em>
<bold> e <italic>
ordenação/ significado <strong> e <italic>
forma / significado <bold> e <em>
ordenação / forma
forma / ordenação 6. Em relação ao tamanho das letras de
um texto e o uso das tags <big> e
2. A HTML5 chegou com a proposta de <small> em documentos HTML5,
definir as chamadas ______, onde cada assinale a única afirmativa correta:
instrução passa a ter um significado, não
apenas uma forma. a tag <big> ainda pode ser usada,
mas a <small> não pode mais
tags obsoletas todas as duas tags deixaram de existir
tags mecânicas todas as duas tags seguem
tags objetivas funcionando corretamente
tags semânticas a tag <big> deixou de existir e a tag
<small> segue funcionando
3. Na lista a seguir, qual é a única tag
que é focada em significado e não em 7. Quando for para sublinhar um texto
forma? no sentido de chamar a atenção para
ele, deixamos de usar o antigo <u> e
<b> passamos a usar o novo:
<blink>
<strong> <underline>
<applet> <ins>
<sub>
4. Qual das tags abaixo é a única que <strike>
ainda permanece ativa? (todas as
demais já estão na lista oficial de 8. Para criar um texto sobrescrito (como
elementos obsoletos da HTML, disponível em x2) usamos a tag _____ e para criar
no link oficial da W3C) um texto subscrito (como em H2O),
usamos a tag ______.
<big>
<center>
<sub> / <sup>
<aside>
<up> / <down>
<tt>
<down> / <up>
<sup> / <sub>

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 11 de 13

9. Em HTML5, podemos criar citações 10. Para inverter uma palavra ou frase,
utilizando a tag _____, incluindo o devemos usar a tag _____ com o
parâmetro _____ para indicar o link para parâmetro dir configurado para o valor
o conteúdo original da citação. _____.

<cite> / src <bdo> / rtl

<blockquote> / cite <bdo> / ltr
<quote> / src <direction> / rtl
<cite> / quote <direction> / ltr

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 12 de 13

Suas anotações
_________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________

Não guarde conhecimento. Ele é livre. Compartilhe o seu e veja ele se espalhando pelo mundo 🌎

#DevWeb - Capítulo 08 prof. Gustavo Guanabara Página 13 de 13