Soit la page HTML suivante correspondante au journal en ligne Le Fil (en cours de rédaction).

1
<!DOCTYPE html>
2
<html>
3
4
<head>
5
  <meta charset="utf-8"/>
6
  <title>Le Fil, le journal des étudiant·es de l'UTC</title>
7
</head>
8
9
<body>
10
11
<div id="header">
12
  <h1>Le Fil</h1>
13
</div>
14
15
<div id="menu">
16
  <ul>
17
    <li><a href="#actu">Actu</a></li>
18
    <li><a href="#BOP">BOP</a></li>
19
    <li><a href="#Jeux">Jeux</a></li>
20
  </ul>
21
</div>
22
23
<div class="content" id="actu">
24
  <h2>Actu</h2>
25
26
  <div class="post">
27
    <h3>Exams annulés</h3>
28
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit eros, consectetur et tortor quis, iaculis molestie elit. In sed finibus purus, ut scelerisque nulla.</p>
29
    <p>Nam hendrerit luctus purus blandit imperdiet. In viverra, justo vel vulputate mattis, tellus libero laoreet dolor, eu luctus augue elit vestibulum quam. Nulla ut massa iaculis, euismod leo sed, consectetur sapien. Nunc sollicitudin libero hendrerit vehicula congue.</p>
30
  </div>
31
32
  <div class="post">
33
    <h3>Fresque du climat</h3>
34
    <p>Nulla porttitor, massa non luctus consectetur, eros neque accumsan metus, a commodo nulla eros sed nibh. Sed in eros sed lacus scelerisque convallis. Aliquam in ultrices diam. Morbi id leo in sem porta euismod. Maecenas purus justo, egestas ut felis sit amet, tincidunt lobortis tellus.</p>
35
    <p>Praesent pellentesque scelerisque tristique.</p>
36
  </div>
37
38
</div>
39
40
<div class="content" id="bop">
41
  <h2>BOP</h2>
42
  <p>TODO</p>
43
</section>
44
45
<div class="content" id="jeux">
46
  <h2>Jeux</h2>
47
  <p>TODO</p>
48
</section>
49
50
<div id="footer">
51
  <p>Crédits : BDE — Licence Creative Commons BY-SA</p>
52
</div>
53
54
</body>
55
</html>
56

Question

Créer une page HTML5 utilisant les balises : header, nav, section, article, footer.

Solution

Solution en HTML5

1
<!DOCTYPE html>
2
<html>
3
4
<head>
5
  <meta charset="utf-8">
6
  <title>Le Fil, le journal des étudiant·es de l'UTC</title>
7
</head>
8
9
<body>
10
11
<header>
12
  <h1>Le Fil</h1>
13
</header>
14
15
<nav>
16
  <ul>
17
    <li><a href="#actu">Actu</a></li>
18
    <li><a href="#BOP">BOP</a></li>
19
    <li><a href="#Jeux">Jeux</a></li>
20
  </ul>
21
</nav>
22
23
<section id="actu">
24
  <h2>Actu</h2>
25
26
  <article>
27
    <h3>Exams annulés</h3>
28
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit eros, consectetur et tortor quis, iaculis molestie elit. In sed finibus purus, ut scelerisque nulla.</p>
29
    <p>Nam hendrerit luctus purus blandit imperdiet. In viverra, justo vel vulputate mattis, tellus libero laoreet dolor, eu luctus augue elit vestibulum quam. Nulla ut massa iaculis, euismod leo sed, consectetur sapien. Nunc sollicitudin libero hendrerit vehicula congue.</p>
30
  </article>
31
32
  <article>
33
    <h3>Fresque du climat</h3>
34
    <p>Nulla porttitor, massa non luctus consectetur, eros neque accumsan metus, a commodo nulla eros sed nibh. Sed in eros sed lacus scelerisque convallis. Aliquam in ultrices diam. Morbi id leo in sem porta euismod. Maecenas purus justo, egestas ut felis sit amet, tincidunt lobortis tellus.</p>
35
    <p>Praesent pellentesque scelerisque tristique.</p>
36
  </article>
37
38
</section>
39
40
<section id="bop">
41
  <h2>BOP</h2>
42
  <p>TODO</p>
43
</section>
44
45
<section id="jeux">
46
  <h2>Jeux</h2>
47
  <p>TODO</p>
48
</section>
49
50
<footer>
51
  <p>Crédits : BDE — Licence Creative Commons BY-SA</p>
52
</footer>
53
54
</body>
55
</html>
56