← Back to HTML Lecture

HTML Interactive Demos

Learn HTML by exploring live examples

📄 Semantic Elements

Explore HTML5 semantic elements like article, section, nav, and more with real examples.

View Demo

📝 Forms & Inputs

Interactive examples of form elements, input types, and validation attributes.

View Demo

🖼️ Media Elements

Learn how to use images, audio, video, and figure elements properly.

View Demo

📊 Tables & Lists

Examples of tables, ordered lists, unordered lists, and description lists.

View Demo

🎨 Text Formatting

Explore text elements like headings, paragraphs, emphasis, and more.

View Demo

🔗 Links & Navigation

Different types of links, anchors, and navigation patterns.

View Demo

💡 How to Use These Demos

  1. Click on any demo card to explore specific HTML topics
  2. 🎛️ Use the "CSS: ON/OFF" button in each demo to toggle styles and see pure HTML structure
  3. View the rendered output and inspect the source code
  4. Try modifying the examples in your browser's developer tools
  5. Use "View Page Source" to see the complete HTML structure
🔥 Learning Tip: Click the "CSS: OFF" button in any demo to see how HTML looks without styling. This helps you focus on the semantic structure and understand vanilla HTML!

🚀 Getting Started with GitHub Pages

To view these demos online:

  1. Enable GitHub Pages in your repository settings
  2. Select the main branch and root directory
  3. Access your demos at: https://[your-username].github.io/learning-hub/frontend/core/html/demos/