DEV Community

loading...

5 HTML tags you should consider using more often

nikitahl profile image Nikita Hlopov ・2 min read

When writing HTML developers often use common tags like div, section, p, span and that's ok.

But to give your markup more meaning (make it more semantic) I suggest you start using following tags more often. So instead of plain old divs and spans try:

1. address

Use this tag whenever you need to wrap the contact information or a contact address.

<address>
  150 Deansgate,<br>
  Manchester M3 3EH,<br>
  United Kingdom
</address>

This tag may also include:

any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. - MDN

2. del

To mark the content that has been deleted from the document use del. This element comes with the default strike-through styling.

One of the most common uses for this element I found to be is displaying prices.

<p>
  The item is sold out <del>19.95$</del>
</p>

Often this element can be seen along side its counterpart ...

3. ins

It is used to show that the content has been added to the document instead.

Again nice example with prices, ins is the new price here:

<p>
  The item is on sale only <ins>9.95$</ins> <del>19.95$</del>
</p>

4. small

This tag is used to define side-comments and small print. The contents of the small tag is usually have smaller font-size style by default. One of the uses is to wrap copyright or legal text in the footer.

<footer>
  <p>Yoursitename</p>
  <small>Copyright © 2019</small>
</footer>

5. time

Finally this tag is used to display specific time or date. Often time tag comes along with the datetime attribute which indicates the time and/or date.

Often is used to display published post date and time.

<p>
  Published on <time datetime="2019-11-27T00:30">November 27, 2019</time>.
</p>

Discussion

pic
Editor guide
Collapse
aydrian profile image
Aydrian

Thanks for this. I just went and implemented the time tag on one of my sites. 👍

Collapse
yujiri8 profile image
Ryan Westlund

Nice! I can stop using class="small" on my website, and del is also good to know about.

Collapse
chegior profile image
Chedro Cardenas

This is an excellent reminder of writting languages with attention to detail

Collapse
ctrleffive profile image
Chandu J S

This is awesome. I'll start using these on my website itself.