Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

Today I saw a tweet by the FrontEnd Dude, and it was a real gem.

How often did you build a page that had to refresh itself after a given amount of time? Yeah, okay... maybe not that often, but I went for a JavaScript solution when I did.

It turns out that the web has built-in "refresh functionality"!

The 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 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 content-security-policy, content-type, default-style, x-ua-compatible and 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.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 11 days ago.

Related Topics

Related Articles