DEV Community

Cover image for 5 HTML Tags That Almost Nobody Knows
Aya Bouchiha
Aya Bouchiha

Posted on • Updated on

5 HTML Tags That Almost Nobody Knows

hello everyone, I'm Aya Bouchiha, today, I will talk about 5 HTML tags that almost nobody knows.

<mark>

<mark> is a tag used to highlight or mark a part of a text. This tag supports all HTML global attributes, the default color is black with a yellow background color.

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <p>
            in this paragraph, there is a text
            <!-- 
                by default => (
                    color: black;                
                    background-color: yellow;
                )
             -->
            <mark>highlighted</mark>
        </p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

mark HTML tag Aya Bouchiha

You can change the yellow color like this:

<mark style="background-color:green">highlighted</mark>
Enter fullscreen mode Exit fullscreen mode

Output:

mark HTML tag Aya Bouchiha

<address>

<address> is a tag that displays the contact information like email and phone number of the author of a document or an article, additionally, it supports all Html global attributes.

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <address>
            Posted by
            <a href="https://t.me/AyaBouchiha"> Aya Bouchiha </a>
            <br />
            Email Address:
            <a href="mailto:developer.aya.b@gmail.com">
                developer.aya.b@gmail.com
            </a>
            <br />
            Phone Number:
            <a href="tel:+212600000000">+212600000000 </a>
            <br />
            Morocco, Azemmour
        </address>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:
Aya Bouchiha html tags address

<noscript>

<noscript>: this tag can be inside a head or body tag, it displays alternate HTML content if the script type is not supported or if the browser has scripting disabled. if not the tag will not display the alternate HTML. But you have to be careful, <noscript> tag sometimes impacts the SEO due to writing the same sentence on every page of your website... solutions & more details.

