HTML
Challenge - Expert capstone
Write an app skeleton that combines all expert topics.
Expert capstone: overview
This challenge asks you to build an expert portfolio page that brings the whole expert level together. The page should combine an accessible dialog, ARIA tabs, a multilingual head, a security package, and responsive images. Build the skeleton correctly: <!DOCTYPE html>, <html lang="en" dir="ltr">, charset and viewport in head.
For security add CSP and referrer metas; for multilingual add canonical and hreflang links. Use landmarks (header, nav, main, footer) in content, <picture> and <source> for images. Include an accessible dialog too.
Exercise Head of the expert portfolio
Write the head of the expert portfolio. Start with <!DOCTYPE html>; use <html lang="en" dir="ltr"> as the root. In head add a CSP meta (http-equiv="Content-Security-Policy"), a referrer meta (name="referrer"), and a <link rel="canonical"> element.
Show example solution
doctype, root element, three metas, and a canonical link.
Example solution:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="no-referrer">
<link rel="canonical" href="https://site.example/en/">
<title>Expert Portfolio</title>
</head>
<body>
</body>
</html>
Exercise Body of the expert portfolio
Write the body of the expert portfolio. Add the <header>, <nav>, and <main> landmarks in order, each with content. Inside <main> place a <picture> element containing a <source> tag. Finally add a <dialog> element with aria-modal="true".
Show example solution
Three landmarks, a picture with source inside main, and finally an aria-modal dialog.
Example solution:
<body>
<header>
<h1>Expert Portfolio</h1>
</header>
<nav>
<a href="/en/">Home</a>
</nav>
<main>
<picture>
<source srcset="cover-wide.webp" media="(min-width: 800px)">
<img src="cover-narrow.webp" alt="Portfolio cover image" width="800" height="600">
</picture>
<button>Open settings</button>
</main>
<dialog aria-modal="true" aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
<button>Close</button>
</dialog>
</body>
Test yourself
-
Which must be present in head by requirement?
- <meta name="author">
- <link rel="preconnect">
- <meta charset="utf-8">
- <meta name="theme-color">
Show answer
<meta charset="utf-8"> — Correct. The charset meta declares the character encoding and is required.
-
Set the root element
<!DOCTYPE html>
<____>
<head>
</head>
<body>
</body>
</html>
Show answer
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
</head>
<body>
</body>
</html>
-
Match the landmark elements
- header
- Page header region
- nav
- Navigation links
- main
- Main content
- aside
- Side content
- footer
- Footer information
-
What is the canonical link used for?
- Marks the main version among duplicates
- Declares the page's SSL certificate
- Secures external links
- Defines the language code
Show answer
Marks the main version among duplicates — Correct. canonical marks the main page among duplicate versions.
-
Which of the following is true?
- CSP can only be set as an HTTP header
- aria-modal="true" declares the dialog is modal
- canonical hides duplicate versions
- noopener only works in Chrome
Show answer
aria-modal="true" declares the dialog is modal — Correct. aria-modal="true" conveys the modal state to screen readers.
Next lesson: Expert section exam
