0Pricing
AI Agents · Pelajaran

Mengurai HTML dengan BeautifulSoup

find(), select(), pemilih CSS, dan ekstraksi konten terstruktur dari HTML.

Mengurai HTML dengan BeautifulSoup adalah pelajaran AI Agents gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar AI Agents, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus AI Agents mencakup 4 pelajaran total.

Mengapa Mengurai HTML dalam Agen?

Banyak sumber data bukanlah API — melainkan halaman web. Saat agen perlu mengekstrak informasi terstruktur dari HTML, agen harus mengurai markah mentah menjadi pohon yang dapat dijelajahi.

BeautifulSoup (bs4) adalah pustaka Python standar untuk keperluan ini. Pustaka ini mengubah HTML yang berantakan menjadi objek Python yang dapat Anda kueri dengan mudah.

Membuat Objek BeautifulSoup

Berikan HTML mentah dan nama pengurai kepada BeautifulSoup(). 'html.parser' sudah tersedia di dalam Python dan tidak memerlukan instalasi tambahan. Untuk penguraian halaman besar yang lebih cepat, 'lxml' tersedia melalui pip.

from bs4 import BeautifulSoup
import httpx

# Fetch HTML
response = httpx.get('https://example.com', timeout=10.0)
html = response.text

# Parse it
soup = BeautifulSoup(html, 'html.parser')

# Get the page title
print(soup.title.text)  # 'Example Domain'

find() — Menemukan Satu Elemen

soup.find(tag, attrs) mengembalikan elemen pertama yang cocok, atau None jika tidak ditemukan. Anda dapat mencocokkan berdasarkan nama tag, kelas, id, atau atribut apa pun.

Selalu periksa None sebelum memanggil metode pada hasil tersebut.

from bs4 import BeautifulSoup

html = '<div class="content"><h1>Title</h1><p>Body text here.</p></div>'
soup = BeautifulSoup(html, 'html.parser')

# Find by tag + class
content_div = soup.find('div', class_='content')
if content_div:
    heading = content_div.find('h1')
    print(heading.text)  # 'Title'

# Find by id
sidebar = soup.find('div', id='sidebar')  # None if absent

find_all() — Menemukan Beberapa Elemen

soup.find_all(tag) mengembalikan daftar semua elemen yang cocok. Lakukan iterasi pada daftar tersebut untuk mengekstrak data dari struktur berulang seperti item daftar, baris tabel, atau kartu artikel.

from bs4 import BeautifulSoup

html = '<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>'
soup = BeautifulSoup(html, 'html.parser')

items = soup.find_all('li')
for item in items:
    print(item.text)  # Apple, Banana, Cherry

# Limit results
first_two = soup.find_all('li', limit=2)

Pemilih CSS dengan select()

soup.select('css selector') memungkinkan Anda menggunakan sintaks CSS yang sudah dikenal. Cara ini sering kali lebih ringkas daripada pemanggilan find() berantai, terutama untuk elemen bertingkat.

from bs4 import BeautifulSoup

html = '''
<table>
  <tr><td class="name">Alice</td><td class="score">95</td></tr>
  <tr><td class="name">Bob</td><td class="score">87</td></tr>
</table>
'''
soup = BeautifulSoup(html, 'html.parser')

# Select all td elements inside tr inside table
cells = soup.select('table tr td')
for cell in cells:
    print(cell.text)

# Select only name cells
names = soup.select('td.name')
for n in names:
    print(n.text)  # Alice, Bob

Mengekstrak Teks dengan .text dan .strip()

.text (atau .get_text()) mengembalikan semua isi teks di dalam suatu elemen, termasuk tag bertingkat. Gunakan .strip() untuk menghapus spasi kosong di awal dan akhir, yang sering terdapat dalam HTML.

from bs4 import BeautifulSoup

html = '<p>  \n  Price: <strong>$29.99</strong>  \n  </p>'
soup = BeautifulSoup(html, 'html.parser')

paragraph = soup.find('p')

# .text includes nested tag content
print(paragraph.text)          # '  \n  Price: $29.99  \n  '
print(paragraph.text.strip())  # 'Price: $29.99'

# get_text with separator
print(paragraph.get_text(separator=' ', strip=True))  # 'Price: $29.99'

Mengekstrak Atribut dengan .get()

Atribut tag seperti href, src, dan data-* diakses seperti kamus menggunakan .get('attr_name'). Cara ini mengembalikan None dengan aman jika atribut tidak ada.

from bs4 import BeautifulSoup

html = '''
<a href="https://example.com/page" data-id="42">Click here</a>
<img src="/images/logo.png" alt="Logo">
'''
soup = BeautifulSoup(html, 'html.parser')

link = soup.find('a')
print(link.get('href'))     # 'https://example.com/page'
print(link.get('data-id'))  # '42'
print(link.get('class'))    # None (no class attribute)

