Texto resaltado con la etiqueta Mark

Introducción

En HTML, la etiqueta  se utiliza para resaltar o marcar una porción de texto para mostrar la importancia del texto. En este laboratorio, aprenderemos cómo usar la etiqueta  para crear texto resaltado.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70796{{"Texto resaltado en HTML"}} html/head_elems -.-> lab-70796{{"Texto resaltado en HTML"}} html/lang_decl -.-> lab-70796{{"Texto resaltado en HTML"}} html/text_head -.-> lab-70796{{"Texto resaltado en HTML"}} html/para_br -.-> lab-70796{{"Texto resaltado en HTML"}} html/layout -.-> lab-70796{{"Texto resaltado en HTML"}} html/inter_elems -.-> lab-70796{{"Texto resaltado en HTML"}} end

Configurar el archivo HTML

Para comenzar, cree un archivo index.html y configure la estructura básica del archivo HTML. Inserta el siguiente código:

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

Agregar texto al marcado

Entre las etiquetas <body>, agregue algo de texto. En este ejemplo, resaltaremos el texto "Brown fox" dentro de una oración.

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

Agregar un estilo CSS para cambiar el color predeterminado

Por defecto, el texto resaltado tendrá un color de fondo amarillo y un color de texto negro. Puedes cambiar estos colores agregando CSS a la etiqueta . Por ejemplo, para cambiar el color de fondo resaltado a rojo y el color de texto a blanco, agregue el siguiente estilo CSS:

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

(Opcional): Agregar un selector de clase para el estilo

Si tienes múltiples instancias de texto resaltado en una página y quieres estilizar todos de la misma manera, puedes agregar una clase a la etiqueta  y agregar un selector de clase CSS. En el siguiente ejemplo, agregaremos una clase llamada highlight a la etiqueta  y luego la estilizaremos 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>

Resumen

¡Eso es todo! Has aprendido cómo crear texto resaltado con la etiqueta  en HTML. Al usar la etiqueta  y unos pocos estilos CSS, puedes llamar fácilmente la atención de tus lectores sobre las partes importantes de tu texto.