Negrito e Itálico em HTML5 - As tags < strong > e < em > (Tutorial)

Iremos aprender, neste curto tutorial de HTML5, como usar de maneira correta o negrito e o itálico, em textos, no HTML5, através das tags <strong> e <em>.

Também iremos estudar qual a diferenças destas tags para as tags <b> e <i>.

• Fazer download da Apostila de HTML + CSS

Obter meu certificado!

Negrito em HTML5 - A tag <strong>

O antigo HTML, o 4.01, era mais focado em formatação pura e simples de texto, como aquela que fazemos em um editor de textos, como o Microsoft Word.

Um fato curioso e interessante no HTML5, é que ele traz uma preocupação semântica em suas novas tags e elementos, ele não quer simplesmente alterar a forma como é exibido um documento HTML, agora as coisas devem fazer sentido, um sentido real, lógico.

Assim, o negrito em HTML5 não quer dizer somente que aquele texto está mais espesso (grosso), quer dizer que ele está em destaque, mais visível e semanticamente forte.

Forte, em inglês, é strong. E a tag para o uso do negrito é a strong (bem simples e óbvio, não?).
Assim, a sintaxe para usar o negrito em HTML5 é:

<strong>Negrito em HTML5</strong>

Diferença entre <b> e <strong>

Visualmente, nada muda.

Veja o código usando as tags <b> e <strong>:

<b>Este texto uso a tag b </b>
<strong>Este texto usa a tag strong</strong>

Agora veja seu resultado:
Este texto uso a tag b
Este texto usa a tag strong

Como dissemos, o resultado não é visual, e sim lógico, pois o uso do strong é indicado quando você quer destacar um determinado trecho do texto. Por exemplo:
"O site HTML Progressivo é uma apostila online e gratuita de HTML 4.01, HTML5 e CSS3"

Ou seja, destacamos o nome de nossa apostila.
Além do significado, a tag <strong> serve para dizer ao Google "Hey, esse trecho é importante, quer dizer muito a respeito desta página", ajudando inclusive em termos de SEO.

Assim, se você quiser enfatizar um texto (a keyword principal que você quer rankear), use a <strong>.

Itálico em HTML5 - A tag <em>

Analogamente ao <b> e <strong>, temos o <i> e o <em>, para lidarmos com textos em itálico.

O nome em vem de emphatic stress, e serve para sinalizar que aquele trecho deve ser lido com uma enfatização maior, de uma maneira diferente.

A sintaxe da tag <em> em HTML5 é, simplesmente:

<em>Itálico em HTML5</em>

A diferença desta tag em para a tag <i>, é que esta última simplesmente inclina o texto.
Já a tag <em>, tem um significado por trás da formatação de trecho, que é ser lido de maneira mais enfática, com a mudança de língua.

Ler Tutorial

Tutorial de HTML5 - Novas Tags e Elementos Semânticos

No Tutorial de HTML5 anterior vimos algumas simplificações do antigo HTML, que deixaram algumas tags bem mais simples de serem usadas como a de Doctype, codificação de caracteres charset e a propriedade lang para definir a língua do conteúdo de seu site.

Agora vamos focar nos novos elementos, nas novas tags que surgiram especificamente para o uso no HTML5, que não existiam antes.

Ler Tutorial

Como criar um site em HTML5 - Doctype, charset meta tag

Agora que já explicamos, no tutorial de HTML5 passado, sobre o que é HTML5, qual seu propósito, para que serve, para que é usado e suas principais diferenças para o antigo HTML 4.01, vamos de fato colocar a mão na massa e criar um site em HTML5.

Vamos mostrar o que mudou inicialmente, o que foi abandonado, o que é indicado e outros detalhes para iniciar seu desenvolvimento web em HTML5.

Ler Tutorial

HTML e HTML5 - Qual a diferença ? O que muda ?

Símbolo do HTML5

Neste tutorial de HTML5 inicial de nosso curso, iremos entender o que ocasionou a mudança do antigo HTML (4.01) para o novíssimo, revolucionário e fantástico HTML5.

Vamos ver como era a internet antigamente, como funcionava, e as mudanças que ocorreram na web que culminaram no desenvolvimento do tão falado e poderoso HTML5.

Para iniciar seus estudos nestes tutoriais de HTML5, recomendamos que tenha estudado os tutoriais de HTML e CSS de nossa apostila online.

Ler Tutorial

