Negrito, itálico, sublinhado e texto marcado

Módulo Progresso

0% Concluído

Título da Aula: Elementos HTML: Negrito, Itálico, Sublinhado e Texto Marcado

Introdução

Olá e bem-vindo de volta à nossa jornada de aprendizado de HTML! Na aula anterior, falamos sobre títulos, parágrafos e quebras de linha. Hoje, vamos explorar como podemos adicionar ênfase e estilo ao nosso texto usando os elementos de negrito, itálico, sublinhado e texto marcado. Então, vamos começar!

Corpo da Aula

Negrito

Em HTML, podemos fazer o texto aparecer em negrito usando as tags  ou . Embora ambos resultem em texto em negrito, eles têm significados semânticos diferentes.  é usado para estilizar o texto sem dar qualquer significado especial, enquanto  indica que o texto tem forte importância. Aqui está um exemplo de como usar negrito em HTML:

<p>Este é um texto normal. <b>Este é um texto em negrito.</b></p>
<p>Este é um texto normal. <strong>Este é um texto importante.</strong></p>

A diferença entre  e  pode não ser aparente visualmente, mas é importante para a acessibilidade. Leitores de tela, que são usados por pessoas com deficiência visual para navegar na web, darão ênfase especial ao texto marcado com , enquanto o texto marcado com  será lido normalmente.

Itálico

Podemos fazer o texto aparecer em itálico usando as tags  ou . Semelhante ao negrito,  é usado para estilizar o texto sem dar qualquer significado especial, enquanto  indica ênfase. Aqui está um exemplo de como usar itálico em HTML:

<p>Este é um texto normal. <i>Este é um texto em itálico.</i></p>
<p>Este é um texto normal. <em>Este é um texto enfatizado.</em></p>

Assim como com  e , a diferença entre  e  é importante para a acessibilidade. Leitores de tela darão ênfase especial ao texto marcado com , enquanto o texto marcado com  será lido normalmente.

Sublinhado

O sublinhado pode ser adicionado ao texto usando a tag . No entanto, o uso de sublinhado é geralmente desencorajado em HTML, pois pode ser confundido com um link. Aqui está um exemplo de como usar sublinhado em HTML:

<p>Este é um texto normal. <u>Este é um texto sublinhado.</u></p>

É importante lembrar que o sublinhado tem uma conotação específica na web – geralmente indica um link clicável. Portanto, usar sublinhado para ênfase pode confundir os usuários. Se você precisa enfatizar o texto, é melhor usar  ou .

Texto Marcado

Podemos destacar ou marcar texto usando a tag . Isso fará com que o texto apareça com um fundo amarelo, semelhante a um texto destacado com um marcador. Aqui está um exemplo de como usar texto marcado em HTML:

<p>Este é um texto normal. <mark>Este é um texto marcado.</mark></p>

A tag  é útil para indicar partes do texto que são de particular importância ou relevância. Por exemplo, você pode usá-lo para destacar palavras-chave ou frases em um artigo ou para indicar partes de um texto que foram alteradas ou corrigidas.

Conclusão

E aí está! Agora você sabe como adicionar ênfase e estilo ao seu texto usando negrito, itálico, sublinhado e texto marcado. Lembre-se, embora essas tags possam parecer semelhantes visualmente, elas têm significados semânticos diferentes que podem afetar a acessibilidade de sua página. Na próxima aula, vamos explorar como criar listas em HTML. Até lá, experimente adicionar algum estilo ao texto em sua página “Hello World”!

Exercícios da Aula: Elementos HTML – Negrito, Itálico, Sublinhado e Texto Marcado

Exercício 1: Texto em Negrito

Receba o seguinte parágrafo de “O Senhor dos Anéis” e aplique a tag  e  em palavras ou frases específicas. Lembre-se de que  é usado para indicar texto de forte importância.

Um Anel para a todos governar, Um Anel para encontrá-los, Um Anel para a todos trazer e na escuridão aprisioná-los.

Exercício 2: Texto em Itálico

Receba o seguinte parágrafo de “Harry Potter e a Pedra Filosofal” e aplique a tag  e  em palavras ou frases específicas. Lembre-se de que  é usado para enfatizar o texto.

Não vale a pena mergulhar nos sonhos e esquecer de viver.

Exercício 3: Texto Sublinhado

Receba o seguinte parágrafo de “As Crônicas de Nárnia” e aplique a tag  em palavras ou frases específicas. Lembre-se de que sublinhado em HTML é geralmente desencorajado pois pode ser confundido com um link.

Algumas vezes é preciso decidir entre uma coisa a que se está acostumado e outra que gostaríamos de conhecer.

Exercício 4: Texto Marcado

Receba o seguinte parágrafo de “Percy Jackson & Os Olimpianos” e aplique a tag  em palavras ou frases específicas. Lembre-se de que  é usado para destacar partes do texto que são de particular importância ou relevância.

Ser um meio-sangue é perigoso. É assustador. Na maioria das vezes, acaba com a gente de um jeito penoso e detestável.

Exercício 5: Revisão e Combinação de Estilos

Receba o seguinte parágrafo de “Duna” e aplique as tags , , , ,  e  de maneira apropriada para adicionar ênfase e estilo ao seu texto.

Eu devo não ter medo. O medo é a mente assassina.