HTML can do that? - DEV Community 👩‍💻👨‍💻

<div data-article-id="128505" id="article-body" itemprop="articleBody" readability="74.821401657875">
<p>After witnessing some <a href="https://dev.to/ananyaneogi/css-can-do-that-18g7" style="color: inherit; text-decoration: none;" name="readabilityLink-1">awesome things CSS can do</a><a href="#readabilityFootnoteLink-1" class="readability-DoNotFootnote" style="color: inherit;"><small>^[1]</small></a>, it's time for HTML to come in the same spotlight!</p>

<p>It's amazing that you can do so much with <em>just</em> HTML.</p>

<h2>
<a name="1-dropdown-with-searchable-text" href="#1-dropdown-with-searchable-text" class="anchor">
</a>
1. Dropdown with searchable text
</h2>

<hr/><h2>
<a name="2-dialog-box" href="#2-dialog-box" class="anchor">
</a>
2. Dialog box
</h2>

<hr/><h2>
<a name="3-measuring-progress" href="#3-measuring-progress" class="anchor">
</a>
3. Measuring progress
</h2>

<p>Styling this is not an easy task, I agree! But there's always some workaround and it's nicely explained here - <a href="https://css-tricks.com/html5-progress-element/" style="color: inherit; text-decoration: none;" name="readabilityLink-2">How to style progress element</a><a href="#readabilityFootnoteLink-2" class="readability-DoNotFootnote" style="color: inherit;"><small>^[2]</small></a></p>

<hr/><h2>
<a name="4-expandcollapse-details" href="#4-expandcollapse-details" class="anchor">
</a>
4. Expand/collapse details
</h2>

<hr/><h2>
<a name="5-show-correct-mobile-keypad-based-on-input-type" href="#5-show-correct-mobile-keypad-based-on-input-type" class="anchor">
</a>
5. Show correct mobile keypad based on input type
</h2>

<hr/><h2>
<a name="6-add-a-simple-colour-picker" href="#6-add-a-simple-colour-picker" class="anchor">
</a>
6. Add a simple colour picker
</h2>

<hr/><h2>
<a name="7-highlight-text" href="#7-highlight-text" class="anchor">
</a>
7. Highlight text
</h2>

<hr/><h2>
<a name="8-create-a-direct-phone-number-link" href="#8-create-a-direct-phone-number-link" class="anchor">
</a>
8. Create a direct phone number link
</h2>

<p>Similar to email link with <code>mailto</code> we can also create a direct phone number link.</p>

<div class="highlight" readability="7"><pre class="highlight html"><code><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"tel:+917272727272"</span><span class="nt">&gt;</span>+91-7272727272<span class="nt">&lt;/a&gt;</span>
</code></pre></div>

<hr/><h2>
<a name="9-show-deletion-and-insertion-of-text" href="#9-show-deletion-and-insertion-of-text" class="anchor">
</a>
9. Show deletion and insertion of text
</h2>

<hr/><h2>
<a name="10-edit-page-contents" href="#10-edit-page-contents" class="anchor">
</a>
10. Edit page contents
</h2>

<p>Wish to make your own browser editor? You can do that too - <a href="https://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/" style="color: inherit; text-decoration: none;" name="readabilityLink-3">How to make browser editor with html.</a><a href="#readabilityFootnoteLink-3" class="readability-DoNotFootnote" style="color: inherit;"><small>^[3]</small></a></p>

<hr/><p><em>Note:</em> Not all browsers have implemented these elements and attributes. But we can still use these today with progressive enhancements! 🙂</p>

<p>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 <a href="https://dev.to/ananyaneogi/accessible-and-expressive-html-semantics-43h1" style="color: inherit; text-decoration: none;" name="readabilityLink-4">accessibility</a><a href="#readabilityFootnoteLink-4" class="readability-DoNotFootnote" style="color: inherit;"><small>^[4]</small></a>.</p>

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

<hr/><p>In other news, I made a silly project : <a href="https://hp-ipsum.netlify.com" style="color: inherit; text-decoration: none;" name="readabilityLink-5">https://hp-ipsum.netlify.com</a><a href="#readabilityFootnoteLink-5" class="readability-DoNotFootnote" style="color: inherit;"><small>^[5]</small></a></p>

<p>Follow me on twitter <a href="https://twitter.com/ananyaneogi" style="color: inherit; text-decoration: none;" name="readabilityLink-6">@ananyaneogi</a><a href="#readabilityFootnoteLink-6" class="readability-DoNotFootnote" style="color: inherit;"><small>^[6]</small></a> to get more tidbits 😊</p>

</div><div id="readability-footnotes"><h3>References</h3><ol id="readability-footnotes-list"><li><small>^{<a href="#readabilityLink-1" title="Jump to Link in Article">^</a>}</small> <a href="https://dev.to/ananyaneogi/css-can-do-that-18g7" name="readabilityFootnoteLink-1">awesome things CSS can do</a><small> (dev.to)</small></li><li><small>^{<a href="#readabilityLink-2" title="Jump to Link in Article">^</a>}</small> <a href="https://css-tricks.com/html5-progress-element/" name="readabilityFootnoteLink-2">How to style progress element</a><small> (css-tricks.com)</small></li><li><small>^{<a href="#readabilityLink-3" title="Jump to Link in Article">^</a>}</small> <a href="https://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/" name="readabilityFootnoteLink-3">How to make browser editor with html.</a><small> (www.simonewebdesign.it)</small></li><li><small>^{<a href="#readabilityLink-4" title="Jump to Link in Article">^</a>}</small> <a href="https://dev.to/ananyaneogi/accessible-and-expressive-html-semantics-43h1" name="readabilityFootnoteLink-4">accessibility</a><small> (dev.to)</small></li><li><small>^{<a href="#readabilityLink-5" title="Jump to Link in Article">^</a>}</small> <a href="https://hp-ipsum.netlify.com" name="readabilityFootnoteLink-5">https://hp-ipsum.netlify.com</a><small> (hp-ipsum.netlify.com)</small></li><li><small>^{<a href="#readabilityLink-6" title="Jump to Link in Article">^</a>}</small> <a href="https://twitter.com/ananyaneogi" name="readabilityFootnoteLink-6">@ananyaneogi</a><small> (twitter.com)</small></li></ol></div>