DEV Community

loading...
Cover image for 5 HTML Tags That Almost Nobody Knows

5 HTML Tags That Almost Nobody Knows

Aya Bouchiha
Full stack web developer
・Updated on ・3 min read

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

Discussion (50)

Collapse
mariog8 profile image
Mario Golik

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

Collapse
ayabouchiha profile image
Aya Bouchiha Author

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 Author

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 Author

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 Author

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
Dominik Braun • 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 Author • 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 Author • 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 Author

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 Author

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 Author

😯😯😯😯
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 Author
<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 Author

😁😁

Collapse
masedi profile image
Edi Septriyanto

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

Collapse
ayabouchiha profile image
Aya Bouchiha Author

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 Author

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 Author

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 Author

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 Author • 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 Author

😁

Collapse
sheeraz1022 profile image
sheeraz1022

Thanks a lot for sharing these bite sized learnings.

Collapse
ayabouchiha profile image
Aya Bouchiha Author

You're always welcome !

Collapse
aatmaj profile image
Aatmaj

Excellent! ✨

Collapse
ayabouchiha profile image
Aya Bouchiha Author

Thank you!

Collapse
alecbsherman profile image
Alec

Nice article!

Collapse
ayabouchiha profile image
Aya Bouchiha Author

Thank you Alec, Have an amazing day!

Collapse
itsmnthn profile image
Manthankumar Satani

Learn new tag

Collapse
ayabouchiha profile image
Aya Bouchiha Author

Glad to hear that! 😁

Collapse
kalashin1 profile image
Kinanee Samson

var and mark are new to me.. Thanks for the heads up

Collapse
ayabouchiha profile image
Aya Bouchiha Author

You're always welcome !

Collapse
rel555 profile image
rel555

How are they in terms of security?

Collapse
tsadarsh profile image
Adarsh TS

Really insightful. Thank you for sharing.

Collapse
ayabouchiha profile image
Aya Bouchiha Author

My pleasure 😊

Collapse
fadihijazi98 profile image
Fadi Hijazi • Edited

var & noscript are new to me.
Thanks ..

Collapse
ayabouchiha profile image
Aya Bouchiha Author

It's my pleasure 😁