trivago tech tips - #4 HTML Edition

Five fun, quick, and easy ways to improve your HTML skills

It’s HTML week in our #trvtechtips series – a new series where we're focusing on one technology per week and sharing a daily tip or learning with you. We’re adding a new tip for you every day, so watch this space 🤖

Tip #1

If you wish to change the keyboard layout that is shown when a user clicks on an input element, but don't want to change input's type at the same time, we have the inputmode attribute here to help us provide our users with a better experience on their mobile devices.

Accessible Code:

<input type="text" inputmode="numeric" />

---

Tip #2

Want to have a nice accordion-like behaviour e.g. for an FAQ section? Without a single line of JS or CSS? Here we go with the semantic <details> element.

Accessible Code:

<details>
  <summary>Hotel?</summary>
  <p>trivago!</p>
</details>

<details>
  <summary>Good deals?</summary>
  <p>trivago!</p>
</details>

---

Tip #3

Native lazy loading is a “thing” now, as of July 8! Use  <img loading="lazy"> (don’t ship this to production yet, some browsers are still catching up). 

Accessible Code:

<img loading="lazy" src="trivi.jpg">

---

Tip #4

Always add an alt attribute to an img that explains the contents of the image. If the image is decorative only, add alt="" as this will inform tools such as screen readers that it can be ignored.

Accessible Code:

<img src="black_dog.jpg" alt="A black dog sitting on the floor">

<img src="hotel.jpg" alt="">

---

Tip #5

Need a loading bar or an easy to set up progress bar for multi-step interactions? Make use of the native <progress /> element int HTML.

Accessible Code:

<progress value="75" max="100" />

The progress bar can also be styled and customized! ✨
More info in this thorough article on CSS tricks.

---

We hope you enjoyed our 5 tips for HTML – keep an eye out for new tips for other technologies coming soon 👀

#trvtechtips