HTML-structuur en CSS-selectors
Begrijp DOM-bomen en schrijf CSS-selectors om elementen te selecteren.
HTML-structuur en CSS-selectors is een gratis R Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject R Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus R Academy bevat in totaal 4 lessen.
De HTML-DOM-boom
Elke webpagina is opgebouwd als een Document Object Model (DOM)-boom. HTML-elementen worden in elkaar genest en vormen een hiërarchie van bovenliggende en onderliggende elementen. Webscraping navigeert door deze boom om gegevens te extraheren.
# 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'))CSS-selector: tagselector
De eenvoudigste CSS-selector richt zich op elementen via hun tagnaam. Met p selecteer je alle alinea-elementen. Met h1 selecteer je alle koppen van 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')CSS-selector: class en ID
Gebruik .classname om elementen op basis van hun class te selecteren en #idname om één uniek element op basis van zijn ID te selecteren. Classes kunnen meerdere keren voorkomen; ID's horen uniek te zijn op de pagina.
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'))Selectors voor afstammelingen en directe kinderen
div p selecteert elke p binnen een div, op elke diepte. div > p selecteert alleen directe kinderen. h1 + p selecteert een p dat onmiddellijk volgt op een h1 (een aangrenzende broer of zus).
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) # 1Attribuutselectors
Met CSS-attribuutselectors kun je filteren op HTML-attributen: [attr] controleert of een attribuut bestaat, [attr='val'] controleert de exacte waarde en [attr*='val'] controleert of de waarde een deeltekenreeks bevat.
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'Basisprincipes van XPath
XPath is een alternatief voor CSS-selectors en is krachtiger voor complexe queries. Gebruik in rvest html_element(html, xpath='//tag'). //p betekent elke p op elke locatie; /html/body/p is een absoluut pad.
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)Selectors combineren
Je kunt selectors combineren voor meer precisie. div.card h2 selecteert h2 binnen een div met de class card. Een komma scheidt meerdere onafhankelijke selectors: h1, h2, h3 selecteert alle drie de kopniveaus.
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)De tool SelectorGadget
SelectorGadget is een bookmarklet voor browsers waarmee je interactief CSS-selectors kunt vinden. Klik op de elementen die je wilt (groen gemarkeerd) en op de elementen die je niet wilt (rood gemarkeerd) — de tool genereert automatisch de minimaal benodigde CSS-selector.
# 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')Pagina's inspecteren in DevTools
Met de DevTools van je browser (F12) kun je de DOM rechtstreeks inspecteren. Klik met de rechtermuisknop op een element, kies Inspecteren en bekijk de HTML in het deelvenster Elementen. Als je de muis over elementen beweegt, worden ze op de pagina gemarkeerd. Zo kun je de exacte tag, class en ID bepalen waarop je je wilt richten.
# 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 en nth-child
Met CSS-pseudo-classes zoals :first-child, :last-child en :nth-child(n) kun je elementen selecteren op basis van hun positie binnen het bovenliggende element — handig wanneer elementen geen onderscheidende classes hebben.
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')Regels voor specificiteit van selectors
Wanneer meerdere selectors kunnen overeenkomen, bepaalt specificiteit welke selector voorrang krijgt. ID's gaan vóór classes; classes gaan vóór tags. Bij scraping is dit minder belangrijk, maar met kennis van specificiteit schrijf je precieze selectors die onbedoelde overeenkomsten voorkomen.
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)Korte toets
Toets je begrip van CSS-selectoren die worden gebruikt voor webscraping met rvest.
Samenvatting: HTML- en CSS-selectoren
Belangrijkste punten: De DOM is een boomstructuur; CSS-selectoren navigeren hierin. Gebruik tag voor het elementtype, .class voor een klasse, #id voor unieke elementen, > voor directe kinderen en [attr] voor attributen. SelectorGadget en DevTools helpen je om interactief selectors te vinden. XPath (//tag[@attr]) verwerkt situaties waarin CSS tekortschiet.
# 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')
Leer R met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 43
- Lessen
- 159
Veelgestelde vragen
Is de les “HTML-structuur en CSS-selectors” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad R Academy, waaronder “HTML-structuur en CSS-selectors”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus R Academy bevat in totaal 4 lessen.
Wat leer ik in “HTML-structuur en CSS-selectors”?
Begrijp DOM-bomen en schrijf CSS-selectors om elementen te selecteren. Je oefent met R Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met R Academy te beginnen?
Ervaring vooraf is niet nodig. R Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “HTML-structuur en CSS-selectors”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over R Academy?
Ja. Elke les over R Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- HTML-structuur en CSS-selectors
- Basisprincipes van html_element() en html_text()
- Tabellen en links scrapen
- Paginering en meerdere pagina's verwerken