Home Web Front-end HTML Tutorial How to use the ins tag to insert text and the del tag to delete text together in HTML? (with examples)

How to use the ins tag to insert text and the del tag to delete text together in HTML? (with examples)

Aug 29, 2018 pm 05:34 PM
del html ins

This article mainly tells you about the usage and cases of using HTML del tag and ins tag together. The article is compact and has a lot of knowledge. I hope you will practice it seriously after reading it. Now let's take a look together This is an article about how to use HTML del tags and ins tags

First of all, we must first understand the del tag and ins tags:

ins and del are in HTML4. Introduced at 0, it can help creators collaborate with each other when developing documents, and it also maintains some editing (for example, it can reflect how the creator modified the document over a period of time and how he thinks) and version control components (with the help of the software , you can restore the document to its state at a specific time).

html The del tag and the ins tag can be used together. One of them defines deletion of text, and the other defines insertion of text. Let’s take a look at an example first:

Text with deleted parts and newly inserted parts:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PHP中文网实例</title>
</head>
<body>
<p>(这个是和删除和插入标签一起使用的实例)</br>原价<del>180</del>现在只要<ins>80</ins></p>
</body>
</html>
Copy after login

The effect is as shown

How to use the ins tag to insert text and the del tag to delete text together in HTML? (with examples)

w3c's explanation of the del tag and ins tag:

##del defines the deleted text content in the document, ins is used To describe the updates and corrections in the document, the default browser style of del is strikethrough, and the default style of ins is underlined. This can also be a good explanation of the usage of the two. Usually, the two elements are used together. .

Usage of ins and del in html:

The two elements ins and del in HTML can be used as block-level elements or As an inline element, but not both at the same time. So they can contain one or several words in a paragraph, or they can contain several block-level elements such as paragraphs (p), lists (ul, ol, dl), tables (table), etc.

<p>我有<del cite="http://www.php.cn/" datetime="20180101T192525+09:00">9</del><ins cite="http://www.php.cn/" 
datetime="20180101T192525+09:00">8</ins>元钱</p>
Copy after login
<del title="刚刚丢了" datetime="20180101T192525+09:00"><p>9块钱</p></del>
Copy after login

Creators can comment on inserted or deleted elements through the title attribute, and the user agent (such as a browser) may display this information to the user

<p><del title="刚刚丢了"datetime="20180101T192525+09:00"><div><p>我有3分钱</p></div></del></p>
Copy after login
This is a wrong way of writing, that is ins and del cannot be both block-level elements and inline elements at the same time

The display effect of ins and del on the page can be controlled through CSS

Okay, that’s all for this article Content, if you have any questions, please leave a message in the message area below

[Editor’s recommendation]

How to use the method attribute of the form tag in HTML? Here is an introduction to the usage of the method attribute

Is the HTML h1 tag a double tag? How to set the position of html h1 tag?

The above is the detailed content of How to use the ins tag to insert text and the del tag to delete text together in HTML? (with examples). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles