STRI1A-InterfaceWeb/index.html at master · Upssinet/STRI1A-InterfaceWeb · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>WebPlatform Docs by Arthur & Antonin</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>

  <body>
    <header>
      <!-- Barre noir en haut -->
      <section id="top-head">
        <div class="container">
          <div class="logo">
            <img src="./img/logo.svg" alt="Logo de WebPlatform" />
          </div>
        </div>
      </section>

      <!-- Barre de navigation -->
      <nav>
        <div class="container links">
          <a href="https://webplatform.github.io/" class="active">The Docs</a>
          <a href="https://webplatform.github.io/docs/Community">Connect</a>
          <a href="https://webplatform.github.io/docs/WPD/Contributors_Guide/"
            >Contribute</a
          >
          <a href="https://webplatform.github.io/blog/">Blog</a>
        </div>
      </nav>
    </header>

    <section id="main" class="container">
      <h1>HTML lists</h1>

      <!-- Summary -->
      <h2 id="Summary">Summary</h2>
      <p>
        This article introduces the three list types in HTML and explores their
        basic features.
      </p>

      <!-- Introduction -->
      <h2 id="Introduction">Introduction</h2>
      <p>
        Lists are used to group together related pieces of information so they
        are clearly associated with each other and easy to read. In modern web
        development, lists are workhorse elements, frequently used for
        navigation as well as general content.
      </p>
      <p>
        Lists are good from a structural point of view as they help create a
        well-structured, more accessible, easy-to-maintain document. They are
        also useful because they provide specialized elements to which you can
        attach CSS styles. Finally, semantically correct lists help visitors
        read your web site, and they simplify maintenance when your pages need
        to be updated.
      </p>

      <!-- The tree list Types-->
      <h2 id="The-three-list-types">The three list types</h2>
      <p>There are three list types in HTML:</p>
      <ul>
        <li>
          <strong>unordered list</strong> — used to group a set of related items
          in no particular order
        </li>
        <li>
          <strong>ordered list</strong> — used to group a set of related items
          in a specific order
        </li>
        <li>
          <strong>description list</strong> — used to display name/value pairs
          such as terms and definitions
        </li>
      </ul>
      <p>Each list type has a specific purpose and meaning in a web page.</p>

      <!-- Unordered lists -->
      <h3 id="Unordered-lists">Unordered lists</h3>
      <p>
        <em>Unordered</em> (bulleted) lists are used when a set of items can be
        placed in any order. An example is a shopping list:
      </p>
      <ul>
        <li>milk</li>
        <li>bread</li>
        <li>butter</li>
        <li>coffee beans</li>
      </ul>
      <p>
        Although the items are all part of one list, you could put the items in
        any order and the list would still make sense:
      </p>
      <ul>
        <li>bread</li>
        <li>coffee beans</li>
        <li>milk</li>
        <li>butter</li>
      </ul>
      <p>
        You can use CSS to change the bullet to one of several default styles,
        use your own image, or even display the list without bullets — we’ll
        look at how to do that in the
        <a href="/docs/guides/Styling_lists_and_links"
          >Styling lists and links</a
        >
        article.
      </p>
    </section>
  </body>
</html>