Context Slice

HTML Page Formatting

Web pages, landing pages, standalone HTML documents

Recognition

"webpage", "landing page", "html page", "web document"
Visual presentation that opens in browser
Standalone file (no external dependencies)

Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="[Page description for SEO]">
    <title>[Page Title]</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #2c3e50; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
        /* Additional styles */
    </style>
</head>
<body>
    <nav><!-- Navigation --></nav>
    <main>
        <section class="hero"><!-- Hero content --></section>
        <section><!-- Content sections --></section>
    </main>
    <footer><!-- Footer --></footer>
</body>
</html>

Rules

Element	Format
DOCTYPE	Always `<!DOCTYPE html>` first line
Language	`<html lang="en">` for accessibility
Viewport	Required for mobile: `<meta name="viewport" ...>`
Semantic tags	Use `<nav>`, `<main>`, `<section>`, `<footer>`
Fonts	System font stack (no external dependencies)
Styles	Embedded in `<style>`, not inline
Container	`max-width: 1200px; margin: 0 auto;`

CSS Reset (Always Include)

* { margin: 0; padding: 0; box-sizing: border-box; }

Layout Patterns

Flexbox Navigation:

nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; }

Responsive Grid:

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

Centered Hero:

.hero { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

Color Palette (Safe Defaults)

Purpose	Color
Text	`#2c3e50`
Muted text	`#666`
Background	`#f8f9fa`
Accent	`#667eea`
White	`#ffffff`

Pitfalls

Missing viewport meta (breaks mobile)
External font/CSS dependencies (keep self-contained)
Inline styles (use embedded <style>)
Divs for everything (use semantic HTML)
Fixed widths (use max-width + responsive units)

                  ## Recognition

- "webpage", "landing page", "html page", "web document"
- Visual presentation that opens in browser
- Standalone file (no external dependencies)

## Structure

```html



    
    
    
    [Page Title]
    


    
    
        
        
    
    


```

## Rules

| Element | Format |
|---------|--------|
| DOCTYPE | Always `` first line |
| Language | `` for accessibility |
| Viewport | Required for mobile: `` |
| Semantic tags | Use ``, ``, ``, `` |
| Fonts | System font stack (no external dependencies) |
| Styles | Embedded in `