HTML CSS
DevArabi
HTML Course

HTML Exam 3: Advanced Concepts and Best Practices (20 Challenges)

Previous Next

HTML Exam 3: Advanced

This exam includes 20 challenges focused on advanced concepts and best practices.
Exercises 1-10: Beginner level | Exercises 11-15: Intermediate level | Exercises 16-20: Advanced

Exercise 1 Accessibility (ARIA Roles)

Add appropriate ARIA attributes:

  1. You have a `div` styled as a close “X” button.
  2. Add `role=\"button\"` and `aria-label=\"Close\"`.
  3. Make it focusable (`tabindex=\"0\"`).
Solution
<div role="button" aria-label="Close" tabindex="0">X</div>
Exercise 2 Custom Data Attributes

Use data attributes:

  1. Create an `li` for a product with `data-id=\"12345\"`.
  2. Add `data-price=\"99.99\"`.
  3. Add `data-category=\"electronics\"`.
Solution
<li data-id="12345" data-price="99.99" data-category="electronics">
    Smartphone
</li>
Exercise 3 Relative Paths

Write the correct paths:

  1. You are in the `pages` folder; display `logo.png` from the same folder.
  2. Display `bg.jpg` from the `images` folder one level up.
Solution
<img src="logo.png" alt="Logo">
<img src="../images/bg.jpg" alt="Background">
Exercise 4 Favicon

Add a favicon:

  1. Add the code in the head to include `favicon.ico`.
  2. Use `rel=\"icon\"` and `type=\"image/x-icon\"`.
Solution
<link rel="icon" type="image/x-icon" href="/en/favicon.ico">
Exercise 5 Linking CSS and JavaScript

Link external files:

  1. Link `style.css` from the `css` folder.
  2. Link `script.js` from the `js` folder with `defer`.
Solution
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
Exercise 6 Global Attributes

Use global attributes:

  1. Make a paragraph editable (`contenteditable`).
  2. Add a tooltip to a button using `title`.
Solution
<p contenteditable="true">You can edit this text!</p>
<button title="Click here for more">Info</button>
Exercise 7 Open Graph (SEO)

Add Open Graph tags:

  1. `og:title` for the title.
  2. `og:image` for the preview image.
  3. `og:description` for the description.
Solution
<meta property="og:title" content="My Page Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Page description">
Exercise 8 Emojis

Display emojis:

  1. Ensure UTF-8 is used in the head.
  2. Display a smiling face using an HTML code.
Solution
<meta charset="UTF-8">
<p>Hello &#128512;</p>
Exercise 9 Optgroup

Group options in a dropdown:

  1. Create a `select` for cars.
  2. Group under “German Cars” and “Japanese Cars”.
Solution
<select name="cars">
    <optgroup label="German Cars">
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="Japanese Cars">
        <option value="toyota">Toyota</option>
    </optgroup>
</select>
Exercise 10 Base Tag

Use the base tag:

  1. Make all links open in a new tab by default.
Solution
<head>
    <base target="_blank">
</head>
Exercise 11 ARIA Live Regions Intermediate

Create a live updates region:

  1. Use aria-live="polite" for non-urgent notifications.
  2. Add role="status" to the region.
Solution
<div role="status" aria-live="polite" aria-atomic="true">
    Changes saved successfully
</div>
Exercise 12 Microdata (Schema.org) Intermediate

Add microdata for a person:

  1. Use itemscope and itemtype="http://schema.org/Person".
  2. Add itemprop for the name and job title.
Solution
<div itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Ahmed Mohamed</span>
    <span itemprop="jobTitle">Web Developer</span>
</div>
Exercise 13 Preload and Prefetch Intermediate

Improve loading performance:

  1. Use preload for an important font.
  2. Use prefetch for a page the user may visit.
Solution
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/en/next-page.html">
Exercise 14 DNS Prefetch Intermediate

Speed up connections to external domains:

  1. Use dns-prefetch for Google Fonts.
  2. Add preconnect for a CDN.
Solution
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
Exercise 15 App Manifest (PWA) Intermediate

Link the manifest file:

  1. Add a link to manifest.json.
  2. Add theme-color for the browser.
Solution
<link rel="manifest" href="/en/manifest.json">
<meta name="theme-color" content="#4285f4">
Exercise 16 Structured Data (JSON-LD) Advanced

Add structured data for an article:

  1. Use JSON-LD in a script with type="application/ld+json".
  2. Set @type to Article.
  3. Add headline, author, datePublished.
Solution
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "author": {
    "@type": "Person",
    "name": "Ahmed Mohamed"
  },
  "datePublished": "2024-01-01"
}
</script>
Exercise 17 Accessibility Tree Advanced

Create a fully accessible navigation menu:

  1. Use nav with aria-label.
  2. Add role="menubar" to the list.
  3. Use aria-current="page" for the current page.
Solution
<nav aria-label="Main navigation">
    <ul role="menubar">
        <li role="none">
            <a href="/en/" role="menuitem" aria-current="page">Home</a>
        </li>
        <li role="none">
            <a href="/en/about" role="menuitem">About Us</a>
        </li>
    </ul>
</nav>
Exercise 18 Advanced Resource Hints Advanced

Use all types of resource hints:

  1. dns-prefetch for an external domain.
  2. preconnect for an API.
  3. prefetch for the next page.
  4. preload a critical CSS file.
Solution
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preconnect" href="https://api.example.com">
<link rel="prefetch" href="/en/next-page.html">
<link rel="preload" href="critical.css" as="style">
Exercise 19 Security Headers Advanced

Add security meta tags:

  1. Content Security Policy.
  2. X-Content-Type-Options.
  3. Referrer Policy.
Solution
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta name="referrer" content="no-referrer-when-downgrade">
Exercise 20 Project: Perfect SEO Page Advanced

Create a full head for an SEO-optimized page:

  1. All essential meta tags.
  2. Open Graph and Twitter Cards.
  3. JSON-LD structured data.
  4. Resource hints.
  5. Security headers.
Solution
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title - Site</title>
    <meta name="description" content="A complete description of the page">
    <link rel="canonical" href="https://example.com/page">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Page description">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/page">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    
    <!-- Resource Hints -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="//cdn.example.com">
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "Page Title"
    }
    </script>
</head>
Previous Next
Smart Editor

Write code and see the result instantly

Try it free