Como alinhar um texto em CSS - A propriedade text-align: left, right, center e justify - Tutorial

Neste tutorial de CSS de nosso curso, iremos aprender a usar uma propriedade bem simples, a text-align, mas extremamente útil e usada, que serve para alinharmos os textos de um site na posição esquerda (left), direita (right), centralizada (center) ou justificada (justify).

Ler Tutorial

Espaçamento entre letras, palavras e linhas - letter-spacing, word-spacing e line-height Tutorial

Em todos os outros tutoriais de CSS de nossa apostila, na seção de formatação de texto, aprendemos como mudar as características das fontes, como cor, tamanho, itálico, negrito, maiúsculo, minúsculo, dentre outras propriedades.

Neste tutorial vamos fazer algo um pouco diferente, não vamos alterar nada nas fontes, e sim do espaçamento entre elas: distância entre as letras, entre as palavras e entre as linhas de um texto.

• Apostila HTML Progressivo: Fazer download

Espaçamento entre letras em CSS - letter-spacing: px;

Neste tutorial de nossa apostila você vai notar como o CSS, aliado ao HTML, se torna uma ferramenta extremamente poderosa (pois podemos estilizar qualquer coisa em um site), flexível (é fácil de alterar os estilos CSS) e simples (formatamos textos com poucos códigos em uma folha de estilos).

Uma dessas funcionalidades do CSS é a capacidade de escolhermos o espaço, a distância entre uma letra e outra de qualquer texto na hora de se criar um site.

Isso é feito de uma maneira bem simples, através da propriedade letter-spacing:

letter-spacing: Xpx;

Onde x é um número correspondente a distância, do espaçamento entre as letras, dado em pixels.
O espaçamento padrão é 0 pixel.

Se colocarmos um valor positivo, como 4px por exemplo, aumentaremos o espaçamento para este valor, veja o código:

<div style="letter-spacing: 4px;">Espaçamento de 4 pixels</div>

O resultado é:

Espaçamento de 4 pixels

Porém, podemos também alterar o valor do espaçamento para menos, aproximando as letras uma das outras.
Para isso, colocamos um valor negativo de pixels.

Por exemplo, a seguinte frase tem espaçamento de -2 pixels:
Código: <div style="letter-spacing: -2px;">Espaçamento de -2 pixels</div>

Coloque esse código em um documento .html e veja o interessante resultado.

Espaçamento entre palavras em CSS - word-spacing: px;

Letras muito espaçadas uma das outras não são muito comuns, pois há pouca utilidade em distanciar os caracteres, afinal um texto onde as letras estão muito distantes é difícil de se ler.

Na prática, o mais comum é distanciar as palavras entre si.
Se quiser ver palavras mais espaçadas que o comum, veja algum texto de jornal ou tente justificar um texto no Word, por exemplo.

Para espaçar palavras, vamos usar a propriedade word-spacing, cuja sintaxe é:

word-spacing: Xpx;

E assim como na propriedade do CSS letter-spacing, x é um número correspondente a distância, do espaçamento entre as letras, dado em pixels.

O espaçamento padrão é 0 pixel, se colocar um valor acima de 0 px, você irá acrescentar uma distância no espaçamento padrão.
Se colocar um valor negativo de pixel, você irá reduzir o espaçamento entre as palavras.

Por exemplo, o seguinte estilo CSS aplicado vai espaçar as palavras em 5 pixels usando a propriedade word-spacing:

<div style="word-spacing: 5px;">Tutorial completo de CSS</div>

Onde o resultado é:

Tutorial completo de CSS

Agora vamos aproximar em  6 px a distância entre as palavras:
Código: <div style="word-spacing: -6px;">Tutorial completo de CSS</div>
Resultado:

Tutorial completo de CSS

Espaçamento entre Linhas em CSS - line-height: %

E por fim, vamos estudar um outro tipo de espaçamento que é muito importante para trabalharmos com liberdade na formatação dos textos de nossos websites, que é o espaçamento entre uma linha e outra.

Para definirmos o espaçamento entre uma linha e outra, usamos a propriedade line-height (altura da linha, em inglês).

Lembrando que você pode usar outras medidas de distância, como em, porcentagem e keywords como valores, como o valor "normal" para colocar o espaçamento padrão de seu browser/sistema, igual como fizemos em nosso tutorial sobre tamanho de fontes em CSS.

Veja diferentes sintaxes para definir o tamanho do espaçamento entre linhas em CSS:

