Aya Bouchiha

Posted on Jul 14, 2021 • Edited on Jul 22, 2021

5 HTML Tags That Almost Nobody Knows

#html #webdev #100daysofcode #javascript

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>

Output:

You can change the yellow color like this:

<mark style="background-color:green">highlighted</mark>

Output:

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

Output:

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

Output:

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

Output:

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

Output:

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)

Mario Golik • Jul 15 '21

Never heard about "var" in html ! Nice curiosity 😉👍

Aya Bouchiha • Jul 15 '21

Thank you a lot @mariog8 🙏✨

Mario Golik • Jul 15 '21

Not at all ! Aya 😎It is my pleasure.

Aya Bouchiha • Jul 15 '21

Have a great day!

Elena • Jul 15 '21

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

Aya Bouchiha • Jul 15 '21

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

Alex Standiford • Jul 15 '21

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>

Aya Bouchiha • Jul 15 '21

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!

DB • Jul 21 '21 • Edited

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

Luke Inglis • Jul 15 '21

'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.

Aya Bouchiha • Jul 15 '21 • Edited

I appreciate your feedback @ludamillion 🙏
I will try to write better titles.
Have a great day

Luke Inglis • Jul 15 '21

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.

Aya Bouchiha • Jul 15 '21 • 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!