- Published at
- Updated at
- Reading time
Today I saw a tweet by the FrontEnd Dude, and it was a real gem.
It turns out that the web has built-in "refresh functionality"!
refresh HTTP response header tells the browser to refresh a page after a defined time.
HTTP/1.x 200 OK ... Refresh: 10
You define the time interval in seconds. To refresh a page after five minutes, define
300. If desired you can even lead the user to a different URL after the time passed.
HTTP/1.x 200 OK ... Refresh: 10;url=https://example.com
HTTP headers and the Section titled HTTP headers and the `meta` element
If you can't (or don't want to) set HTTP headers in your environment, you can use a
meta element, too. The
http-equiv attribute allows to define values that are define via HTTP headers like
refresh right in your HTML.
<!-- refresh page after 60 seconds --> <meta http-equiv="Refresh" content="60"> <!-- refresh and redirect to https://example.com after 60 seconds --> <meta http-equiv="Refresh" content="60;https://example.com">
If you want to learn more about the
refresh header and meta element, I recommend giving Daniel Steinberg's article (the maintainer of
curl) a read. His post includes the mind-boggling statistic that 4% of page loads include the refresh meta element. Wow!
Edit: But before using this feature, make sure that an automatic refresh is not making content inaccessible. Julie Moynat pointed out, that it's best to provide a way to disable automatic refreshing. Have a look at the WCAG document "Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page" to learn more.
- Email inputs can accept multiple email addresses
- A picture element to load correctly resized webp images in HTML
- Radio buttons, checkbox and the question when to use what
- Inputs of type date support min, max and step attributes