Красивые штуки на чистом html

pureHTML.html

<!--
  Ползунок https://developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range 
  Кастомизация HTML5 progress element https://habr.com/ru/post/266895/
-->
<p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume"
         min="0" max="11">
  <label for="volume">Volume</label>
</div>

<div>
  <input type="range" id="cowbell" name="cowbell" 
         min="0" max="100" value="90" step="10">
  <label for="cowbell">Cowbell</label>
</div>

<!-- Аккардеон https://developer.mozilla.org/ru/docs/Web/HTML/Element/details -->
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<!-- Селект с поиском по значениям https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist -->
<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<!-- Прогресс бар http://htmlbook.ru/html/progress -->
<progress max="100" value="25">
  Загружено на <span id="value">25</span>%
</progress>

<!-- Маленький калькулятор с тэгом output (инлайн js) https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_output -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50">
  +<input type="number" id="b" value="25">
  =<output name="x" for="a b"></output>
</form>

<!-- Аббревиатура -->
<abbr title="Garage Door Opener">GDO</abbr>

<!-- Цитата -->
<blockquote>
  Нельзя сказать человеку: «Ты можешь творить. 
  Так давай, твори». Гораздо вернее подождать, пока он 
  сам не скажет: «Я могу творить, и я буду творить, хотите 
  вы этого или нет».
  <cite>Сайт писателя <a href="http://www.asimovonline.com">asimovonline.com</a></cite>
</blockquote>