DEV Community

Dima Prohorenko
Dima Prohorenko

Posted on

Awesome HTML tags and attributes

In this post I'm gonna share with you some cool html tags and attributes.

  • The title attribute specifies extra information about an element.The information is most often shown as a tooltip text when the mouse moves over the element.
<p title="I'm a tooltip">I have a tooltip</p>
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • mark tag - everything wrapped between opening and closing brackets will be highlighted. The presence of the mark element is not announced by most screen reading technology in its default configuration. Here's a good post on how to fix it.
<p>This is a <mark>paragraph</mark></p>
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • HTML contenteditable attribute indicates if the content should be editable by the user.
<p contenteditable>Write your name here</p>
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • The meter element is used to display a gauge. The meter element should not be used to indicate progress (as in a progress bar). For progress bars, use the progress tag.
<h4>Disk usage</h4>

    <div>
        <label for="disk-c">C:</label>
    <meter id="disk-c" value="0.6"></meter>
    </div>

    <div>
    <label for="disk-d">D:</label>
    <meter id="dist-d" min="10" max="50" value="40"></meter>
    </div>
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • base tag specifies the base URL and/or target for all relative URLs in a document. There can only be one single base element in a document, and it must be inside the head element.
<head>
    <base href="https://example.com/">
</head>

<img src="images/example.svg" alt="">
Enter fullscreen mode Exit fullscreen mode

That's it, hope you've found some usefull info here. Stay safe and have a great day :)

Top comments (31)

Collapse
 
arvindsridharan profile image
arvindsridharan

Is it supported by all browsers.

Collapse
 
sasscrafter profile image
Dima Prohorenko

Yep, except meter is not supported in ie and Iā€™m not sure about contenteditable here is a mdn article about it.

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

It seems so...

Collapse
 
seriouslee13 profile image
SeriousLee13

That's pretty nifty. Never heard of any of these til today.

Collapse
 
sasscrafter profile image
Dima Prohorenko

Glad I helped you learn something new )

Collapse
 
dorothy_gr42490 profile image
Dorothy A. Green

Do you like streaming movies and TV shows on your mobile? Download TeaTV App Now!

Collapse
 
jae profile image
Jae Beojkkoch

I did not know about the title="I'm a tooltip" attribute, thanks for sharing :)

Collapse
 
sasscrafter profile image
Dima Prohorenko

Learned it today as well;)

Collapse
 
cdthomp1 profile image
Cameron Thompson

The Content Editable attribute is going to be super helpful, thanks!

Collapse
 
sasscrafter profile image
Dima Prohorenko

Glad to help;)

Collapse
 
dorothy_gr42490 profile image
Dorothy A. Green

Do you like watching anime series on your mobile? Download 9anime app now!

Collapse
 
billraymond profile image
Bill Raymond

Wait, meter? Thatā€™s great! Thanks for that!

Collapse
 
dorothy_gr42490 profile image
Dorothy A. Green • Edited

Does anyone wants to make money playing games? Download Teen Patti Real Cash Game now!

Collapse
 
sasscrafter profile image
Dima Prohorenko

Yep, no problem :)

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

<base> seems pretty handy! Thank you!

Collapse
 
sasscrafter profile image
Dima Prohorenko

No problem )

Collapse
 
dorothy_gr42490 profile image
Dorothy A. Green • Edited

What a fantastic post about HTML tags and attributes! šŸŒŸ Your clear explanations and examples of various elements like the title attribute, mark tag, contenteditable attribute, and meter element are incredibly helpful. The insights you provide are like a toolbox for web development. By the way, if you're ever in need of tutorials for enhancing your web skills, TubeMate, a renowned video downloading application, can be your go-to resource. Keep up the excellent work and continue sharing your valuable insights! šŸ‘šŸ‘

Collapse
 
ranvirchoudhary profile image
RanvirChoudhary

Nice! i always wondered how to add those tooltips
useful!

Collapse
 
sasscrafter profile image
Dima Prohorenko

Glad I helped.

Collapse
 
cmereoiu profile image
cmereoiu

Thank you so much for this article.

Collapse
 
sasscrafter profile image
Dima Prohorenko

No problem, glad to help;)

Collapse
 
heehoo14 profile image
Diki Taurens Sia

Amazing post. Thanks a lot for share with us.

Collapse
 
sasscrafter profile image
Dima Prohorenko

šŸ˜Š