-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlist-of-articles.html
148 lines (140 loc) · 4.07 KB
/
list-of-articles.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<title>A List of Articles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="How to represent a list of articles">
<link href="joy.css" rel="stylesheet">
</head>
<body>
<a href="./index.html">List of all Examples</a>
<h1>A List of Articles</h1>
<nav aria-labelledby="toc-label">
<span id="toc-label" aria-hidden="true">Table of Contents</span>
<ul>
<li><a href="#one-article-after-another">One Article after Another</a></li>
<li><a href="#a-list-of-articles">A list of articles</a></li>
</ul>
</nav>
In many different types of websites we want to show a list of different
entries and be able to navigate through these entries.
For simple entries, it would probably be sufficient to use a normal HTML list,
but for more complicated entries, we can use the HTML article element.
<section>
<h2 id="one-article-after-another">One Article after Another</h2>
<p>
This example lists out one article after another in the HTML document,
without wrapping it in any other HTML elements.
The buttons in this example are currently dummy buttons which represent
actions that a user might want to make,
but do not currently provide any functionality.
</p>
<article>
<h3>A New Pair of Shoes</h3>
<div class="group" aria-labelledby="price1">
<h4 id="price1">Price</h4>
$14.99
</div>
<div class="group" aria-labelledby="discount1">
<h4 id="discount1">Discount</h4>
15%
</div>
<footer>
<button type="button">Order now</button>
</footer>
</article>
<article>
<h3>A Beautiful Sweatshirt</h3>
<div class="group" aria-labelledby="price2">
<h4 id="price2">Price</h4>
$14.00
</div>
<div class="group" aria-labelledby="discount2">
<h4 id="discount2">Discount</h4>
9%
</div>
<footer>
<button type="button">Order now</button>
</footer>
</article>
<article>
<h3>A brand new Smartphone</h3>
<div class="group" aria-labelledby="price3">
<h4 id="price3">Price</h4>
$199.99
</div>
<div class="group" aria-labelledby="discount3">
<h4 id="discount3">Discount</h4>
9%
</div>
<footer>
<button type="button">Order now</button>
</footer>
</article>
</section>
<section>
<h2 id="a-list-of-articles">A list of articles</h2>
<p>
This example lists out one article after another in the HTML document,
but wraps the list of articles in an HTML list.
This gives additional context information to a screenreader,
so the user can tell how many articles are currently listed on the page.
The buttons in this example are currently dummy buttons which represent
actions that a user might want to make,
but do not currently provide any functionality.
</p>
<ul>
<li>
<article>
<h3>A New Pair of Shoes</h3>
<div class="group" aria-labelledby="price4">
<h4 id="price4">Price</h4>
$14.99
</div>
<div class="group" aria-labelledby="discount4">
<h4 id="discount4">Discount</h4>
15%
</div>
<footer>
<button type="button">Order now</button>
</footer>
</article>
</li>
<li>
<article>
<h3>A Beautiful Sweatshirt</h3>
<div class="group" aria-labelledby="price5">
<h4 id="price5">Price</h4>
$9.99
</div>
<div class="group" aria-labelledby="discount5">
<h4 id="discount5">Discount</h4>
9%
</div>
<footer>
<button type="button">Order now</button>
</footer>
</article>
</li>
<li>
<article>
<h3>A brand new Smartphone</h3>
<div class="group" aria-labelledby="price6">
<h4 id="price6">Price</h4>
$199.99
</div>
<div class="group" aria-labelledby="discount6">
<h4 id="discount6">Discount</h4>
9%
</div>
<footer>
<button type="button">Order now</button>
</footer>
</article>
</li>
</ul>
</section>
</body>
</html>