R Academy · Leçon

Structure HTML et sélecteurs CSS

Comprenez les arbres DOM et écrivez des sélecteurs CSS pour cibler les éléments.

Structure HTML et sélecteurs CSS est une leçon R Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage R Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours R Academy comprend 4 leçons au total.

L’arbre DOM du HTML

Chaque page web est structurée comme un arbre du Document Object Model (DOM). Les éléments HTML sont imbriqués les uns dans les autres et forment une hiérarchie parent-enfant. L’extraction de données web parcourt cet arbre pour récupérer les données.

# HTML structure conceptually:
# <html>
#   <body>
#     <div class='container'>
#       <h1 id='title'>Hello</h1>
#       <p class='text'>World</p>
#     </div>
#   </body>
# </html>

# rvest lets us query this tree with CSS selectors
library(rvest)
html <- read_html('<div><h1>Title</h1><p class="info">Text</p></div>')
html_text(html_element(html, 'h1'))

Sélecteur CSS : sélecteur de balise

Le sélecteur CSS le plus simple cible les éléments par leur nom de balise. Écrire p sélectionne tous les paragraphes. Écrire h1 sélectionne tous les titres de niveau 1.

library(rvest)
html <- read_html('
  <div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <h2>A heading</h2>
  </div>
')
# Tag selector: selects all <p> elements
nodes <- html_elements(html, 'p')
html_text2(nodes)
# Returns: c('First paragraph', 'Second paragraph')

Sélecteur CSS : classe et ID

Utilisez .classname pour sélectionner les éléments par classe et #idname pour sélectionner un élément unique par ID. Les classes peuvent apparaître plusieurs fois ; les ID doivent être uniques sur la page.

library(rvest)
html <- read_html('
  <div>
    <p class="highlight">Important text</p>
    <p class="normal">Regular text</p>
    <span id="price">$9.99</span>
  </div>
')
# Class selector (prefix with .)
html_text2(html_element(html, '.highlight'))
# ID selector (prefix with #)
html_text2(html_element(html, '#price'))

Sélecteurs de descendants et d’enfants

div p sélectionne tout élément p situé dans un div, à n’importe quelle profondeur. div > p sélectionne uniquement les enfants directs. h1 + p sélectionne un élément p placé immédiatement après un h1 (frère adjacent).

library(rvest)
html <- read_html('
  <div class="outer">
    <p>Direct child</p>
    <section>
      <p>Nested deeper</p>
    </section>
  </div>
')
# Descendant: both paragraphs
all_p <- html_elements(html, 'div p')
length(all_p)  # 2

# Direct child only
direct_p <- html_elements(html, 'div.outer > p')
length(direct_p)  # 1

Sélecteurs d’attributs

Les sélecteurs d’attributs CSS permettent de filtrer selon les attributs HTML : [attr] vérifie l’existence, [attr='val'] vérifie la valeur exacte et [attr*='val'] vérifie si la valeur contient la sous-chaîne.

library(rvest)
html <- read_html('
  <div>
    <a href="https://example.com">External</a>
    <a href="/about">Internal</a>
    <a>No href</a>
  </div>
')
# Select only anchors that have an href attribute
with_href <- html_elements(html, 'a[href]')
length(with_href)  # 2

# Select anchors with href starting with https
external <- html_elements(html, 'a[href^="https"]')
html_text2(external)  # 'External'

Bases de XPath

XPath est une alternative aux sélecteurs CSS, plus puissante pour les requêtes complexes. Dans rvest, utilisez html_element(html, xpath='//tag'). //p signifie tout élément p situé n’importe où ; /html/body/p est un chemin absolu.

library(rvest)
html <- read_html('
  <html><body>
    <table>
      <tr><td class="price">10.99</td></tr>
      <tr><td class="price">5.50</td></tr>
    </table>
  </body></html>
')
# XPath: select all td with class price
nodes <- html_elements(html, xpath = '//td[@class="price"]')
html_text2(nodes)
# c('10.99', '5.50')

# XPath text() function
nodes2 <- html_elements(html, xpath = '//td[contains(@class,"price")]')
html_text2(nodes2)

Combiner des sélecteurs

Les sélecteurs peuvent être combinés pour gagner en précision. div.card h2 sélectionne les éléments h2 situés dans un div de classe card. Une virgule sépare plusieurs sélecteurs indépendants : h1, h2, h3 sélectionne les trois niveaux de titre.

library(rvest)
html <- read_html('
  <div class="card">
    <h2>Card Title</h2>
    <p class="desc">Description here</p>
    <span class="price">$19</span>
  </div>
  <div class="footer">
    <h2>Footer Heading</h2>
  </div>
')
# Only h2 inside .card
card_h2 <- html_element(html, 'div.card h2')
html_text2(card_h2)  # 'Card Title'

# Multiple selectors with comma
price_desc <- html_elements(html, '.price, .desc')
html_text2(price_desc)

Outil SelectorGadget

SelectorGadget est un bookmarklet de navigateur qui vous aide à trouver des sélecteurs CSS de manière interactive. Cliquez sur les éléments souhaités (surlignés en vert) et sur ceux que vous ne souhaitez pas sélectionner (surlignés en rouge) : il génère automatiquement le sélecteur CSS minimal.

# SelectorGadget workflow:
# 1. Open target page in Chrome/Firefox
# 2. Activate SelectorGadget bookmarklet
# 3. Click element you want -> turns green, selector appears
# 4. Click elements you DON'T want -> turns red, selector narrows
# 5. Copy the selector shown at the bottom
# 6. Use in rvest:

library(rvest)
# Example: SelectorGadget found '.product-title' for us
# page <- read_html('https://books.toscrape.com')
# titles <- html_elements(page, '.product_pod h3 a')
# html_text2(titles)
cat('SelectorGadget is available at selectorgadget.com')

Inspecter les pages dans DevTools

Les DevTools du navigateur (F12) permettent d’inspecter directement le DOM. Cliquez avec le bouton droit sur un élément, choisissez Inspecter, et le panneau Elements affiche le HTML. Le survol met les éléments en évidence sur la page, ce qui vous aide à identifier la balise, la classe et l’ID exacts à cibler.

# DevTools workflow for finding selectors:
# 1. F12 -> Elements tab
# 2. Click the cursor icon (Inspector)
# 3. Click the element on the page
# 4. Right-click highlighted HTML -> Copy -> Copy selector
# 5. Paste selector into rvest

# The copied selector might look like:
# '#main > div.results > article:nth-child(1) > h3'
# Simplify it: usually '.results h3' works just as well

# Validate your selector in the Console with:
# document.querySelectorAll('.results h3')
library(rvest)
cat('Always verify selectors return the elements you expect')

Pseudo-classes et nth-child

Les pseudo-classes CSS telles que :first-child, :last-child et :nth-child(n) permettent de sélectionner des éléments selon leur position au sein de leur parent, ce qui est utile lorsque les éléments ne possèdent pas de classes distinctives.

library(rvest)
html <- read_html('
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
')
# First item
first <- html_element(html, 'li:first-child')
html_text2(first)  # 'First'

# Third item
third <- html_element(html, 'li:nth-child(3)')
html_text2(third)  # 'Third'

# Even items
evens <- html_elements(html, 'li:nth-child(even)')
html_text2(evens)  # c('Second', 'Fourth')

Règles de spécificité des sélecteurs

Lorsque plusieurs sélecteurs peuvent correspondre, la spécificité détermine lequel l’emporte. Les ID l’emportent sur les classes, et les classes sur les balises. Pour l’extraction de données, cela a moins d’importance, mais connaître la spécificité vous aide à écrire des sélecteurs précis qui évitent les correspondances erronées.

library(rvest)
html <- read_html('
  <div id="header" class="top">
    <p class="title">Main Title</p>
  </div>
  <div class="content">
    <p class="title">Content Title</p>
  </div>
')
# Overly broad: gets BOTH titles
broad <- html_elements(html, 'p.title')
html_text2(broad)

# Specific: only header title
specific <- html_element(html, '#header p.title')
html_text2(specific)  # 'Main Title'

# Be as specific as needed but not more
content_title <- html_element(html, '.content .title')
html_text2(content_title)

Vérification rapide

Vérifiez votre compréhension des sélecteurs CSS utilisés pour le moissonnage Web avec rvest.

Récapitulatif : sélecteurs HTML et CSS

À retenir : Le DOM est un arbre ; les sélecteurs CSS permettent de le parcourir. Utilisez tag pour le type d’élément, .class pour la classe, #id pour les éléments uniques, > pour les enfants directs et [attr] pour les attributs. SelectorGadget et DevTools vous aident à découvrir les sélecteurs de manière interactive. XPath (//tag[@attr]) prend le relais lorsque les sélecteurs CSS ne suffisent pas.

# Summary of key CSS selectors for web scraping:
# 'p'            -> all <p> elements
# '.price'       -> elements with class='price'
# '#main'        -> element with id='main'
# 'div > p'      -> direct child p of div
# 'a[href]'      -> a elements that have href attr
# 'a[href*=http] -> a elements where href contains 'http'
# 'li:nth-child(2)' -> second li in its parent
# 'h1, h2'       -> both h1 and h2 elements
# xpath='//td[@class="price"]' -> XPath alternative
library(rvest)
cat('Selectors are the foundation of reliable web scraping')

Questions Fréquemment Posées

La leçon « Structure HTML et sélecteurs CSS » est-elle gratuite ?

Oui — le texte complet de « Structure HTML et sélecteurs CSS » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours R Academy, passe à CoddyKit PRO. Le cours R Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Structure HTML et sélecteurs CSS » ?

Comprenez les arbres DOM et écrivez des sélecteurs CSS pour cibler les éléments. Tu pratiques R Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer R Academy ?

Aucune expérience préalable n'est requise. R Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Structure HTML et sélecteurs CSS » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon R Academy ?

Oui. Chaque leçon R Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à R Academy