loading...
Cover image for Important HTML tags (part 2) πŸ’»πŸ–₯πŸ–±

Important HTML tags (part 2) πŸ’»πŸ–₯πŸ–±

johncornea profile image John Cornea ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Thanks for reading folks! 🧑

Discussion

pic
Editor guide
Collapse
aminnairi profile image
Amin

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>
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
johncornea profile image
John Cornea Author

Indeed, I almost forgot about this!

Thanks, Amin!

Collapse
alvaromontoro profile image
Alvaro Montoro

Acronym is obsolete and should not be used. Replace it with <abbr> better.

Collapse
johncornea profile image
John Cornea Author

Hi Alvaro,

Thanks for your point of view!

I always thought at the tag that is only used to define abbreviated words.

Tbh and tags seems pretty similar in this kind of situation.

Collapse
promikecoder2020 profile image
ProMikeCoder2020

Curious.... Never knew about these tags

Collapse
johncornea profile image
John Cornea Author

HTML has quite few interesting tricks ^^