HTML can do that?

Sep 21, 2023

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">

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 value="CSS">
    <option value="JavaScript">
    <option value="Java">
</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">