HTML, CSS & DOM

Avant de plonger dans React, rappelons les fondamentaux du développement web.

HTML - Structure

HTML (HyperText Markup Language) est un langage de balisage qui définit la structure d'une page web.

Balises essentielles

html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Ma page</title>
  </head>
  <body>
    <h1>Titre principal</h1>
    <p>Un paragraphe de texte.</p>
    <ul>
      <li>Élément de liste</li>
    </ul>
    <a href="/page">Lien</a>
    <button>Bouton</button>
  </body>
</html>

Pourquoi la sémantique HTML est importante

Utilisez des balises sémantiques (<header>, <nav>, <main>, <article>, <section>, <footer>) pour structurer votre contenu de manière significative.

3 raisons principales :

SEO (Search Engine Optimization) - Optimisation pour les moteurs de recherche (Google, Bing, etc.) pour améliorer le référencement naturel de votre site. À ne pas confondre avec le SEA (Search Engine Advertising) qui désigne la publicité payante sur les moteurs de recherche.
A11y (Accessibility) - Accessibilité numérique pour permettre aux personnes en situation de handicap d'utiliser votre site (lecteurs d'écran, navigation au clavier, etc.).
Maintenabilité - Code plus lisible et plus facile à comprendre pour les développeurs.

Quelle balise devriez-vous utiliser pour un bouton cliquable qui soumet un formulaire ?

CSS - Style

CSS (Cascading Style Sheets) définit l'apparence visuelle des éléments HTML.

Le terme "Cascading" (en cascade) signifie que les styles se superposent et s'héritent selon des règles de priorité. Quand plusieurs règles CSS ciblent le même élément, le navigateur applique celle qui a la spécificité la plus élevée.

Sélecteurs CSS

css

/* Sélecteur par balise */
h1 {
  color: #61DAFB;
  font-size: 2rem;
}

/* Sélecteur par classe */
.ma-classe {
  background-color: white;
  padding: 1rem;
}

/* Sélecteur par ID */
#mon-id {
  margin: 0 auto;
}

/* Sélecteurs combinés */
nav a.active {
  font-weight: bold;
}

Quel sélecteur est le plus spécifique ?

Aller plus loin

Pour approfondir vos connaissances en CSS (sélecteurs avancés, pseudo-classes, combinateurs, etc.), consultez la page Annexe CSS.

Vous y trouverez des exemples détaillés et des cas d'usage pratiques.

JavaScript et le DOM

Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est une interface de programmation qui représente votre page HTML comme un arbre d'objets que JavaScript peut manipuler.

Comment ça fonctionne ?

Le navigateur parse (analyse) votre code HTML
Il crée une structure en arbre où chaque balise devient un nœud
JavaScript peut accéder, modifier, ajouter ou supprimer ces nœuds

document (racine)
  └─ html
      ├─ head
      │   └─ title
      └─ body
          ├─ header
          ├─ main
          │   ├─ section
          │   └─ article
          └─ footer

Aperçu rapide : Sélection et manipulation

Voici quelques opérations de base avec le DOM. Nous n'entrerons pas dans les détails ici, car React remplace cette approche.

javascript

// Sélectionner un élément
const element = document.querySelector('.ma-classe');

// Modifier le contenu
element.textContent = 'Nouveau texte';

// Ajouter une classe CSS
element.classList.add('active');

// Écouter un événement
element.addEventListener('click', () => {
  console.log('Cliqué !');
});

Pour aller plus loin

Si vous souhaitez approfondir la manipulation du DOM (création d'éléments, événements avancés, traversée de l'arbre, data attributes, etc.), consultez l'Annexe DOM - Manipulation avancée avec des exemples de code détaillés et des bonnes pratiques.

Pour l'instant, retenez simplement le concept : le DOM est la représentation objet de votre HTML.

Qu'est-ce que le DOM (Document Object Model) ?

Avec React

Important : Avec React, vous ne manipulerez plus directement le DOM !

React gère le DOM via son Virtual DOM. Vous déclarez ce que vous voulez afficher, et React s'occupe des mises à jour du DOM réel de manière optimisée.

En vanilla JS : element.textContent = 'Bonjour' En React : <h1>{greeting}</h1> (React met à jour automatiquement)

Comprendre, pas mémoriser

Ce qu'il faut retenir :

HTML :

Comprendre la différence entre balises sémantiques et non-sémantiques
- <div> vs <section> : les deux créent des sections, mais <section> a du sens sémantique
- <span> vs <strong> : les deux mettent en évidence, mais <strong> indique une importance
Savoir pourquoi la sémantique est importante (SEO, accessibilité, maintenabilité)
Les balises existent et vous les reconnaîtrez avec la pratique