Texto Realçado com a Tag Mark

Introdução

Em HTML, a tag  é usada para realçar ou marcar a porção de texto a fim de mostrar a importância do texto. Neste laboratório, aprenderemos como usar a tag  para criar texto realçado.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Configurar o arquivo HTML

Para começar, crie um arquivo index.html e configure a estrutura básica do arquivo HTML. Insira o seguinte código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Highlighted Text with Mark Tag</title>
  </head>
  <body></body>
</html>

Adicionar Texto à Marcação

Entre as tags <body>, adicione algum texto. Neste exemplo, vamos realçar o texto "Brown fox" dentro de uma frase.

<body>
  <p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>

Adicionar um estilo CSS para alterar a cor padrão

Por padrão, o texto realçado terá uma cor de fundo amarela e cor do texto preta. Você pode mudar essas cores adicionando CSS à tag . Por exemplo, para mudar a cor de fundo realçada para vermelho e a cor do texto para branco, adicione o seguinte estilo CSS:

<style>
  mark {
    background-color: red;
    color: white;
  }
</style>

(Opcional): Adicionar um Seletor de Classe para Estilização

Se você tiver múltiplas instâncias de texto realçado em uma página e quiser estilizá-las da mesma forma, você pode adicionar uma classe à tag  e adicionar um seletor de classe CSS. No exemplo a seguir, adicionaremos uma classe chamada highlight à tag  e, em seguida, a estilizar usando CSS.

<body>
  <p>
    The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
  </p>
  <p>The <mark class="highlight">sun</mark> is a star.</p>
</body>

<style>
  .highlight {
    background-color: green;
    color: white;
  }
</style>

Resumo

É isso! Você aprendeu como criar texto realçado com a tag  em HTML. Ao usar a tag  e alguns estilos CSS, você pode facilmente chamar a atenção dos seus leitores para partes importantes do seu texto.

Texto Realçado em HTML