<!DOCTYPE html>
<html>
    <body>
        <script>
            alert("javascript is supported in your browser :)");
        </script>
        <noscript> Javascript is not supported in your browser :( </noscript>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

noscript HTML tag Aya Bouchiha

<time>

<time>: represents a specific period in time. It may include the datetime attribute to translate dates into a machine-readable format, allowing for better search engine results or custom features such as reminders. (supports all global HTML attributes) more details...

<html>
    <head></head>
    <body>
        <p>
            The next meeting will be held on 
            <time datetime="2021-11-25">
                Nov 25
            </time>
            in Rabat
        </p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

time HTML tag Aya Bouchiha

<var>

<var>: supports all HTML global attributes and indicates the name of mathematical variables such as x and y, by default its text content is italic.

<html>
    <head></head>
    <body>
        <div>
            <!--
                by default (
                    var {
                        font-style: italic;
                    }
                )
            -->
            <p>Ex:1 solve this equation:</p>
            <var>4x</var> + <var>2y</var> = 12
        </div>
    </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Output:

var HTML tag Aya Bouchiha

Summary

<mark>: for highlighting text.

<address>: for showing contact informtation.

<noscript>: for displaying alternate HTML content if the browser does not support scripting.

<time>: representing a specific period in time.

<var>: for indicating mathematical variables like x & y.

Happy coding!
#day_32

Top comments (50)

Collapse
 
mariog8 profile image
Mario Golik

Never heard about "var" in html ! Nice curiosity πŸ˜‰πŸ‘

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Thank you a lot @mariog8 πŸ™βœ¨

Collapse
 
mariog8 profile image
Mario Golik

Not at all ! Aya 😎It is my pleasure.

Thread Thread
 
ayabouchiha profile image
Aya Bouchiha

Have a great day!

Collapse
 
violet profile image
Elena
  • I would also add to that data which can store values with <data value="5">five</data>.
  • There's also details + summary
  • The progress which you can also use a loader
Collapse
 
ayabouchiha profile image
Aya Bouchiha

Thank you so much for the information, Probably, I will create a new post with the same idea as this one.

Collapse
 
alexstandiford profile image
Alex Standiford

One that I use all the time that doesn't get enough love - The definition list

These things don't seem to ever get any love, and there's so many circumstances in-which they are the best syntax for the job.

Ironically enough - the Summary section of this post is a perfect opportunity to use it!

<dl>
    <dh>Summary</dh>
    <dt>&lt;mark&gt;</dt>
    <dd>for highlighting text.</dd>
    <dt>&lt;address&gt;</dt>
    <dd>for showing contact information.</dd>
    <dt>&lt;noscript&gt;</dt>
    <dd>for displaying alternate HTML content if the browser does not support scripting.</dd>
    <dt>&lt;time&gt;</dt>
    <dd>representing a specific period in time.</dd>
    <dt>&lt;var&gt;</dt>
    <dd>for indicating mathematical variables like x & y.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ayabouchiha profile image
Aya Bouchiha

Thank you so much for the information, perhaps, I will create another post with the same idea as this post. I will not forget to add the definition list in the next one!
Have an amazing day!

Collapse
 
dominikbraun profile image
DB • Edited

Well, if today's web developers don't know the <noscript> tag, things are worse than I thought.

Collapse
 
ludamillion profile image
Luke Inglis

'Almost nobody' might be an exaggeration but it's nice to see this type of post featuring tags that are actually not very well known.

Collapse
 
ayabouchiha profile image
Aya Bouchiha • Edited

I appreciate your feedback @ludamillion πŸ™
I will try to write better titles.
Have a great day

Collapse
 
ludamillion profile image
Luke Inglis

I'm not trying to be critical. There are just an awful lot of rather click bait titles on Dev these days. I almost didn't click on yours. The content is spot on thought. noscript is an important one to know about and the time, address, and mark are definitely underused. mark is my go-to for highlighting things like search results.

Thread Thread
 
ayabouchiha profile image
Aya Bouchiha • Edited

thanks for the feedback, just I share what I learned, and I liked the idea of using them instead of repeating the div tag every time.
Thank you a lot for your feedback, I will try to post better content.
Have a nice day!

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

mark, that's a new one for me

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Happy to hear that you learned a new thing😊

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Var tag was new to me.

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Me too, I have just read about it yesterday.

Collapse
 
alohci profile image
Nicholas Stimpson

In some ways it's odd that it's so little known as it's one of the oldest tags in HTML. It's at least 28 years old. (see page 26)

Thread Thread
 
ayabouchiha profile image
Aya Bouchiha

😯😯😯😯
Thank you for the information!
😯😯😯😯

Collapse
 
posandu profile image
Posandu

Nice P O S T.
There is a new tag called <thank-you>, see the example below.

<thank-you message="Nice Post" />
Enter fullscreen mode Exit fullscreen mode

🀣

Collapse
 
ayabouchiha profile image
Aya Bouchiha
<comment content="thank you a lot" />
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ats1999 profile image
Rahul kumar

Thanks god!
I already know all of them!

Collapse
 
ayabouchiha profile image
Aya Bouchiha

😁😁

Collapse
 
masedi profile image
Edi Septriyanto

Mark and var is my first time know about it.. Thanks

Collapse
 
ayabouchiha profile image
Aya Bouchiha

My pleasure 😁

Collapse
 
kwnj profile image
Jeff • Edited

Thanks, I didn't know about <mark>, definitely will be using this for the search results in my applications.

Collapse
 
ayabouchiha profile image
Aya Bouchiha

My pleasure !
Have an amazing day!

Collapse
 
sohamkakkar profile image
Soham-Kakkar

I knew every one of them except the "time" tag.

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Good!😁

Collapse
 
midouwebdev profile image
MidouWebDev

Thanks Aya !
I didn't know about these tags !
Btw, i am also from Morocco πŸ˜„

Collapse
 
ayabouchiha profile image
Aya Bouchiha

You're welcome.
You contact me in telegram
Have a nice day!

Collapse
 
beyarz profile image
Beyar

This actually surprised me, what a great article!

Collapse
 
ayabouchiha profile image
Aya Bouchiha • Edited

Glad to hear that, Thank you a lot.
Have an amazing day!

Collapse
 
vighneshnilajakar profile image
Vighnesh Nilajakar

Already knew about address : p

Collapse
 
ayabouchiha profile image
Aya Bouchiha

😁