Aprende sobre el texto insertado en HTML

Introducción

En HTML, la etiqueta <ins> se utiliza para indicar que un texto determinado ha sido insertado o agregado a una página web. Es útil para mostrar los cambios o actualizaciones realizadas en cualquier documento web o página web. En este laboratorio, exploraremos el uso y la funcionalidad de la etiqueta <ins>.

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/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70781{{"Texto insertado en HTML"}} html/text_dir -.-> lab-70781{{"Texto insertado en HTML"}} html/inter_elems -.-> lab-70781{{"Texto insertado en HTML"}} html/custom_attr -.-> lab-70781{{"Texto insertado en HTML"}} end

Sintaxis básica

La etiqueta <ins> requiere una etiqueta de inicio (abierta) y una etiqueta de fin (cerrada). La sintaxis básica es la siguiente:

<ins> Texto insertado </ins>

Ejemplo

Echemos un vistazo a un ejemplo que demuestra el uso de la etiqueta <ins>.

<!doctype html>
<html>
  <head>
    <title>Ejemplo de la etiqueta <ins></title>
  </head>
  <body>
    <p>HTML significa Lenguaje de Marcado de Hipertexto.</p>
    <p>
      HTML es el bloque básico de construcción de cualquier página web. Se
      utiliza con CSS y Javascript para crear páginas web interactivas.
    </p>
    <p><ins>HTML5 es la última versión de HTML</ins></p>
  </body>
</html>

En este ejemplo, tenemos dos párrafos de texto y la última línea está en la etiqueta <ins> para mostrar que se ha insertado o agregado texto al texto original.

Usando atributos

La etiqueta <ins> no tiene atributos específicos, pero tiene dos atributos que se utilizan con frecuencia junto con los atributos globales habituales y los atributos de eventos. Los dos atributos utilizados con la etiqueta <ins> son:

cite: Este se utiliza para especificar una URL que indica por qué se ha actualizado o cambiado el texto.
datetime: Este se utiliza para especificar la fecha y hora de la última actualización en texto. El formato de datetime es YYYY-MM-DDThh:mm:ssTZD.

<p>
  <ins
    cite="https://en.wikipedia.org/wiki/HTML5"
    datetime="2022-09-15T08:00:00Z"
    >HTML5 es la última versión de HTML</ins
  >
</p>

Configuraciones CSS predeterminadas

Por defecto, la mayoría de los navegadores utilizan las siguientes configuraciones CSS para la etiqueta <ins>:

<style>
  ins {
    text-decoration: underline;
  }
</style>

Resumen

En este laboratorio, aprendimos sobre el uso y la funcionalidad de la etiqueta <ins> en HTML. Se utiliza para indicar que se ha insertado o agregado texto a una página web. Exploramos la sintaxis básica, el ejemplo, los atributos y las configuraciones CSS predeterminadas para la etiqueta <ins>.