References

Beginner-friendly references for web development, with live, editable examples.

The HTML blocking attribute

Attribute Updated
Quick answer

The HTML blocking attribute marks the resource as render-blocking until it is processed. It is used on the <script>, <link> and <style> elements.

Overview

The blocking attribute marks the resource as render-blocking until it is processed. It applies to the <script>, <link> and <style> elements.

It lets you explicitly hold first paint until a critical resource loads — the opposite of async/defer. Use it only for genuinely render-critical assets; it is a newer attribute still rolling out.

Syntax

<script blocking="render" src="critical.js"></script>

Values

Value
render

Best practices

  • Declare the character encoding with <meta charset="utf-8"> first in the <head>.
  • Load scripts with defer (or as modules) so they do not block parsing.
  • Protect third-party resources with integrity and crossorigin (Subresource Integrity).
  • Use resource hints like preload deliberately, paired with the right as value.

Frequently asked questions

What does the blocking attribute do?
Marks a resource as render-blocking.
Where do head attributes apply?
On the metadata elements in the <head> — <meta>, <link>, <script> and <base>.
What is the difference between async and defer?
async runs a script as soon as it loads in no set order; defer runs scripts in order after the document is parsed.
Which elements use the blocking attribute?
It is an element-specific attribute, used on document head elements like <meta>, <link> and <script>.
autoplay buffered