0Pricing
R Academy · Lección

Estructura HTML y selectores CSS

Comprenda los árboles del DOM y escriba selectores CSS para seleccionar elementos.

Estructura HTML y selectores CSS es una lección gratuita de R Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de R Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de R Academy incluye 4 lecciones en total.

El árbol DOM de HTML

Todas las páginas web están estructuradas como un árbol del Modelo de objetos del documento (DOM). Los elementos HTML se anidan unos dentro de otros y forman una jerarquía de padres e hijos. El web scraping recorre este árbol para extraer datos.

# 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'))

Selector CSS: selector de etiqueta

El selector CSS más sencillo selecciona elementos por su nombre de etiqueta. Escribir p selecciona todos los elementos de párrafo. Escribir h1 selecciona todos los encabezados de nivel 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')

Selector CSS: clase e ID

Use .classname para seleccionar elementos por clase y #idname para seleccionar un elemento único por su ID. Las clases pueden aparecer muchas veces; los ID deben ser únicos en la página.

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'))

Selectores de descendientes e hijos

div p selecciona cualquier p dentro de un div, independientemente de la profundidad. div > p selecciona únicamente los hijos directos. h1 + p selecciona un p que aparece inmediatamente después de un h1 (hermano adyacente).

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

Selectores de atributos

Los selectores de atributos CSS permiten filtrar por atributos HTML: [attr] comprueba la existencia, [attr='val'] comprueba el valor exacto y [attr*='val'] comprueba si el valor contiene una subcadena.

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'

Conceptos básicos de XPath

XPath es una alternativa a los selectores CSS, más potente para consultas complejas. En rvest, use html_element(html, xpath='//tag'). //p significa cualquier p en cualquier ubicación; /html/body/p es una ruta absoluta.

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)

Combinación de selectores

Los selectores se pueden combinar para obtener mayor precisión. div.card h2 selecciona los elementos h2 dentro de un div con la clase card. Una coma separa varios selectores independientes: h1, h2, h3 selecciona los tres niveles de encabezado.

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)

Herramienta SelectorGadget

SelectorGadget es un bookmarklet del navegador que ayuda a encontrar selectores CSS de forma interactiva. Haga clic en los elementos que desea (resaltados en verde) y en los que no desea (resaltados en rojo); la herramienta genera automáticamente el selector CSS mínimo.

# 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')

Inspección de páginas en DevTools

Las DevTools del navegador (F12) permiten inspeccionar directamente el DOM. Haga clic con el botón derecho en cualquier elemento, elija Inspect y el panel Elements mostrará el HTML. Al pasar el cursor, se resaltan los elementos en la página, lo que le ayuda a identificar la etiqueta, la clase y el ID exactos que debe seleccionar.

# 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')

Pseudoclases y nth-child

Las pseudoclases CSS, como :first-child, :last-child y :nth-child(n), permiten seleccionar elementos según su posición dentro del elemento padre, lo que resulta útil cuando los elementos no tienen clases distintivas.

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')

Reglas de especificidad de los selectores

Cuando varios selectores pueden coincidir, la especificidad determina cuál prevalece. Los ID tienen prioridad sobre las clases y las clases sobre las etiquetas. En web scraping esto es menos importante, pero conocer la especificidad le ayuda a escribir selectores precisos que eviten coincidencias incorrectas.

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)

Comprobación rápida

Compruebe su comprensión de los selectores CSS utilizados en web scraping con rvest.

Repaso: selectores HTML y CSS

Conceptos clave: El DOM es un árbol; los selectores CSS permiten recorrerlo. Use tag para el tipo de elemento, .class para la clase, #id para elementos únicos, > para los hijos directos y [attr] para los atributos. SelectorGadget y DevTools le ayudan a descubrir selectores de forma interactiva. XPath (//tag[@attr]) permite resolver los casos en los que CSS no es suficiente.

# 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')

Preguntas frecuentes

¿La lección «Estructura HTML y selectores CSS» es gratis?

Sí — el texto completo de «Estructura HTML y selectores CSS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de R Academy, actualiza a CoddyKit PRO. El curso de R Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estructura HTML y selectores CSS»?

Comprenda los árboles del DOM y escriba selectores CSS para seleccionar elementos. Practicas R Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar R Academy?

No se requiere experiencia previa. R Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Estructura HTML y selectores CSS»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de R Academy?

Sí. Cada lección de R Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Estructura HTML y selectores CSS
  2. Fundamentos de html_element() y html_text()
  3. Extracción de tablas y enlaces
  4. Gestión de paginación y varias páginas
← Volver a R Academy