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)
Never heard about "var" in html ! Nice curiosity 😉👍
Thank you a lot @mariog8 🙏✨
Not at all ! Aya 😎It is my pleasure.
Have a great day!
datawhich can store values with<data value="5">five</data>.details + summaryprogresswhich you can also use a loaderThank you so much for the information, Probably, I will create a new post with the same idea as this one.
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!
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!
Well, if today's web developers don't know the
<noscript>tag, things are worse than I thought.'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.
I appreciate your feedback @ludamillion 🙏
I will try to write better titles.
Have a great day
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.
noscriptis an important one to know about and thetime,address, andmarkare definitely underused.markis my go-to for highlighting things like search results.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!
mark, that's a new one for me
Happy to hear that you learned a new thing😊
Var tag was new to me.
Me too, I have just read about it yesterday.
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)
😯😯😯😯
Thank you for the information!
😯😯😯😯
Nice
POST.There is a new tag called
<thank-you>, see the example below.🤣
Thanks god!
I already know all of them!
😁😁
Mark and var is my first time know about it.. Thanks
My pleasure 😁
Thanks, I didn't know about <mark>, definitely will be using this for the search results in my applications.
My pleasure !
Have an amazing day!
I knew every one of them except the "time" tag.
Good!😁
Thanks Aya !
I didn't know about these tags !
Btw, i am also from Morocco 😄
You're welcome.
You contact me in telegram
Have a nice day!
This actually surprised me, what a great article!
Glad to hear that, Thank you a lot.
Have an amazing day!
Already knew about address : p
😁