# Angular SSR: NG0500: During hydration Angular expected <div> but found <span> (NG0501, NG0502)

**Code:** `NG0500` · **Category:** Angular · **Seen on:** Angular, TypeScript

The HTML rendered on the server does not match what the browser's Angular app tried to render, so hydration failed and the page was re-rendered.

## Meaning

Hydration reuses the server DOM. If the DOM differs (invalid HTML nesting, DOM changed by third-party scripts, whitespace changes, browser-only branches rendering different markup), Angular throws NG0500–NG0502 and falls back to client rendering. Fix invalid nesting (`<p>` inside `<p>`, `<div>` in `<table>`), avoid manual DOM edits, and make server and browser render the same.

## Common causes

- Invalid HTML nesting that the browser auto-corrects (`<div>` inside `<p>`, `<table>` without `<tbody>`)
- Direct DOM manipulation (`innerHTML`, jQuery) outside Angular
- Content that differs between server and browser (`window`, dates, random values)
- CDN/minifier changing the HTML (whitespace removal, injected scripts)
- Third-party widgets modifying the DOM before bootstrap

## Quick fix

1. Fix invalid HTML structure reported in the message
2. Use `ngSkipHydration` on the component that must manipulate the DOM
3. Render browser-only content with `afterNextRender` or `isPlatformBrowser`

## Detailed fix by platform

### Angular

1. `<app-widget ngSkipHydration></app-widget>` for components that change the DOM
2. Defer browser-only code: `afterNextRender(() => { this.chart.init(); });`

## Code examples

### Invalid nesting breaks hydration

```html
<!-- wrong: browsers close <p> before <div>, so server and client DOM differ -->
<p><div>Hello</div></p>

<!-- right -->
<div><div>Hello</div></div>
```

## How to diagnose

1. **Message** — Which element did Angular expect vs find?
2. **HTML** — Valid nesting?
3. **DOM** — Anything changing it outside Angular?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/angular/ng0500-hydration-mismatch)