DEV Community

loading...

Awesome HTML tags and attributes

sasscrafter profile image Dima Prohorenko ・2 min read

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

Discussion (27)

pic
Editor guide
Collapse
arvindsridharan profile image
arvindsridharan

Is it supported by all browsers.

Collapse
sasscrafter profile image
Dima Prohorenko Author

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
Nikhil M Warrier

It seems so...

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 Author

Learned it today as well;)

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

<base> seems pretty handy! Thank you!

Collapse
sasscrafter profile image
Collapse
seriouslee13 profile image
SeriousLee13

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

Collapse
sasscrafter profile image
Dima Prohorenko Author

Glad I helped you learn something new )

Collapse
billraymond profile image
Bill Raymond

Wait, meter? That’s great! Thanks for that!

Collapse
sasscrafter profile image
Dima Prohorenko Author

Yep, no problem :)

Collapse
firmwarexb profile image
FirmwareX BD

Amazing post. Thanks a lot for share with us. firmwarexbd

Collapse
sasscrafter profile image
Dima Prohorenko Author

No problem mate;)

Collapse
cmereoiu profile image
cmereoiu

Thank you so much for this article.

Collapse
sasscrafter profile image
Dima Prohorenko Author

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
Collapse
jwenjian profile image
Collapse
cdthomp1 profile image
Cameron Thompson

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

Collapse
sasscrafter profile image
Dima Prohorenko Author

Glad to help;)

Collapse
muhyilmaz profile image
MUHAMMED YILMAZ

I like meter. I see this first time

Collapse
ranvirchoudhary profile image
RanvirChoudhary

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

Collapse
sasscrafter profile image
Dima Prohorenko Author

Glad I helped.

Collapse
simbafs profile image
Simba-Fs

I love this, helpful

Collapse
sasscrafter profile image
Collapse
alvarohmartinez profile image
Álvaro Martinez • Edited

Amazing post. Thanks a lot for share with us.

Collapse
sasscrafter profile image
Dima Prohorenko Author

Thanks a lot bro)