Master 1 - mention Audiovisuel, Médias Interactifs Numériques, et Jeux - parcours Direction de Projets Numériques

Ressources utiles

Chaque ressource ci-dessous aborde une facette complémentaire de la conception numérique : HTML & CSS.
Vous pouvez les parcourir dans l’ordre proposé ou selon vos besoins du moment.

Voir toutes les ressources
RESSOURCES UTILES

Usages des techniques numériques :
- HTML balises & attributs -

INTERMÉDIAIRE

Description

L‘HTML (HyperText Markup Language) est le langage qui définit la structure, la hiérarchie et le sens du contenu d’une page web.
Il repose sur un système de balises (pour structurer le document) et d’attributs (pour préciser un comportement, un rôle ou une information supplémentaire).
Chaque balise HTML a une fonction précise :

  1. structurer le texte,
  2. organiser les sections,
  3. afficher des médias,
  4. construire des formulaires,
  5. enrichir l’accessibilité via ARIA,
  6. décrire la page et ses métadonnées.

L’HTML est la base de toute interface web : une page bien codée est plus claire, plus accessible, mieux référencée et plus facile à mettre en forme avec le CSS.

Objectifs pédagogiques

  • Comprendre la structure d’un document HTML : Identifier les grands types de balises, leur rôle dans l’architecture du document et la manière dont elles organisent le contenu.
  • Maîtriser les familles de balises et leurs usages : Savoir distinguer et utiliser les balises de structure, de section, de texte, de média, de tableau, de formulaire et de modèle.
  • Utiliser les attributs pour préciser comportement, sens et accessibilité : Intégrer les attributs globaux, les attributs spécifiques et comprendre leur contribution à la clarté, l’accessibilité et l’interactivité d’une page.
  • Produire un HTML propre, lisible et cohérent : Appliquer les bonnes pratiques de nommage, d’imbrication, de hiérarchie et d’organisation afin d’obtenir un code maintenable et compatible avec le CSS et les outils modernes.
  • Préparer efficacement la mise en forme et le développement : Structurer la page de manière à faciliter la stylisation, le responsive, l’intégration dans un CMS ou un framework, et le travail collaboratif.

Sommaire

  1. Attributs ARIA → améliorer l’accessibilité et exprimer les états
  2. Attributs globaux → configurer comportement, style, langue et identification
  3. Formulaires → créer des interfaces de saisie complètes
  4. Groupement → structurer blocs, définitions et séparations
  5. Interactifs → créer interactions natives sans JavaScript
  6. Médias → afficher images, vidéos, sons et objets intégrés
  7. Métadonnées → gérer ressources, scripts et informations du document
  8. Sections → organiser le contenu et la hiérarchie logique
  9. Structure → définir l’ossature du document HTML
  10. Tableaux → représenter données tabulaires
  11. Templates → utiliser DOM avancé et Shadow DOM
  12. Texte (inline) → enrichir et structurer du texte en ligne
  13. Événements → réagir aux interactions utilisateur

1. HTML balises & attributs

1. Attributs ARIA 

  1. aria-checked
  2. aria-describedby
  3. aria-expanded
  4. aria-hidden
  5. aria-label
  6. aria-labelledby
  7. role

2. Attributs globaux

  1. accesskey
  2. autocapitalize
  3. class
  4. contenteditable
  5. dir
  6. draggable
  7. enterkeyhint
  8. hidden
  9. id
  10. inert
  11. is
  12. lang
  13. slot
  14. spellcheck
  15. style
  16. tabindex
  17. title
  18. translate

3. Formulaires

  1. <button>
  2. <datalist>
  3. <fieldset>
  4. <form>
  5. <input>
  6. <label>
  7. <legend>
  8. <meter>
  9. <optgroup>
  10. <option>
  11. <output>
  12. <progress>
  13. <select>
  14. <textarea>

4. Groupement

  1. <blockquote>
  2. <dd>
  3. <div>
  4. <dl>
  5. <dt>
  6. <figcaption>
  7. <figure>
  8. <hr>
  9. <li>
  10. <ol>
  11. <p>
  12. <pre>
  13. <ul>

5. Interactifs

  1. <details>
  2. <dialog>
  3. <summary>

6. Médias

  1. <area>
  2. <audio>
  3. <canvas>
  4. <embed>
  5. <iframe>
  6. <img>
  7. <map>
  8. <object>
  9. <picture>
  10. <source>
  11. <track>
  12. <video>

7. Métadonnées

  1. <base>
  2. <link>
  3. <meta>
  4. <script>
  5. <style>
  6. <title>

8. Sections

  1. <article>
  2. <aside>
  3. <footer>
  4. <h1> → <h6>
  5. <header>
  6. <main>
  7. <nav>
  8. <section>

9. Structure

  1. <!DOCTYPE html>
  2. <body>
  3. <head>
  4. <html>

10. Tableaux

  1. <caption>
  2. <col>
  3. <colgroup>
  4. <table>
  5. <tbody>
  6. <td>
  7. <tfoot>
  8. <th>
  9. <thead>
  10. <tr>

11. Templates

  1. <slot>
  2. <template>

12. Texte (inline)

  1. <a>
  2. <abbr>
  3. <b>
  4. <br>
  5. <cite>
  6. <code>
  7. <dfn>
  8. <em>
  9. <i>
  10. <kbd>
  11. <mark>
  12. <q>
  13. <s>
  14. <samp>
  15. <small>
  16. <span>
  17. <strong>
  18. <sub>
  19. <sup>
  20. <time>
  21. <u>
  22. <var>
  23. <wbr>

13. Événements

  1. onclick, onchange, onfocus, onblur, oninput, onkeydown, onkeyup, onload, onsubmit…
Télécharger la ressource