---
name: analyzing
description: How Claude should analyze the HTML to identify sections
metadata:
  tags: dom, sections, analysis
---

# Analyzing the HTML

After rendering and scraping, you (Claude) analyze the HTML to identify sections.

## Section Detection Heuristics

### 1. Look for Semantic Tags

```html
<nav>...</nav>        → navigation section
<header>...</header>  → header/hero section
<main>...</main>      → main content wrapper
<section>...</section> → content section
<footer>...</footer>  → footer section
```

### 2. Look for Common Patterns

```html
<div class="hero">...</div>
<div id="features">...</div>
<div class="pricing-section">...</div>
<div class="testimonials">...</div>
<div class="cta">...</div>
```

### 3. Look for Visual Blocks

- Full-width containers
- Distinct background colors
- Clear visual separation
- Consistent internal structure

## Naming Conventions

Use kebab-case names that describe the section's purpose:

| HTML Pattern | Section Name |
|--------------|--------------|
| `<nav>` | `navigation` |
| Hero with headline | `hero` |
| Feature cards | `features` |
| Pricing tables | `pricing` |
| Testimonials | `testimonials` |
| Call-to-action | `cta` |
| `<footer>` | `footer` |

## Example Analysis

Given this HTML:

```html
<body>
  <nav class="fixed top-0">...</nav>
  <section class="min-h-screen">
    <h1>Welcome</h1>
  </section>
  <section class="py-20">
    <h2>Features</h2>
    <div class="grid">...</div>
  </section>
  <footer>...</footer>
</body>
```

Identify:
1. `navigation` - The `<nav>` element
2. `hero` - First section with the h1
3. `features` - Section with feature grid
4. `footer` - The `<footer>` element

## Output Format

For each section, note:
- **name**: kebab-case identifier
- **html**: The HTML fragment for that section
- **order**: Position in the page (0, 1, 2, ...)

## Tips

- Keep sections modular and self-contained
- Don't split logical groups (e.g., keep nav items together)
- Preserve IDs for scroll navigation
- Note any absolute positioning for later styling
