jscholes.github.io/headinglevelstart.html at master · jscholes/jscholes.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Heading Level Start</title>
		<script src="https://unpkg.com/headinglevelstart-polyfill@latest/index.js"></script>
	</head>
	<body>
		<h1>Heading Level Start</h1>
		<p>This page is a test of <a href="https://github.com/muan/headinglevelstart-polyfill">muan/headinglevelstart-polyfill</a>.</p>
		<h2>Latest Posts</h2>
		<div headinglevelstart="3">
			<section aria-labelledby="post1">
				<h1 id="post1">Hello World</h1>
				<p>The post title you just read is marked up as an h1.  However, because of the headinglevelstart attribute, it can take the semantic form of whatever heading level is appropriate in the given situation.  Here, it's an h3.  But on a dedicated posts archive page, it could be an h2, without having to change the mark-up of the post or post title.</p>
				<h2>Another Section</h2>
				<p>Same thing here.  The section heading is marked up as an h2, but it will be presented as an h4, because it is a child of the post heading which, in this context, is presented as an h3.</p>
			</section>
		</div>
	</body>
</html>