broken-links
)
No broken links (This hint checks and reports if any links in your page are broken.
This includes anchor tag href
value, image src
value,
script src
value, video src
value etc.
Why is this important?
Broken links gives your user a bad user experience.
What does the hint check?
This hint gets executed on all the below elements.
-
img
- checkssrc
andsrcset
attribute values -
script
- checks forsrc
attribute value -
anchor
- checks forhref
attribute value -
audio
- checks forsrc
attribute value -
video
- checks forsrc
andposter
attribute values -
source
- checks forsrc
attribute value -
object
- checks fordata
value attribute value -
link
- checks forsrc
attribute value -
track
- checks forsrc
attribute value
If the response status of the resource link is either 404
or 410
or 500
or 503
, the URL will be flagged as a broken link.
Can the hint be configured?
You can change the HTTP method to make the requests (HEAD
, GET
,
etc.). To do so, you need to configure the property method
in your
configuration .hintrc
file:
{
"connector": {...},
"formatters": [...],
"hints": {
"no-broken-links": ["error", {
"method": "GET|HEAD"
}],
...
},
...
}
By default, this hint will use the HTTP GET
method to request
the URLs.
Examples that trigger the hint
Absolute URL
<a href="https://example.com/404">Register</a>
<img src="https://example.com/image.png" alt="logo">
Relative URL
<a href="/page-does-not-exist">Profile</a>
<img src="/image_does_not_exist.png" alt="logo">
Examples that pass the hint
URLs which return 200 OK will pass this hint.
URLs requested via <link rel="dns-prefetch">
or <link rel="preconnect">
resource hints will
pass this hint if the request succeeds, regardless of status code.
How to use this hint?
This package is installed automatically by webhint:
npm install hint --save-dev
To use it, activate it via the .hintrc
configuration file:
{
"connector": {...},
"formatters": [...],
"hints": {
"no-broken-links": "error",
...
},
"parsers": [...],
...
}
Note: The recommended way of running webhint is as a devDependency
of
your project.