<p style="line-height: 100%">line-height = <br>100%</p>
<p style="line-height: 16px">line-height = <br>16px</p>
<p style="line-height: 1.5">line-height = <br>1.5</p>
<p style="line-height: 2em">line-height = <br>2em</p>

Cujo efeito é o seguinte:

line-height =
100%

line-height =
10px

line-height =
1.5

line-height =
2em

Ler Tutorial

Fonte maiúscula e minúscula em CSS - text-transform: uppercase, lowercase e capitalize

Neste simples e curto Tutorial de CSS, vamos ensinar a formatar qualquer texto de um site, definindo que as fontes fiquem maiúsculas (uppercase), minúsculas (lowercase) e capitalização de palavras (deixar a primeira letra em maiúscula e as demais minúsculas, capitalize), através do atributo text-transform do CSS.

• Baixar PDF: Apostila HTML + CSS Progressivo

Maiúsculo, Minúsculo e Capitalizado - O atributo text-transform

Como fazer para deixar um texto totalmente em fontes cujas letras são maiúsculas?
Ora, só escrever com a tecla Caps Lock ativada que não tem erro.

E se você pegou um texto em minúsculo da internet ou tinha escrito anteriormente em minúsculo?
Como fazer para deixar maiúsculo?
Ok, diversos programas de edição de textos como o Microsoft Office fornecem essa opção.

Mas e se você quiser, por exemplo, deixar todos os textos das tags H1 em maiúsculo?
Vai copiar e colar todas estas tags de cabeçalho no Word?

E se você for contratado por um portal grande, com dezenas de milhares de páginas, e como sua primeira tarefa eles te mandam colocar todas as tags de cabeçalho em maiúsculo e o último parágrafo de cada artigo capitalizado (a primeira letra, de cada palavra, em maiúscula).

E aí, o que você faz?
Pode fazer no Word? Claro que pode, mas iria ter um trabalho gigantesco, quase que humanamente impossível.

Mas relaxe, você estudou pelo Curso HTML Progressivo e domina a arte da estilização de sites com CSS, e vai aprender agora como fazer de uma maneira muito simples, rápida e extremamente eficaz e poderosa, usando o atributo "text-transform".

Fonte Maiúscula em CSS - text-transform: uppercase

Sem mais delongas, vamos aprender como deixar qualquer texto com letras maiúsculas, usando a propriedade text-transform do CSS.

Para fazer isso, usamos a propriedade "text-transform" e o valor "uppercase" (maiúscula, em inglês).
Assim, a sintaxe é:

text-transform: uppercase;

Por exemplo, para que uma tag de cabeçalho H2 seja exibida toda em maiúscula, podemos usar o seguinte código em uma folha de estilos CSS:

h2 {
 text-transform: uppercase;
}

Vejamos outros exemplos de código, que contém uma frase minúscula, mas por ter usado o text-transform com o uppercase, o resultado no site vai ser a frase maiúscula:

<div style="text-transform: uppercase;>apostila html progressivo</div>

Resultado:
APOSTILA HTML PROGRESSIVO

Fonte Minúscula em CSS - text-transform: lowercase;

Sem segredos, para deixarmos um determinado texto com todas as suas letras minúsculas, usamos a propriedade "text-transform" com a seguinte sintaxe:

text-transform: lowercase;

Assim no caso da uppercase, o lowercase faz com que o texto fique em minúsculo, não importando a maneira que você escreva.

Fonte Capitalizada em CSS - text-transform: capitalize;

Existem, basicamente, três maneiras de exibir uma fonte: em minúsculo, maiúsculo ou capitalizado.
Um texto capitalizado é aquele em que todas as primeiras letras, de cada palavra, estão em maiúsculo e o restante minúsculo.

Por exemplo:
O Html Progressivo É Uma Apostila Online De Html E Css.

Assim, a sintaxe para esta propriedade CSS é:

text-transform: capitalize;

Este tipo de formatação de texto é muito comum em Marketing, por exemplo, pois um título que contém a primeira letra de cada palavra em maiúscula costuma chamar bastante atenção.
Se você notar as ofertas que aparecem em redes sociais ou no seu e-mail, vai notar o uso da formatação de textos capitalizados.

Por exemplo o seguinte código:

<div style="text-transform: capitalize">embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto</div>

Cujo resultado é o seguinte texto, capitalizado pelo CSS:

embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto

