Was teaching HTML to some early career developers and created a bunch of Codepen demos to explain how far HTML has come through and bunch of tasks that we can now do with just HTML.
Accordion
This is a very common component we use for FAQ, know more sections. We generally use Javascript to manage the state of open and close but instead we can use <details> and <summary> elements.
<details>
<summary>What is HTML?</summary>
<p>
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the
meaning and structure of web content.
</p>
</details>Date Picker
Date pickers require a bunch of state management and a complex component to built. HTML now provides us out of the box, DatePicker using <input> with type="date".
<input type="date" />Dropdown Select
A Select component with a pre-defined options, using a combination of <datalist> and <input> element we can create a select component which provides search for the options.
<input type="text" list="languages" placeholder="e.g. JavaScript" />
<datalist id="languages">
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
<option value="Java"></option>
</datalist>Color Picker
HTML has an input element which allows user to pick a color. Can be used for a plethora of things where picking colors from user is needed.
<input type="color" />Progress Element
Progress element to depict progress in terms on value. Useful depict progress of a task, upload/download status or your skills on our resume as the below example.
<progress max="100" value="60"></progress>