> For the complete documentation index, see [llms.txt](https://cours.davidannebicque.fr/accessibilite-numerique/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cours.davidannebicque.fr/accessibilite-numerique/seance-2-s1-but-mmi.md).

# Séance 2 - S1 - BUT MMI

L'objectif de cette séance est d'apprendre à utiliser les bonnes balises HTML, pour produire un code de meilleure qualité, et plus accessible.

Nous verrons notamment les bons usages pour les images, les tableaux et les formulaires. Ainsi que le choix d'une structure de page adaptée au contenu.

{% hint style="info" %}
L'objectif de cette séance n'est pas de se focaliser sur le CSS, mais uniquement sur le code HTML.
{% endhint %}

## Images

![](/files/aodAOH0wOjB9MpQozWrT)

Reproduire cette mise en page (avec l'image de votre choix) en écrivant un code HTML juste et de qualité

```html
<figure>
        <img src="image.png" alt="Description de l'image">
        <figcaption>Fig.1 Légende de l'image</figcaption>
</figure>
    <!--
        on peut utiliser longdesc pour apporter une description plus longue de l'image
        l'alternative "alt" est obligatoire, même si elle est vide pour les images décoratives.
    -->
```

{% embed url="<https://www.w3schools.com/tags/tag_figcaption.asp>" %}
Extrait de la documentation sur W3Schools.com
{% endembed %}

## Tableaux

![](/files/1F7ViUeD7X3cp1cKLdy1)

Reproduire cette mise en page (avec les données de votre choix) en écrivant un code HTML juste et de qualité.

```html
<table>
    <caption>Légende de mon tableau</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3"></th>
            <th</th>
        </tr>
    </tfoot>
</table>
```

{% embed url="<https://www.w3schools.com/tags/tag_table.asp>" %}
Extrait de la documentation de W3Schools sur les tables
{% endembed %}

{% embed url="<https://www.w3schools.com/tags/tag_caption.asp>" %}
Extrait de la documentation de W3Schools sur Caption
{% endembed %}

## Listes

![](/files/3HL7xUjgo80qoFpToCu7)

Reproduire cette mise en page (avec les données de votre choix) en écrivant un code HTML juste et de qualité.

```html
<dl>
    <dt>Processeur</dt>
    <dd>Intel i7</dd>
    <dt>Mémoire Ram</dt>
    <dd>16Go</dd>
    <dt>Carte Graphique</dt>
    <dd>Radeon xxxx</dd>
</dl>
```

{% embed url="<https://www.w3schools.com/tags/tag_dl.asp>" %}
Extrait de la documentation pour les listes "dl"
{% endembed %}

## Formulaires

![](/files/EisMmFKjWYCS9VL66A3q)

Reproduire cette mise en page (avec les données de votre choix) en écrivant un code HTML juste et de qualité.

```html
<form action="/action_page.php" method="post">
  <fieldset>
    <legend>Votre identité</legend>
    <label for="fname">Prénom :</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Nom :</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br>
    <label for="datenaissance">Date de naissance :</label><br>
    <input type="date" id="datenaissance" name="datenaissance"><br>
  </fieldset>

  <fieldset>
      <legend>Votre Adresse</legend>
      <label for="numero">N° :</label><br>
      <input type="text" id="numero" name="numero"><br>
      <label for="rue">Rue :</label><br>
      <input type="text" id="rue" name="rue"><br>
      <label for="codepostal">Code postal :</label><br>
      <input type="integer" id="codepostal" name="codepostal"><br>
      <label for="ville">Ville :</label><br>
      <input type="text" id="ville" name="ville"><br>
    </fieldset>

  <input type="submit" value="Submit">
</form>
```

{% embed url="<https://www.w3schools.com/tags/tag_fieldset.asp>" %}
Extrait de la documentation pour la balise "fieldset"
{% endembed %}

{% embed url="<https://www.w3schools.com/tags/tag_input.asp>" %}
Extrait de la documentation pour les champs "input"
{% endembed %}

### Quelques ressources

{% embed url="<https://www.smashingmagazine.com/2019/01/html5-input-types#a5>" %}

{% embed url="<https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1>" %}

{% embed url="<https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2>" %}

{% embed url="<https://uicookies.com/beautiful-css-forms>" %}

## Page complète

![Page 1](/files/c9KywPL6TSzKD5PDs1sA) ![Page 2](/files/sq8QdhHl9LzAqjxeLjD7)

Pour les pages ci-dessus, quelles balises utiliseriez vous pour définir la structure globale ?