Uncommon But Handy HTML Tags

Even if you frequently look at web page source code, it is unlikely you have seen all HTML tags in use.

We'll look at three uncommon HTML tags in this article. Useful ones.

• wbr
• del
• ins

HTML Tag wbr

The HTML tag wbr is used to let the browser know where within a word it is OK to insert a line break.

This tag is handy for very long words that, otherwise, could break to the next line and leave the previous line awkwardly short.

Here is an example.

The first line is short because the long word, unable to fit into the balance of the line, is placed on the line below.

A few wbr tags within the long word will allow the browser to insert a line break at the most appropriate wbr tag insertion. Example:

Note that IE ignores the wbr tag. Those with IE browsers will see the awkwardly short line. Others will see more balance in the text.

Here is the source code of the above example.

<div style="max-width:200px; border:1px solid black; padding:10px;">
<p style="margin:0;">
The word super<wbr>cali<wbr>fragilistic<wbr>expial<wbr>i<wbr>docious is from Mary Poppins.
</p>
</div>

It is prudent to use the wbr tag within extraordinarily long words. Site visitors can change the font size of web pages, causing line breaks to change. Mobile devices generally have narrow content column widths.

The wbr tag can be used to better balance lines of text.

The web tab is especially useful for multiple slash words. As an example: document/webpage.

HTML Tag del and HTML Tag ins

The HTML tags del and ins are often seen together. But not always. The tags can be used independently and each has its own individual purpose.

The del and ins tags are used to define text that has been deleted from the document (the del tag) and to define text that has been inserted into the document (the ins tag).

Of course, the text with the del tag is still in the document or it couldn't have a del tag. However, the del tag causes the browser to put a strikethrough line over the content.

The ins tag causes the browser to underline the content within the ins tag.

Example: Some text that has been deleted and some text that has been inserted.

Here is the source code of the above example.

Example: Some <del>text that has been deleted</del> and <ins>some text that has been inserted</ins>.

The HTML del and ins tags are a web page version of a strikethrough and underline technique long used with paper documents to make clear what has been deleted and what has been inserted to end up with the latest version of the document. The technique is used especially in the legal profession, where documents must be correct to every word and punctuation.

The person reviewing the document doesn't have to compare it with an older version. The changes are clearly marked.

There are other uncommon but handy HTML tags. A list of tags is at this HTML Reference.

Many HTML tags, like the three addressed in this article, are used only in certain circumstances. The uncommon HTML tags come in very handy when those circumstances are at hand.

Will Bontrager