Introduction

Imagine your website loading instantly on mobile devices - faster than users can blink. That's the promise of AMP (Accelerated Mobile Pages), but this lightning-fast speed comes with specific rules and restrictions that change how you write HTML. Understanding these restrictions is crucial for creating AMP pages that work correctly and deliver the performance benefits users expect.

AMP HTML restrictions are carefully designed rules that ensure your web pages load as quickly as possible on mobile devices. These restrictions might seem limiting at first, but they're actually your guide to creating incredibly fast, user-friendly mobile experiences that work seamlessly across all devices and platforms.

You'll learn exactly what HTML elements and attributes you can and cannot use in AMP pages, helping you create blazing-fast mobile websites that still deliver rich, engaging content to your users.

What are AMP HTML Restrictions?

AMP HTML restrictions are a set of specific rules that govern how you can write HTML code for Accelerated Mobile Pages. These restrictions limit certain HTML elements, attributes, and coding practices to ensure maximum performance and security on mobile devices.

Think of AMP restrictions as a streamlined version of regular HTML - it removes elements that can slow down page loading or cause security issues, while keeping everything essential for creating great content. AMP takes standard HTML and creates a more focused, performance-optimized version.

These restrictions exist to guarantee that AMP pages load in under one second on mobile devices, provide a consistent user experience across different platforms, and maintain high security standards. Every restriction serves a specific purpose in achieving these goals.

Key Categories of AMP HTML Restrictions

Forbidden HTML Elements

Certain HTML elements are completely prohibited in AMP because they can slow down page loading or cause security vulnerabilities.

Modified HTML Elements

Some standard HTML elements work differently in AMP and require specific attributes or usage patterns.

JavaScript Limitations

AMP severely restricts JavaScript usage to ensure fast loading times and security.

CSS Restrictions

Styling rules are limited to ensure optimal performance and prevent render-blocking issues.

How AMP HTML Restrictions Work

AMP HTML restrictions work through a validation system that checks your code:

Element Validation: AMP checks that you only use allowed HTML elements and attributes.

Performance Optimization: Restricted elements are replaced with AMP-specific components that load faster.

Security Enforcement: Prohibited elements that could pose security risks are blocked.

Consistency Guarantee: Restrictions ensure your AMP pages work the same way across all platforms.

Automatic Optimization: AMP automatically optimizes allowed elements for better performance.

Practical AMP HTML Restrictions Implementation

Project Folder Structure

Organize your AMP project files properly:

JavaScript

my-amp-site/
├── index.html (regular HTML)
├── amp/
│   ├── index.html (AMP version)
│   ├── article.html (AMP article)
│   └── about.html (AMP about page)
├── css/
│   └── amp-custom.css
├── images/
│   ├── hero-image.jpg
│   └── article-image.jpg
└── js/
    └── regular-scripts.js (not used in AMP)

Basic AMP HTML Structure with Restrictions

JavaScript