img = soup.find('img')
print(img.get('src'))       # '/images/logo.png'

Menjelajahi Pohon Hasil Uraian

Elemen BeautifulSoup memiliki hubungan induk/anak/saudara yang dapat Anda telusuri. Gunakan .parent, .children, .next_sibling, dan .previous_sibling untuk menjelajahi area di sekitar elemen yang ditemukan.

from bs4 import BeautifulSoup

html = '''
<div class="article">
  <h2>Headline</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>
'''
soup = BeautifulSoup(html, 'html.parser')

h2 = soup.find('h2')
print(h2.text)                    # 'Headline'
print(h2.parent['class'])         # ['article']
print(h2.next_sibling.next_sibling.text)  # 'First paragraph.'

Mengekstrak Semua Tautan dari Halaman

Tugas agen yang umum adalah mengumpulkan semua tautan dari suatu halaman untuk penjelajahan lebih lanjut. Temukan semua tag <a> dan ekstrak atribut href-nya, lalu saring yang kosong.

from bs4 import BeautifulSoup
import httpx

def extract_links(url: str) -> list:
    response = httpx.get(url, timeout=10.0)
    soup = BeautifulSoup(response.text, 'html.parser')

    links = []
    for tag in soup.find_all('a'):
        href = tag.get('href')
        if href and href.startswith('http'):
            links.append(href)
    return links

# urls = extract_links('https://news.ycombinator.com')
# print(urls[:5])

Menangani HTML yang Rusak dengan Baik

HTML di dunia nyata sering kali rusak: tag tidak ditutup, elemen tidak cocok, dan masalah pengodean. Pengurai BeautifulSoup bersifat toleran dan akan berusaha memperbaiki kesalahan secara otomatis. Namun, selalu lindungi akses ke elemen bertingkat dengan memeriksa None.

from bs4 import BeautifulSoup

# Broken HTML — missing closing tags
html = '<div><p>Hello <strong>World</div>'
soup = BeautifulSoup(html, 'html.parser')

# BS4 repairs the tree automatically
print(soup.prettify())
# <div><p>Hello <strong>World</strong></p></div>

# Safe chained access
price = soup.find('span', class_='price')
price_text = price.text.strip() if price else 'N/A'
print(price_text)  # 'N/A'

Alat Pengikis Agen Lengkap

Menyatukan semuanya: fungsi pengikis lengkap yang dapat dipanggil agen sebagai alat. Fungsi ini mengambil halaman, mengurainya, lalu mengembalikan data terstruktur dalam format yang dapat dipahami agen.

from bs4 import BeautifulSoup
import httpx

def scrape_article(url: str) -> dict:
    response = httpx.get(url, headers={'User-Agent': 'MyAgent/1.0'}, timeout=10.0)
    response.raise_for_status()
    soup = BeautifulSoup(response.text, 'html.parser')

    title = soup.find('h1')
    paragraphs = soup.find_all('p')

    return {
        'url': url,
        'title': title.text.strip() if title else '',
        'text': ' '.join(p.text.strip() for p in paragraphs[:5]),
        'links': [a.get('href') for a in soup.find_all('a', href=True)][:10]
    }

Pemeriksaan Pemahaman: BeautifulSoup

Uji pemahaman Anda tentang penguraian HTML dengan BeautifulSoup.

Ringkasan: Mengurai HTML dengan BeautifulSoup

Anda sekarang dapat mengekstrak data terstruktur dari halaman HTML di dalam agen Anda:

  • Buat objek soup dengan BeautifulSoup(html, 'html.parser')
  • Gunakan find() untuk satu elemen dan find_all() untuk beberapa elemen
  • Gunakan select() untuk kueri pemilih CSS
  • Dapatkan teks dengan .text.strip() dan atribut dengan .get('attr')
  • Telusuri pohon dengan .parent, .children, dan elemen saudara

Jika dipadukan dengan klien HTTP, BeautifulSoup memberi agen Anda kemampuan untuk membaca halaman web apa pun.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengurai HTML dengan BeautifulSoup” gratis?

Ya — teks lengkap “Mengurai HTML dengan BeautifulSoup” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus AI Agents, upgrade ke CoddyKit PRO. Kursus AI Agents mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengurai HTML dengan BeautifulSoup”?

find(), select(), pemilih CSS, dan ekstraksi konten terstruktur dari HTML. Kamu berlatih AI Agents dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai AI Agents?

Tidak diperlukan pengalaman sebelumnya. AI Agents di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Mengurai HTML dengan BeautifulSoup” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran AI Agents ini?

Ya. Setiap pelajaran AI Agents menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Klien HTTP untuk Agen: httpx dan requests
  2. Mengurai HTML dengan BeautifulSoup
  3. Menangani Paginasi dan Konten Dinamis
  4. Praktik Scraping yang Bertanggung Jawab
← Kembali ke AI Agents