Demo of different types of heading links

For testing issues raised in this blog post: Make headings with links appear in Safari Reader View by Lee Reamsnyder

Raised as a bug here: https://bugs.webkit.org/show_bug.cgi?id=225609.

Heading 2

The above header is implemented as the following:

<h2 id="heading2"><a href="heading2">Heading 2</a></h2>

Interestingly Safari 14.1 doesn't show this heading in Reader mode! (MacOS BigSur 11.3.1 and iOS 14.5.1)

Sometimes for this pattern, Safari reader mode will show the heading, but not as a link (look at the h1 heading as an example!)

Heading 3

The above header is implemented as the following:

<a href="heading3"><h2 id="heading3">Heading 3</h2></a>

Interestingly Safari 14.1 does show it as a link in Reader mode - even though it's basically the same as the first test case but with the header and anchor elements interchanged.

Heading 4

The above header is implemented as the following:

<h2 id="heading4"><a href="heading4"><span>Heading 4</span></a></h2>

Interestingly Safari 14.1 does show it as a link in Reader mode - even though it's the same as test case 1 but with an extra pointless span! However, unlike the second test case, it removes the fact it's a link.

Some lorem ipsum to make the page long enough to trigger reader mdoe support in iOS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.