Maneira correta de deixar os textos em itálico HTML/CSS

Neste artigo vamos ver qual a maneira correta de deixar os textos em itálico no HTML/CSS, de forma totalmente nativa e também seguindo as boas práticas do desenvolvimento web

Fala programador, beleza?

Há três maneiras principais para deixar um texto em itálico com HTML/CSS, elas são:

• tag <em>;
• tag <i>;
• font-style;

Cada um teu seu propósito e significado, então é bom ficar atento e fazer o bom uso destes recursos, vamos vê-los em detalhe agora

A tag <em>

Deve ser utilizada com propósito semântico, não só para estilar o texto, para adicionar estilo utilize o font-style

Quando você utiliza a tag <em> está querendo dar ênfase a um texto

Por exemplo:

<p>Todos deveriam estudar <em>HTML e CSS</em> antes de criar páginas web</p>

A tag <i>

Parecido com a tag <em>, não deve ser utilizada apenas para estilizar o texto entre  a tag <i>

Seu uso também é semântico

E a grande diferença entre a tag <em> e <i> é o propósito

Você deve utilizar a tag <em> para dar ênfase a um texto, como mencionado anteriormente

Já a tag <i> serve para palavras de outras línguas, termos técnicos ou até mesmo pensamentos de personagens fictícios, por exemplo:

<p>Maçã em inglês se escreve <i>apple</i></p>

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

A propriedade font-style:

E agora sim, quando queremos deixar só por questões de layout/design o texto em itálico, nós utilizarmos essa regra do CSS

A regra font-style deve ser utilizada com o valor italic, deste jeito:

p {
 font-style: italic;
}

Suponto que estejamos adicionando estilo a um <p>, você só deve ajustar o elemento para o de sua escolha/necessidade

E assim vimos todas as maneiras de deixar os textos em itálico HTML/CSS, ou pelo menos as mais utilizadas 😀

Conclusão

Neste artigo vimos como deixar textos em itálico corretamente, e também a importância de respeitar a semântica

Recapitulando:

• <em>: serve para ênfases em texto;
• <i>: serve para textos em outras línguas, termos técnicos, pensamentos de personagens fictícios;
• font-style: para estilizar o texto sem semântica;

E por hoje é isso, até o próximo post! 🙂

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo