DEV Community

Cover image for 12 Simple HTML Snippets To Avoid Complex Libraries ⚡✨
Madza
Madza

Posted on

12 Simple HTML Snippets To Avoid Complex Libraries ⚡✨

Not knowing the basic tech can sometimes increase the size, affect the performance and add an extra layer of complexity to the project.

This article is a heads up that you can do a lot with just vanilla HTML and a bit of CSS if you want it to look pretty.

I have collected some of the most useful HTML tags and attributes, so you can study them and use in your next project.

I also created 12 separate Codepens, so you can get a live taste and play around with the examples.

🎨 Color Picker

Often in the developer workflow you might want to access the color spectrum and be able to pick up any shade from it.

You can use <input type="color">, which would otherwise be a time-consuming task to write from scratch.

📚 Blockquote

When writing articles you might want to highlight some of your favorites quotes.

You can use a <blockquote> tag for that. Add some custom styling and you have a nice element that will stand out from the rest of the text.

🎵 Audio Player

Writing your own audio player from scratch can be a challenge. You can use the built-in <audio> tag, that provides the basic functionality to play your audio files.

Also, you can listen to more of my music here.

📺 Video Player

Another multimedia you could use in your projects is video. Again, you can not just include the video link in HTML and hope that it will play.

To playback videos properly you can use built-in <video> tag.

🔷 Accordion

Sometimes you might want to hide some content and allow user to reveal it manually (to save the space of the viewport, for example).

You can achieve the described functionality with pure HTML, thanks to <details> tag.

📅 Date Picker

Working with dates is among the most common reasons why devs search for external libraries.

HTML provides a <input type="date"> tag, that provides a nice UI with the option to select the dates by clicking on them.

⚪ Slider

Slider is a common component to collect the user input in the specific numeric range.

You can use <input type="range"> to get a fully functional slider, where you can set the min, max and current value.

✍ Content Editor

In order to edit content you don't have to use input or textarea fields and set the default values for them.

Instead, you can use contenteditable attribute, that allow to edit the content of the div, for example.

📷 Picture Tag

You might want to display different images on different screen sizes to improve the performance and UI/UX.

Instead of using the default <img> tag, detect the viewport and creating a method to switch between the images, you can use built-in <picture> tag.

⌛ Progress Bar

The <progress> tag represents the completion progress of a task.

You can use it to display various actions, such as a download, file transfer, or installation.

🔻 Dropdown

Often you might need to collect the user input with multiple possible choices. Instead of listing all the options on the screen, you might include them into dropdown.

Using the <datalist> tag will allow users to select options from dropdown, while also allowing to enter their own values.

💭 Tooltip

If you need to give a detailed description of something, it is always nice to include a pop up.

HTML built-in title attribute provides that by default.

In this article we reviewed functional HTML elements that you can use while working with text, audio, images, video, etc.

Next time you need the some functionality, make sure to double check if it is not already provided by the HTML itself.


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!

Check out my portfolio for all projects.

Discussion (35)

Collapse
officialiqtest profile image
Official IQ Test

👏👏👏

Collapse
madza profile image
Madza Author

Thanks a lot! 😉 Means a world 🙏❤

Collapse
andrewpierno profile image
Andrew Pierno

This is a solid tutorial, Madza!
Would you be interested in writing some tutorials for our companies? Happy to pay!
You can either DM me on twitter at twitter.com/AndrewPierno or fill out this little airtable form airtable.com/shrN6S3NMZ7oxRXTt.

Collapse
madza profile image
Madza Author

Thanks for reading and kind words, means a lot 🙏❤
For work related topics please contact me via my email 😉👍

Collapse
andrewpierno profile image
Andrew Pierno

On it, Madza!

Collapse
madza profile image
Madza Author

Thanks a lot for the kind words 🙏❤
Also nice suggestion to improve the UX 😉

Collapse
lsparlin profile image
Lewis Sparlin

Really nice article! I definitely prefer to use as much pure HTML as possible before attempting to import outside javascript libs. I did not know about contenteditable!

Collapse
madza profile image
Madza Author

Thanks a lot for the kind words, means a ton 🙏❤

Collapse
justaguyfrombr profile image
Just a guy

Thanks! i didnt knew the accordion one.

Collapse
madza profile image
Madza Author

You are welcome ❤🙏

Collapse
iceorfiresite profile image
Ice or Fire

Very informative! Thanks

Collapse
madza profile image
Madza Author

Happy you liked them 🙏❤

Collapse
daugh2020 profile image
Daugh2020

Love it!!

Collapse
madza profile image
Madza Author

Thank you so much 🙏❤

Collapse
daugh2020 profile image
Daugh2020

Thanks @madza . wondering are these components accessible?

Thread Thread
madza profile image
Madza Author

Sure you can access them in Codepen 😉

Collapse
thomasbnt profile image
Thomas Bnt

👍🏼🔥

Collapse
madza profile image
Madza Author

Thanks for checking them out 🙏❤

Collapse
sairamnagothu profile image
SairamNagothu

Nice article.. <3

Collapse
madza profile image
Madza Author

Thanks so much 🙏💖

Collapse
ksengine profile image
Kavindu Santhusa

Not bugs, but some notes:

  • you can paste any rich text in contenteditable element.
  • Tooltip is not working on touch screens
Collapse
madza profile image
Madza Author

Thanks for the feedback, should look into it 👍😉

Collapse
arsalan0974 profile image
arsalan0974

Share another snippets like this.

Collapse
madza profile image
Madza Author

I might do another series in the future 😉👍

Collapse
arsalan0974 profile image
arsalan0974

Thank you so much

Collapse
madza profile image
Madza Author

You are welcome 🙏❤

Collapse
wahyu9kdl profile image
Ahmad Wahyudi

Tanks you.

I'm creat Html code via blog.

Aw Project awprojectphp.000webhostapp.com/ALH...

Product Simple alhikmah.my.id/p/mp3-al-quran.html

Collapse
madza profile image
Madza Author

Thanks for the read 🙏❤

Collapse
ashfaak profile image
AshfaqueBlathur

Add user select property with value none, for not be able to select, to see the tooltip in mobile devices

Collapse
madza profile image
Madza Author • Edited on

Thanks for the reccmendation 🙏❤

Collapse
muhammad_junaid_691b89352 profile image
Muhammad Junaid

Great one. Thanks

Collapse
madza profile image
Madza Author

Means a lot 🙏❤

Collapse
jessedavi profile image
JesseDavi

The JavaScript snippet collection contains a wide variety of ES6 helper functions best tantrik in Rajkot

Collapse
amk profile image
Amran AL Ketara

Wow!
Nice article bro, you're the best!