Important HTML tags (part 2) 💻🖥🖱

#html #tutorial #webdev

Hello all, here you have part two of Important HTML Tags. If you have not checked the first part yet, I invite you to do it here. 🧡

What is HTML and why do we need it?

HTML (Hypertext Markup Language) is a standard markup language used to build web pages. You can define the structure of the web page with HTML.

This article will cover the other 5 important HTML tags that are very important and every Developer should know.

1️⃣ HTML `<noscript>` tag

The HTML <noscript> tag renders the content inside this tag, only when the browser has the JavaScript is disabled.

<noscript style="color:orange;"><h2>JavaScript is awesome!</h2></noscript>

In case of failure this tag provides a fallback option for the components that will stop working in case where JavaScript is disabled.

2️⃣ HTML `<figure>` tag

This HTML tag allows us to mark up a photo.

The tag can contain also a secondary tag

<figure><img src="https://i.imgur.com/RONOgLf.jpg" alt="JavaScript" style="width:100%">
  <figcaption style="color:orange;">Fig.1 - OPP Programming</figcaption>
</figure>

3️⃣ `Contenteditable` attribute

This HTML attribute tells us whether the content of an element is editable or not.

<p contenteditable="true" style="color:orange;">You can edit this paragraph.</p>

4️⃣ HTML `<acronym>` tag

This tag defines an explanation of a group of words, for example HTML. When you hover the mouse pointer over the text with the <acronym> tag active, a small box will appear with the text that you’ve written within the title tag.

<acronym title="HyperText Markup Language" style="color:orange;"> HTML</acronym>

5️⃣ HTML `<ins>` and `<del>` tags

As the name says, the tags <ins> shows what has been added to the document with a horizontal underline and <del> shows what has been removed from the document with a strikethrough.

JavaScript is a <del style="color:orange;">boring</del> <ins style="color:lightblue;">AWESOME</ins> programming language.

Thanks for reading folks! 🧡

Top comments (7)

Amin • Nov 22 '20

Hi John and thanks for your article.

Just to add more information about the <noscript> tag, it can be styled from an external stylesheet or just a <style> tag in the <head> one.

<!DOCTYPE html>
<html>
  <head>
    <style>
      noscript > h1 {
        text-align: center;
        font-family: sans-serif;
        color: lightgrey;
      }
      noscript > p {
        text-align: center;
        font-family: monospace;
        color: black;
      }
    </style>
  </head>
  <body>
    <noscript>
      <h1>Styled</h1>
      <p>Also styled, with more text.</p>
    </noscript>
  </body>
</html>

Adding the noscript selector to prevent clashing with other tags is also a good practice in this case.

This tag is often used and added by default when using frameworks like Vue, Angular and React since they heavily rely on the JavaScript engine being enabled in the browser.