MODULE 01

HTML5 Architecture & Boilerplate

Learn how the modern web is structured using semantic HTML5 markup and responsive viewports.

📌 Prerequisites: Basic familiarity with computer file systems and browser operations.

HTML5 is the universal foundation of every website on the planet. It organizes content into a logical, accessible Document Object Model (DOM) that browsers and search engines can interpret.

💡 Agency Best Practice: Mobile-First Viewport & SEO Readiness

Always declare <!DOCTYPE html> and include <meta name='viewport' content='width=device-width, initial-scale=1.0'> to ensure responsive scaling on mobile screens.

Syntax & Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Web App</title>
</head>
<body>
  <h2>🚀 Infinite Academy HTML5</h2>
  <button onclick="alert('HTML5 Loaded!')">Click Me</button>
</body>
</html>

⚠️ Common Pitfalls: Forgetting to close tags or omitting the viewport meta tag on mobile devices.

🏋️ Hands-On Practice Task:

Modify the title tag and add your business contact details inside the main container.

📌 Key Takeaways

<!DOCTYPE html> tells the browser to use modern HTML5 rendering.
<html lang='en'> declares page language for accessibility.
The <head> stores metadata, while <body> renders visible interface.