Skip to main content

Phase 6 Exercises: Professional HTML 💼

Mentor's Note: Professional HTML goes beyond structure — it's about making your pages discoverable, accessible, and fast. These exercises teach you the meta tags, attributes, and structured data that separate hobby sites from production-grade web pages.

📍 Prerequisites​

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow​

🔰 Starter Challenge: Add SEO Meta Tags​

Title​

Add SEO Meta Tags to an Existing HTML Page

Description​

Take a basic HTML page and enhance it with a complete set of SEO and social media meta tags. Add a <title> tag, meta description, Open Graph tags (og:title, og:description, og:image, og:url), and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image). This exercise teaches you how to make any page shareable and search-engine friendly.

Learning Objectives​

  • Write a descriptive, keyword-rich <title> tag (50-60 characters)
  • Craft a compelling meta description (150-160 characters)
  • Implement Open Graph tags for Facebook, LinkedIn, and Slack previews
  • Implement Twitter Card tags for X/Twitter previews
  • Understand how search engines and social platforms use these tags

Expected Output​

An HTML page whose <head> contains:

  • A <title> tag with a concise, descriptive page title
  • A <meta name="description"> tag with a clear summary
  • Open Graph meta tags: og:title, og:description, og:image, og:url, og:type
  • Twitter Card meta tags: twitter:card, twitter:title, twitter:description, twitter:image
  • Correct values that match the page content

⭐ Medium Challenge: Accessibility Audit & Fix​

Title​

Audit an HTML Page for Accessibility Issues and Fix Them

Description​

Take a deliberately inaccessible HTML page and audit it for WCAG violations. Identify and fix issues including missing alt text on images, missing form labels, insufficient color contrast, missing heading hierarchy, and missing ARIA landmarks. Document each issue found and the fix applied.

Learning Objectives​

  • Use DevTools and browser extensions to identify accessibility issues
  • Add descriptive alt text to all images
  • Associate labels with form inputs using the for attribute or ARIA labels
  • Ensure proper heading hierarchy (h1 → h2 → h3, no skipping)
  • Add ARIA landmarks (role="navigation", role="main", role="banner")
  • Check and fix color contrast issues

Expected Output​

  • An HTML page with all accessibility issues fixed
  • All images have meaningful alt text
  • All form inputs have associated <label> elements
  • Correct heading hierarchy throughout the page
  • ARIA landmark roles on all major sections
  • A brief document listing each issue found and the fix applied

🏆 Hard Challenge: Professional Article Page​

Title​

Create a Complete Professional Article Page

Description​

Build a production-ready article page that combines everything from Phase 6. Include: SEO meta tags (title, description, Open Graph, Twitter Card), JSON-LD structured data (Article schema), accessibility attributes (ARIA landmarks, roles, labels, alt text), and performance optimizations (lazy loading images, preconnect hints, proper viewport meta). The result should score 90+ on Lighthouse audits for SEO, Accessibility, and Performance.

Learning Objectives​

  • Combine SEO meta tags, JSON-LD, ARIA, and performance features in one page
  • Write valid JSON-LD structured data inside a <script type="application/ld+json"> block
  • Use loading="lazy" for below-the-fold images
  • Add <link rel="preconnect"> for external resources
  • Set aria-label and aria-labelledby on interactive elements
  • Test with Lighthouse and achieve 90+ in SEO, Accessibility, and Performance

Expected Output​

A browser page showing:

  • A professional article layout with semantic HTML5 tags
  • Complete SEO meta tags including OG and Twitter Card
  • JSON-LD script block with Article schema (headline, author, datePublished, publisher)
  • ARIA attributes on all landmarks, navigation, and interactive elements
  • Performance optimizations (lazy loading, preconnect, optimized images)
  • Lighthouse scores of 90+ in SEO, Accessibility, and Performance categories

💡 Tips for Success​

  • Use the Open Graph Debugger to preview how your page looks when shared
  • Test Twitter Cards with the Card Validator
  • Validate JSON-LD with Google's Rich Results Test
  • Use Chrome DevTools → Lighthouse tab to run performance and accessibility audits
  • Install the axe DevTools extension for detailed accessibility analysis

← Back to HTML Exercises