Learn HTML Inserted Text

Introduction

In HTML, <ins> tag is used to indicate that a particular text has been inserted or added to a web page. It is useful to show changes or updates made to any web document or web page. In this lab, we will explore the use and functionality of the <ins> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70781{{"`HTML Inserted Text`"}} html/head_elems -.-> lab-70781{{"`HTML Inserted Text`"}} html/text_head -.-> lab-70781{{"`HTML Inserted Text`"}} html/para_br -.-> lab-70781{{"`HTML Inserted Text`"}} end

Basic Syntax

The <ins> tag requires a start (opening) tag and an end (closing) tag. The basic syntax is as follows:

<ins> Inserted text </ins>

Example

Let's take a look at an example that demonstrates the use of the <ins> tag.

<!doctype html>
<html>
  <head>
    <title>Example of <ins> Tag</title>
  </head>
  <body>
    <p>HTML stands for Hypertext Markup Language.</p>
    <p>
      HTML is the basic building block of any webpage. It is used with CSS and
      Javascript to create interactive web pages.
    </p>
    <p><ins>HTML5 is the latest version of HTML</ins></p>
  </body>
</html>

In this example, we have two paragraphs of text and the last line is in the <ins> tag to show that text has been inserted or added to the original text.

Using Attributes

The <ins> tag does not have any specific attributes but does have two attributes that are frequently used along with the usual global attributes and event attributes. The two attributes used with the <ins> tag are:

cite: This is used to specify a URL that indicates why the text has been updated or changed.
datetime: This is used to specify the date and time of the last update in text. The format of datetime is YYYY-MM-DDThh:mm:ssTZD.

<p>
  <ins
    cite="https://en.wikipedia.org/wiki/HTML5"
    datetime="2022-09-15T08:00:00Z"
    >HTML5 is the latest version of HTML</ins
  >
</p>

Default CSS Settings

By default, most browsers use the following CSS settings for the <ins> tag:

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

Summary

In this lab, we learned about the use and functionality of the <ins> tag in HTML. It is used to indicate that text has been inserted or added to a web page. We explored the basic syntax, example, attributes, and default CSS settings for the <ins> tag.

HTML Inserted Text