Ou seja, se um dia precisar colocar seu texto em maiúsculo, minúsculo ou capitalizar, não precisa quebrar a cabeça com o Word, afinal você é um webmaster, cria sites e sabe HTML&CSS, então use a propriedade text-transform para transformar seus textos.

Ler Tutorial

Cores em CSS - A propriedade color (RGB, Hexadecimal e por nome da cor)

Neste tutorial de CSS de nossa apostila, vamos falar sobre as diversas maneiras de se definir a cor de um texto através do atributo color do CSS, que é através do código hexadecimal das cores, de seus nomes em inglês ou através do sistema RGB.

Ler Tutorial

Tamanho da Fonte em CSS - font-size: pixel, em, % e keyword Tutorial

Neste tutorial simples de CSS, iremos aprender como definir o tamanho de uma fonte qualquer, fazendo uso da propriedade font-size, que pode receber uma variedade de valores bem interessantes, como em pixel, porcentagem, palavras chave e tamanhos relativos de texto.

Ler Tutorial

Fontes em CSS: A propriedade font-family - Tutorial

Neste tutorial de CSS sobre formatação de texto, vamos aprender como escolher as fontes de um site, família de fontes, bem como aprender sobre as fontes mono espaçadas (monospace), serif, sans-serif, cursivas e outras características de uma font em CSS.

• Apostila HTML Progressivo: Fazer download

Ler Tutorial

Sublinhado (underline) em CSS, Sobrelinhado (overline), Riscado (line-through) e Piscando (blink) - A propriedade text-decoration

Neste tutorial de CSS de nossa apostila, vamos estudar a propriedade text-decoration, que nos irá permitir formatar fontes para usar sublinhado (underline), sobrelinhado (em cima, overline), fonte cortada ou riscada (line-through) e fazer o texto piscar (blink).

Ler Tutorial

Negrito em CSS - A propriedade font-weight (bold, bolder, lighter, normal e 100-900)

Neste Tutorial de CSS de nossa apostila, vamos falar sobre mais um assunto que se refere as fontes e formatação de textos, que é aparentemente simples (e realmente é), o negrito, através da propriedade font-weight do CSS.

Vamos ver toda a flexibilidade e diferenciação que o CSS nos traz em relação ao HTML solo e puro.

• Estude offline: Apostila HTML + CSS

Obter meu certificado!

Como usar o negrito em CSS: font-weight

Quando estudamos esse assunto, de deixar um texto em negrito, no HTML, aprendemos simplesmente que devemos usar a tag <b></b> e está tudo resolvido.

Porém, no HTML você teria que ir em cada lugar que quer usar o negrito, de cada página, e aplicar as tags. Obviamente que isso é um trabalho sobrenatural se você vai criar seu site inteiro na mão, e mais ainda se ele for um site com muitas páginas e seções.

A solução, para variar, é usar CSS para definir onde irá aplicar o negrito.
Isso é feito usando a propriedade font-weight

Porém, o sentido de negrito em CSS vai bem além daquele que vimos em nosso curso de HTML, pois agora podemos definir o grau de negrito que queremos.

Ou seja, o CSS nos permite definir a espessura, o grau ou peso (weight) de negrito que queremos aplicar em uma fonte.
Inclusive nos permitindo deixar mais espesso ou mais fina a fonte, tudo fica de acordo com sua vontade.

Essas possibilidades de negrito com a propriedade font-weight podem não parecer tão úteis para a maioria das pessoas, mas mostram todo o poder e versatilidade do CSS.

Para grandes revistas e jornais que migraram do papel para a web, foi uma baita mão na roda, pois antes ficávamos preso com o padrão de negrito de cada navegador, no HTML, e muitas vezes a espessura e grau do negrito não eram o desejado por webdesigners nem era igual ao usado no papel.

Como deixar a fonte em negrito em CSS: font-weight: bold

Vamos estudar o primeiro valor da propriedade "font-weight", que é o "bold".

O bold equivale a nossa famosa tag <b>, para simplesmente negritar um trecho.
A sintaxe é:

font-weight: bold;

O negrito serve, basicamente, para destacar um trecho de um texto.
Por exemplo, para fazer a seguinte frase em negrito:

"O CSS é uma linguagem de estilo realmente importante na criação de sites."

Podemos usar o seguinte trecho de código, diretamente na tag <span>:
"O CSS é uma linguagem de estilo <span style="font-weight: bold">realmente</span> importante na criação de sites."

