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 and a bit of if you want it to look pretty. HTML CSS I have collected some of the most useful HTML tags and attributes, so you can study them and use them in your next project. I also created 12 separate , so you can get a live taste and play around with the examples. Codepens 🎨 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 , which would otherwise be a time-consuming task to write from scratch. <input type="color"> https://codepen.io/madarsbiss/pen/vYJBqeX 📚 Blockquote When writing articles you might want to highlight some of your favorites quotes. You can use a tag for that. Add some custom styling and you have a nice element that will stand out from the rest of the text. <blockquote> https://codepen.io/madarsbiss/pen/JjyPQBd 🎵 Audio Player Writing your own audio player from scratch can be a challenge. You can use the built-in tag, which provides the basic functionality to play your audio files. <audio> Also, you can listen to more of my music . here https://codepen.io/madarsbiss/pen/oNevrEb 📺 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 tag. <video> https://codepen.io/madarsbiss/pen/BadBgxJ 🔷 Accordion Sometimes you might want to hide some content and allow users to reveal it manually (to save the space of the viewport, for example). You can achieve the described functionality with pure HTML, thanks to tag. <details> https://codepen.io/madarsbiss/pen/zYdOVPV 📅 Date Picker Working with dates is among the most common reasons why devs search for external libraries. HTML provides a tag, which provides a nice UI with the option to select the dates by clicking on them. <input type="date"> https://codepen.io/madarsbiss/pen/qBXWzXE ⚪ Slider Slider is a common component to collect the user input in the specific numeric range. You can use to get a fully functional slider, where you can set the min, max, and current value. <input type="range"> https://codepen.io/madarsbiss/pen/GRvKbXv ✍ 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 attribute, that allows editing the content of the div, for example. contenteditable https://codepen.io/madarsbiss/pen/ExvYBwB 📷 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 tag, detect the viewport, and creating a method to switch between the images, you can use built-in tag. <img> <picture> https://codepen.io/madarsbiss/pen/abybomY ⌛ Progress Bar The tag represents the completion progress of a task. <progress> You can use it to display various actions, such as a download, file transfer, or installation. https://codepen.io/madarsbiss/pen/oNevKdp 🔻 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 in the dropdown. Using the tag will allow users to select options from dropdown, while also allowing to enter their own values. <datalist> https://codepen.io/madarsbiss/pen/eYEOwdQ 💭 Tooltip If you need to give a detailed description of something, it is always nice to include a popup. HTML built-in attribute provides that by default. title https://codepen.io/madarsbiss/pen/VwzwZvE In this article, we reviewed functional HTML elements that you can use while working with text, audio, images, video, etc. Next time you need some functionality, make sure to double-check if it is not already provided by the HTML itself. https://twitter.com/madzadev/status/1447623708571541506 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 , , and ! Twitter LinkedIn GitHub Also published on: https://dev.to/madza/12-simple-html-snippets-to-avoid-complex-libraries-3na8

CodePen

Mozilla

Twitter

18 Awesome Linux Themes For Your Inspiration 🎨😍

Level Up Your Front-End Game with These 8 Side-Project Ideas 🥇

Hire Me

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Music

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Product

Too Long; Didn't Read

12 Best Basic HTML Snippets to Use Instead of Complex Libraries

12 Best Basic HTML Snippets to Use Instead of Complex Libraries

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project 🎨✨

Building a movie app interface with Vue.js

Codepen Embeds Now Supported in 3.0 Editor

CSS3 Animation Step by Step Guide

Debugging My Love Life

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project 🎨✨

Building a movie app interface with Vue.js

Codepen Embeds Now Supported in 3.0 Editor

CSS3 Animation Step by Step Guide

Debugging My Love Life

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps