Semantic pages practice
Juniper Works is preparing a handoff screen for another team. The content is new, but the structures are ones you have used already: page regions, ordered instructions, named media, labels, and keyboard controls. Choose the native element from the job it has to do. A decorative square should stay silent, while a route illustration needs a description. A control's visible label should remain connected when its starting value changes. Each task is independent and includes another fixture behind the visible one. Read the expected behavior, repair the smallest relevant structure, and check the complete relationship rather than one word on the screen.
<header><span data-text="org"></span></header><nav aria-label="Routes"><a data-text="org" data-href="href"></a></nav><main><h1 data-text="title"></h1></main>
body{font:16px/1.5 system-ui,sans-serif;color:#17243b;background:#fff;margin:20px} button,input,select{font:inherit} button,a,input,select,summary{outline-offset:4px} img{max-width:100%} [hidden]{display:none!important}
for (const el of document.querySelectorAll('[data-text]')) el.textContent = String(fixture[el.dataset.text] ?? '');
for (const el of document.querySelectorAll('[data-href]')) el.setAttribute('href', fixture[el.dataset.href]);
for (const el of document.querySelectorAll('[data-alt]')) el.setAttribute('alt', fixture[el.dataset.alt]);
for (const el of document.querySelectorAll('[data-value]')) el.value = String(fixture[el.dataset.value] ?? '');
for (const el of document.querySelectorAll('[data-items]')) for (const text of fixture.items) { const li = document.createElement('li'); li.textContent = text; el.append(li); }
document.documentElement.style.setProperty('--fixture-gap', fixture.gap + 'px');
Read the markup and styles together, then trace the resulting control or layout.