DEV Community

Discussion on: 5 Most Unused and Ununderstood HTML Tags🚀

View post
Collapse
 
teamradhq profile image
teamradhq •

I think that you misunderstand the purpose of these tags...

None of these tags are used to define visual styles on content because HTML has nothing to do with visual styles. It's a semantic language that is used to describe its content...

If you want to apply visual styling to your page, use CSS.

The abbr tag is used for abbreviations. Your example is invalid HTML, because use is not an abbreviation of html tags.

A valid use of abbr tag would be:

<abbr title="Hypertext Markup Language">HTML</abbr>
Enter fullscreen mode Exit fullscreen mode

The ins tag is used to represent inserted text. It it NOT used to apply underline to text. If you want to apply an underline to element text, use CSS.

So a correct example of underlining text would be:

<p>Joe is <span style="text-decoration: underline;">cleaver</span> boy.</p>
Enter fullscreen mode Exit fullscreen mode

A correct example of using the ins tag might be to show document revisions:

<!-- Before -->
<p>Some text about stuff.</p>

<!-- After -->
<p>Some text about stuff <ins>and things</ins>.</p>
Enter fullscreen mode Exit fullscreen mode

The del is the inverse of ins, it is used to symbolise text that was removed:

<p>Some text about stuff <del>and things</del>.</p>
Enter fullscreen mode Exit fullscreen mode

This tag is used all the time. A common example would be for discounted items on an ecommerce website:

<div class="price">
  <del class="full-price">$199.99</del>
  <span class="discount-price">$149.99</span>
</div>
Enter fullscreen mode Exit fullscreen mode

If you want to apply a visual strikethrough style to your content, use CSS:

<p>Joe is <span style="text-decoration: line-through;">cleaver</span> boy.</p>
Enter fullscreen mode Exit fullscreen mode

The cite tag is used to define the title of a creative work:

<cite>Animal Farm</cite> by George Orwell
Enter fullscreen mode Exit fullscreen mode

If you want to apply visual italic style, use CSS:

<span style="font-style: italic">italic</span>
Enter fullscreen mode Exit fullscreen mode

If you want to emphasise a particular portion of text, use em tag:

The emphasis should be on <em>this text</em>.
Enter fullscreen mode Exit fullscreen mode