Interactive HTML Exercises
Practice what you've learned with these interactive exercises. Each exercise includes:
- 👁️ Preview: See the HTML rendered live
- </> Code: View and copy the source code
- 📝 <strong:>Instructions</strong: Learn what each exercise teaches
HTML Exercises
📝 Headings
Use HTML heading tags (<h1> through <h6>) and practice styling them with colors and alignment.
🔗 Links
Master the <a> tag to create hyperlinks, internal navigation, and understand link attributes.
📊 Tables
Build structured data with table tags, understand rows and columns, and style tables with CSS.
📋 Forms
Build interactive forms with input fields, labels, buttons, and validation for user input.
Topics covered:
- Creating hyperlinks with
href - Target attributes (
_blank,_self) - Linking to different pages and sections
- Embedding videos with iframes
Tables Exercise
Build structured data tables using <table>, <tr>, <td>, and related elements.
Topics covered:
- Table structure (
<thead>,<tbody>,<tfoot>) - Table cells and rows
- Table styling and borders
- Responsive tables
Form Exercises - The Treasure Hunt
A series of progressively harder form exercises in an interactive “Treasure Hunt” game!
Form Stage 1: Basic Structure
Learn the fundamentals of HTML forms.
- Basic form element
- Text input fields
- Submit buttons
- Challenge: Answer the clue and find the tag name!
Form Stage 2: Input Types
Explore different input types and form controls.
- Email and password inputs
- Checkboxes and radio buttons
- Select dropdowns
- Challenge: Continue the treasure hunt!
Form Stage 3: Advanced Features
Master advanced form features and validation.
- Form validation attributes
- Required fields
- Pattern matching
- Accessibility attributes
- Challenge: Final clue before the ultimate form!
Form Final: Complete Project
Put it all together with a complete, real-world form.
- Multi-element form integration
- Accessible form design
- Proper labeling and grouping
- Form styling
- Achievement: Complete the treasure hunt! 🎉
Tips for Using These Exercises
- Start with Preview - See what the finished result looks like
- View the Code - Understand how it’s built by checking the Code tab
- Read Instructions - Each exercise has detailed learning objectives
- Take Notes - Copy code snippets for reference
- Modify & Experiment - Try changing values and see what happens
- Test in Real Browser - Open individual exercises in new tabs for full interactivity
Getting Help
If you get stuck:
- Review the instructions section for each exercise
- Check the Code tab to see the source HTML
- Re-read the main documentation sections
- Try modifying the code and see what changes
- Experiment with different HTML tags and attributes
Challenge Yourself
After completing exercises:
- Combine what you learned - Create your own HTML page using multiple concepts
- Fix the code - Each exercise has intentional issues to fix with CSS
- Extend the design - Add more content or styling
- Create variations - Make similar pages with different content
- Build projects - Use these skills to create real websites!