Ou em uma folha de estilos

.negrito {
 font-weight: bold;
}

Para isso, basta nomear os locais de seu site que você quer negritar, por exemplo:

<p>O CSS é uma linguagem de estilo <span class="negrito">realmente</span> importante na criação de sites.</p>

Deixando o texto ainda mais em negrito em CSS: font-weight: bolder

O CSS nos permite ainda usar um valor chamado "bolder" para você deixar seu negrito ("bold") ainda mais realçado do que era antes, a sintaxe de uso é:

font-weight: bolder;

Ou seja, não significa que vai ficar mais espesso, mais grosso.

Vai ficar mais do que era antes.

Porém, isso depende totalmente do da família de fonte que seu navegador esteja usando (font-family), e isso pode variar de acordo com seu sistema operacional (cada sistema define um tom de negrito usado nos programas, como nos navegadores).

Quando estudamos, ainda neste tutorial de CSS sobre os valores numéricos da font-weight iremos entender melhor este conceito de bolder.

.MaisNegrito {
 font-weight: bolder;
}

Tirando o negrito de uma fonte em CSS: fonte-weight: lighter
No HTML tínhamos duas opções: ou usa negrito, ou não usa.
Já no CSS, você pode usar negrito, deixar mais negrito ainda, menos, normal e até deixar o oposto, bem fino (veremos isso em detalhe ao fim do tutorial, quando estudarmos os valores do atributo font-weight).

Assim, se estiver usando um determinado tom de negrito, e usar o valor "bolder", vai subir no tom de negrito e deixar a fonte mais espessa.

E para deixar mais fina, menos 'negrita', do que ela era antes ?
Use o valor "lighter":

font-weight: ligther;

Na folha de estilo:

.MenosNegrito {
 font-weight: lighter;
}

Poderoso esse, CSS, não?
Espere até ver último próximo tópico deste tutorial.

Deixando a fonte normal em relação ao negrito: font-weight: normal

Este valor, "normal", é bem comum em diversos tipos de propriedades no CSS, como no tutorial sobre itálico com o font-style, este valor serve para explicitar que não usaremos as propriedades de negrito, e sim a espessura normal, comum e padrão do navegador.

A sintaxe para fixar o negrito em normal é:

font-weight: normal;

Na verdade, todo texto tem seu nível de negrito, o que o "normal" vez não é tirar o negrito, e sim colocar no valor padrão do seu browser.
É muito usado caso esteja escrevendo em um texto, class ou ID que está em um nível diferente de negrito e queria que a fonte volte ao seu valor normal de boldness.

Como definir o grau de negrito em CSS: 100, 200, 300, 400, 500, 600, 700, 800 e 900

O negrito da tag <b>, do valores "bold", "bolder", "normal" e "lighter" são apenas uma maneira mais simples de definir o grau de negrito de uma fonte.

Um jeito mais específico e poderoso de definir o tanto de negrito, ou a espessura de uma fonte, que o CSS nos fornece é através de valores numéricos, que vão de 100 até 900, variando de 100 em 100, onde 100 é o valor com menos negrito (quase invisível) e o valor 900 é o com mais grau de negrito, mais grosso.

Assim, os possíveis valores são:

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Dependendo do seu browser, os valores que já estudamos nada mais são que esses valores numéricos:
normal = 400
bold = 700

Se você usar "bolder", ele sobe 100, e se usar "lighter" ele desce 100 nessa faixa de valores.
Assim, para ver toda a faixa de valores de seu browser:

<div style="font-weight:100">font-weight: 100</div>
<div style="font-weight:200">font-weight: 200</div>
<div style="font-weight:300">font-weight: 300</div>
<div style="font-weight:400">font-weight: 400</div>
<div style="font-weight:500">font-weight: 500</div>
<div style="font-weight:600">font-weight: 600</div>
<div style="font-weight:700">font-weight: 700</div>
<div style="font-weight:800">font-weight: 800</div>
<div style="font-weight:900">font-weight: 900</div>

Ler Tutorial

Fonte em Itálico, Oblíqua e Normal - A propriedade font-style (italic, normal e oblique) - Tutorial de CSS

Neste tutorial de CSS de nossa apostila, vamos iniciar nossos estudos de formatação de textos com CSS, aprendendo a estilizar as fontes com a propriedade font-style, que nos permite deixar as fontes em Itálico, Oblíqua ou Normal.

Ler Tutorial