<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Page Following All Restrictions</title>
    <link rel="canonical" href="https://example.com/regular-page.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
    <!-- AMP boilerplate CSS - Required -->
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    
    <!-- Custom CSS - Must be inline and under 50KB -->
    <style amp-custom>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 1rem;
        }
        .header {
            background: #2196F3;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        .content {
            max-width: 800px;
            margin: 0 auto;
            padding: 1rem;
        }
        .article-image {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>AMP Page with Proper Restrictions</h1>
    </header>
    
    <main class="content">
        <article>
            <h2>Understanding AMP Restrictions</h2>
            
            <!-- ALLOWED: Standard HTML elements -->
            <p>This is a regular paragraph that works perfectly in AMP.</p>
            
            <!-- ALLOWED: AMP-specific image component -->
            <amp-img src="/images/article-image.jpg" 
                     alt="Article illustration"
                     width="800" 
                     height="600"
                     layout="responsive">
            </amp-img>
            
            <!-- ALLOWED: Basic HTML elements -->
            <ul>
                <li>AMP allows standard list elements</li>
                <li>Basic formatting works normally</li>
                <li>Semantic HTML is encouraged</li>
            </ul>
            
            <!-- ALLOWED: Links (with restrictions) -->
            <p><a href="https://example.com">External links work</a></p>
            
            <!-- FORBIDDEN: These elements are NOT allowed -->
            <!-- <img src="image.jpg" alt="Regular img tag"> -->
            <!-- <script>console.log("Custom JS");</script> -->
            <!-- <style>body { color: red; }</style> -->
            <!-- <form> forms require special AMP components -->
        </article>
    </main>
</body>
</html>

Forbidden HTML Elements in AMP

JavaScript

<!-- These elements are COMPLETELY FORBIDDEN in AMP -->

<!-- Regular img tag - Use amp-img instead -->
<!-- <img src="image.jpg" alt="Image"> -->

<!-- Script tags (except AMP runtime) -->
<!-- <script>alert("Hello");</script> -->

<!-- Style tags (except amp-custom and amp-boilerplate) -->
<!-- <style>body { color: red; }</style> -->

<!-- Link tags for external stylesheets -->
<!-- <link rel="stylesheet" href="styles.css"> -->

<!-- Form elements (use amp-form instead) -->
<!-- <form action="/submit" method="post"> -->

<!-- Video and audio (use amp-video and amp-audio) -->
<!-- <video controls> -->
<!-- <audio controls> -->

<!-- Embed elements -->
<!-- <embed src="content.swf"> -->
<!-- <object data="content.pdf"> -->

<!-- Frame elements -->
<!-- <iframe src="page.html"> -->
<!-- <frame src="page.html"> -->

<!-- Input elements (without amp-form) -->
<!-- <input type="text" name="username"> -->
<!-- <button type="submit">Submit</button> -->

AMP-Specific Replacements for Forbidden Elements

JavaScript

<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    
    <!-- Required AMP component scripts -->
    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    
    <title>AMP Components Instead of Forbidden Elements</title>
    <link rel="canonical" href="https://example.com/regular-page.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    
    <style amp-custom>
        body { font-family: Arial, sans-serif; padding: 1rem; }
        .media-container { margin: 1rem 0; }
    </style>
</head>
<body>
    <h1>AMP Components for Multimedia</h1>
    
    <!-- Instead of <img> use <amp-img> -->
    <amp-img src="/images/photo.jpg" 
             alt="Photo description"
             width="800" 
             height="600"
             layout="responsive">
    </amp-img>
    
    <!-- Instead of <video> use <amp-video> -->
    <amp-video width="800" 
               height="450"
               layout="responsive"
               poster="/images/video-poster.jpg">
        <source src="/videos/sample.mp4" type="video/mp4">
        <source src="/videos/sample.webm" type="video/webm">
        <div fallback>
            <p>Your browser doesn't support HTML5 video.</p>
        </div>
    </amp-video>
    
    <!-- Instead of <iframe> use <amp-iframe> -->
    <amp-iframe width="800" 
                height="600"
                layout="responsive"
                frameborder="0"
                src="https://example.com/embed">
    </amp-iframe>
    
    <!-- Instead of <form> use <amp-form> -->
    <form method="post" action-xhr="/submit-form" target="_top">
        <fieldset>
            <legend>Contact Form</legend>
            <div>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div>
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="4" required></textarea>
            </div>
            <button type="submit">Send Message</button>
        </fieldset>
    </form>
</body>
</html>

CSS Restrictions in AMP

JavaScript

<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP CSS Restrictions Example</title>
    <link rel="canonical" href="https://example.com/regular-page.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    
    <!-- All custom CSS must be inline and under 50KB -->
    <style amp-custom>
        /* ALLOWED: Standard CSS properties */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 1rem;
        }
        
        /* ALLOWED: Class selectors */
        .header {
            background: #2196F3;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        
        /* ALLOWED: Element selectors */
        h1 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        
        /* ALLOWED: Media queries */
        @media (max-width: 768px) {
            h1 {
                font-size: 1.5rem;
            }
        }
        
        /* FORBIDDEN: !important is not allowed */
        /* .example { color: red !important; } */
        
        /* FORBIDDEN: behavior property */
        /* .example { behavior: url(script.htc); } */
        
        /* FORBIDDEN: -moz-binding */
        /* .example { -moz-binding: url(script.xml); } */
        
        /* FORBIDDEN: External references in CSS */
        /* .example { background: url(http://external.com/image.jpg); } */
    </style>
</head>
<body>
    <header class="header">
        <h1>AMP CSS Restrictions</h1>
    </header>
    
    <main>
        <p>This page demonstrates proper CSS usage in AMP.</p>
        <!-- Content must follow AMP restrictions -->
    </main>
</body>
</html>

Use Cases for AMP HTML Restrictions

News Websites

News sites benefit from AMP restrictions by ensuring articles load instantly on mobile devices, improving reader experience.

E-commerce Product Pages

Online stores can use AMP for product pages that load quickly, helping customers make faster purchasing decisions.

Blog Content

Personal and business blogs can implement AMP to improve mobile reading experience and search engine visibility.

Landing Pages

Marketing landing pages can use AMP restrictions to ensure maximum loading speed and conversion rates.

Advantages of AMP HTML Restrictions

Lightning-Fast Loading

Restrictions eliminate performance bottlenecks, ensuring pages load in under one second on mobile devices.

Improved SEO

Search engines favor AMP pages, often displaying them prominently in mobile search results.

Better User Experience

Fast-loading pages reduce bounce rates and keep users engaged with your content.

Guaranteed Performance

Restrictions ensure consistent performance across all devices and network conditions.

Limitations and Considerations

Reduced Functionality

Some interactive features and custom JavaScript functionality cannot be implemented in AMP.

Learning Curve

Developers need to learn AMP-specific components and restrictions, which differs from regular HTML.

Design Constraints

Certain design elements and animations may not be possible due to CSS and JavaScript restrictions.

Maintenance Overhead

Maintaining both regular HTML and AMP versions of pages requires additional development time.

Best Practices for AMP HTML Restrictions

Plan Your Content Strategy

Determine which pages benefit most from AMP and focus your efforts on those high-impact pages.

Use AMP Components Correctly

Always use the appropriate AMP component replacements for forbidden HTML elements.

Optimize CSS Usage

Keep your CSS under 50KB and avoid using restricted properties or values.

Test Thoroughly

Use AMP validation tools to ensure your pages comply with all restrictions.

Monitor Performance

Track loading times and user engagement metrics to verify AMP benefits.

Stay Updated

Keep up with AMP specification changes and new component releases.

Conclusion

AMP HTML restrictions might seem limiting at first, but they're carefully designed to ensure your web pages load incredibly fast on mobile devices. By understanding and following these restrictions, you can create web pages that provide exceptional user experiences and improved search engine visibility.

The key to working successfully with AMP restrictions is understanding that each limitation serves a specific purpose in achieving maximum performance. Replace forbidden elements with AMP components, keep your CSS inline and optimized, and focus on delivering fast, engaging content.

Start implementing AMP HTML restrictions in your mobile-focused web projects today, and you'll discover how these guidelines can help you create some of the fastest-loading web pages on the internet.