DevWonders

Insert/Delete

The ins tag represents a range of text that has been added to a document. Similarly you can use the del element to represent a range of text that has been deleted from the document. No CSS required!

                            
                                
                                    “I am
                                    inevitable
                                    Iron Man!"
                                
                            
                        

Meter

The meter tag allows you to display a scalar value within a given range, meaning you don't have to go styling a div and hack your way around with javascript

                            
                                Fuel level: 0%
                                
                            
                        

Required

A Boolean attribute that makes a input field mandatory, meaning users must fill it out before they can submit the form. No JavaScript required!

                            
                                

                                    
                                    
                                        Login
                                    
                                
                            
                        

Suggestions

Use the datalist tag to suggest values for an input when the user is typing. To make the options appear, we give it a unique ID, and then add the list attribute to the input element with the same ID as value. It also works on mobile

Optgroup

The optgroup tag creates a grouping of options within a select element.

                            
                                
                                    
                                        United Kingdom
                                        Germany
                                        Italy
                                    
                                    
                                        Brazil
                                        Mexico
                                        United States
                                    
                                
                            
                        

Tooltip

The title attribute provides additional information about an element. This information is typically displayed as a tooltip text when the mouse hovers over the element.

                            
                                Hover Me
                            
                        

BaseURL

If you have various links that point to the same website, and they all start with the same base address, you can define this tag in the head section to simplify and make your links more readable

Dialog

To build a dialog from scratch it was pratically the norm to use some divs as backdrops/modals and some css/javascript hacks to get the job done. It always felt way harder than it needed to be.

This is a newer HTML element specifically designed for creating modal dialogs. It offers a more modern and semantic approach and has built-in accessibility features and javascript methods to show or hide itself. It also eliminate the need for divs as backdrops as it has it's own css pseudo-element

                            
                                

                                    
Hey, a native dialog with just a few lines!
                                    Close
                                
                                Open Dialog
                            
                        

Popover

Similarly to the dialog, a new element recently added is the popover, it's still in experiment support. Think of it as the dialog element's little cousin, specializing in quick bursts of information rather than full-blown modal experiences. No more need to write javascript or tricky css using :focus-within