Skip to content

Instantly share code, notes, and snippets.

@OleksiyRudenko

OleksiyRudenko/HTML-bits.md

Last active February 22, 2021 06:27
Show Gist options
  • Save OleksiyRudenko/75b616f6dddb3a44fc55f128ee35ddf2 to your computer and use it in GitHub Desktop.
Save OleksiyRudenko/75b616f6dddb3a44fc55f128ee35ddf2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HTML-bits.md

Images

Lazy loading

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Adaptive image set

<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>

User Input

Input suggestions

<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
</datalist>

Links

Base href for incomplete url

<head>
  <base href="https://www.twitter.com/" target="_blank">
</head>
<body>
  <img src="elonmusk" alt="Elon Musk">
  <a href="BillGates">Bill Gate</a>
</body>

Misc

Auto-redirect

<meta http-equiv="refresh" content="4; URL='https://google.com' /> but do not use unless you really have to.

Sources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment