DEV Community

Cover image for HTML can do that?
Ananya Neogi
Ananya Neogi

Posted on

HTML can do that?

After witnessing some awesome things CSS can do, it's time for HTML to come in the same spotlight!

It's amazing that you can do so much with just HTML.

1. Dropdown with searchable text


2. Dialog box


3. Measuring progress

Styling this is not an easy task, I agree! But there's always some workaround and it's nicely explained here - How to style progress element


4. Expand/collapse details


5. Show correct mobile keypad based on input type


6. Add a simple colour picker


7. Highlight text


8. Create a direct phone number link

Similar to email link with mailto we can also create a direct phone number link.

<a href="tel:+917272727272">+91-7272727272</a>
Enter fullscreen mode Exit fullscreen mode

9. Show deletion and insertion of text


10. Edit page contents

Wish to make your own browser editor? You can do that too - How to make browser editor with html.


Note: Not all browsers have implemented these elements and attributes. But we can still use these today with progressive enhancements! 🙂

HTML is the foundation of any webpage, it's only wise to pay real good attention to it. Semantic markup not only helps in SEO but also helps in accessibility.

If you've come across any such cool thing HTML is capable of, please mention below 😀


In other news, I made a silly project : https://hp-ipsum.netlify.com

Follow me on twitter @_ananyaneogi to get more tidbits 😊

Top comments (147)

Collapse
 
theodesp profile image
Theofanis Despoudis • Edited

Help!😱 The Dropdown is chasing me!

Dropdown

Collapse
 
karlkras profile image
Karl Krasnowsky

Yeah, but given no additional Javascript it's still pretty cool.

Collapse
 
smaximov profile image
Sergei Maximov

You can make dropdowns chase you without Javascript?! Count me impressed!

Thread Thread
 
karlkras profile image
Karl Krasnowsky

🤣

Collapse
 
babrown93 profile image
Bill

DontUseAMac

...

Nice post, I already knew all of those except for the one about dialogues, newcomers will definitely find this useful.

Collapse
 
n1ru4l profile image
Laurin Quast

On mobile Safari 1,2 and 6 is not working 😕

Thread Thread
 
krushndayshmookh profile image
Krushn Dayshmookh

Nothing works on safari 😂

Collapse
 
agronick profile image
Kyle Agronick

Dialog only works in Chrome based browsers. Firefox doesn't support it without enabling an option.

Thread Thread
 
petedermott profile image
Pete Dermott

Seems to work fine for me on 67.0.4

Collapse
 
originalankit profile image
OriginalAnkit

Same here 😥

Collapse
 
mafee6 profile image
MAFEE7

Bug

Collapse
 
rodolfoferro profile image
Rodolfo Ferro

Yeah, the Dropdown can do that. :P

Collapse
 
murroughfoley profile image
Murrough Foley

Made me smille

Collapse
 
szaszroland profile image
szasz.roland

I have no dropdown here.

Collapse
 
claudepache profile image
Claude Pache

If you've come across any such cool thing HTML is capable of, please mention below 😀

My preferred one. On desktop:

rendering of date picker in FF

On mobile:

rendering on Safari on iPhone

Source code:

<h1>Date picker</h1>

<label>Choose a date: <input type="date"></label>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joao611 profile image
João Esteves

Unfortunately, it only looks this good in Firefox. Also doesn't seem to handle foreign localizations well, as is the case with Portuguese:

Collapse
 
claudepache profile image
Claude Pache

Also doesn't seem to handle foreign localizations well, as is the case with Portuguese

It works fine for me for the few languages I’ve tested. That seems particular to your locale. You should report the bug here: bugzilla.mozilla.org

Collapse
 
masteryder profile image
João Filipe Ventura Coelho

The problem is it is still not supported by Safari and some other browsers...

Collapse
 
dserodio profile image
Daniel Serodio

Safari is the new IE

Collapse
 
ananyaneogi profile image
Ananya Neogi

This is great! 😀

Collapse
 
tuncatunc profile image
tuncatunc

I’ve struggled to find a date time picker of my material ui react application. It’s best native (built-in) input methods for portability and simplicity

Collapse
 
vbagmut profile image
Vyacheslav Bagmut

How well is it customizable?

Collapse
 
ozzyogkush profile image
Derek Rosenzweig

Nice, the datalist is one I'll have to definitely look at. The frontend team at my job is building out a new set of components for our apps, including various dropdown/filterable elements. Same with details.

Collapse
 
stephanie profile image
Stephanie Handsteiner

I was thinking the same, although you'd still need some kind of JavaScript fallback for older browsers, even for the datalist one. Safari for example is supporting that since 12.1. (macOS) and 12.2. (iOS) only.

Collapse
 
ozzyogkush profile image
Derek Rosenzweig

thankfully we only have to support latest FF, Chrome, and soon Edge. i'm ok with that.

Collapse
 
atomicwrites profile image
David Castro

I found this when trying to make a searchable drop-down, and it's almost perfect except I couldn't make it show all options when it first recieves focus. So annoying.

Collapse
 
ozzyogkush profile image
Derek Rosenzweig

if you were trying in firefox i think there's a known issue around that. caniuse.com may have some info on that

Collapse
 
ratacibernetica profile image
Martín Roldán Araujo

Great post, shame some of these features are not supported on major browsers.
Don't forget to visit caniuse.com/ before attempting to implement one of these features.

Collapse
 
claudepache profile image
Claude Pache • Edited

But we can still use these today with progressive enhancements! 🙂

... but only after you have carefully tested nonsupporting browsers. ⚠️

The “dialog” example looks very bad on latest stable Safari (12.1):

(dialog mixed over content)

but that can be fixed with proper CSS (although I’ve tested it only superficially):

dialog {
    background: white;
    border: medium solid black;
    padding: 1em;
}
dialog:not([open]) {
      display: none !important;
}

At this point, I would still test IE and Edge before using it.

Collapse
 
maxart2501 profile image
Massimo Artizzu

There's a polyfill for those, although Edge will arguably gain support as soon as it switches to Chromium.

Collapse
 
ashleemboyer profile image
Ashlee (she/her)

This post is magical, thank you!! 😭

Collapse
 
fischgeek profile image
fischgeek

In regards to your "silly project" I too have something similar. When I type potteripsum on my keyboard, it spits out

Leviosa protego arania quietus ennervate lumos morsmordre serpensortia protego nox scourgify. Aparecium petrificus oblivious serpensortia arania portus wingardium ennervate. Imperturbable apparate pepperup totalus petrificus riddikulus. Jinx homorphus finite legilimens hover. Impedimenta serpensortia mobilicorpus nox totalus imperio peskipiksi mortis momentum. Expecto mobilarbus protego locomotor nox apparate aresto mobilicorpus. Totalus colloportus alohomora patronum funnunculus ennervate petrificus engorgio legilimens babbling.
Immobilus protego peskipiksi totalus stupefy totalus densaugeo incarcerous confundus. Impedimenta ennervate sonorus incendio impedimenta aparecium evanesca aparecium locomotor wingardium. Alohomora aparecium amortentia ennervate mobilicorpus patronum. Momentum immobulus mortis protean flagrate. Serpensortia impedimenta leviosa avis tarantallegra orchideous protego.
Aresto petrificus imperius aparecium immobilus concealment.

Nice collection of HTML functionality!

Collapse
 
karlkras profile image
Karl Krasnowsky

And virtually none of these are supported by ie. When will that crap of a browser just go away?

Collapse
 
hakimio profile image
Tomas Rimkus

With 5% worldwide market share (around 2% decrease since last year) and not getting any real updates for around 6 years, you might as well just show "upgrade your browser" page to the elderly people still using IE.

Collapse
 
karlkras profile image
Karl Krasnowsky

yeah, but you (well at least our company) has to code around these "elderly people" still using IE.

Collapse
 
triptych profile image
Andrew Wooldridge

IE is moving to Chromium soon, so it will quickly get back in sync with modern browsers.

Collapse
 
karlkras profile image
Karl Krasnowsky

but there is (as far as I know) no mandate to force users to stop using current versions of IE. Heck, there are still companies using Windows 7. We'll see a small, but very vocal ie user base that refuse to give up this piece of trash for a long time yet.
Unless a company can take a stand that they will no longer support it (which I have proposed to my management), it will continue to be a thorn in our side for a long time.

Collapse
 
quii profile image
Chris James

I learned about datalist 1-2 years ago and it still blows my mind. I think it comes from many horrible years of fudging it with JS

Great post

Collapse
 
loilo profile image
Florian Reuschel

Not sure if I'll ever encounter a use case for it, but deletion and insertion are pretty rad, didn't know that thing exists. 👍

However, I'd suggest adding text-decoration-skip-ink: none to the <ins> CSS, otherwise macOS font rendering will butcher some of the wavy underlines:

Screenshot of wavy underline below the word "begin", the underline is interrupted by the rather wide "g" glyph which looks inappropriate

Collapse
 
ananyaneogi profile image
Ananya Neogi

That's a great point! I've updated the demo with text-decoration-skip-ink: none 🙂

Collapse
 
ibasilk profile image
Basil K

thank you!

Collapse
 
dan503 profile image
Daniel Tonon

If you've come across any such cool thing HTML is capable of, please mention below 😀

<input type="time"/>

Makes entering time values consistent and also easier on mobile.

I built a polyfill for it as well so that there is no reason not to use it 😁
dan503.github.io/time-input-polyfill/

Collapse
 
johnfound profile image
johnfound

Well, the dialog box will not work without JS, so it can't be considered pure HTML solution.

On the other hand, combining checkbox with some CSS, the same behavior can be implemented without JS at all.

Collapse
 
simonewebdesign profile image
Simone Vittori

I love this series of posts, they're really helpful. I shared this one on Twitter before even realizing it mentioned my work on a contenteditable browser editor. Haha, that was a nice surprise. Thanks for sharing with us!

Collapse
 
ananyaneogi profile image
Ananya Neogi

Thanks!
Your browser editor post was really cool! 🙂

Collapse
 
rhymes profile image
rhymes

Definitely didn't know about datalist, thanks!!

Collapse
 
ardhityawiedhairawan profile image
Ardhitya Wiedha Irawan

Dropdown is awesome.
How to handle dropdown with different data between value and text?
example :

<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>

Some comments may only be visible to logged-in visitors. Sign in to view all comments.