Code Challenge: Unsemantic Markup

Semantic markup in HTML is a writing style for structuring your HTML applications.

For this tiny interview, you are to improve the accessibility of the blog page from the current score of 82 to 92. The following todo items have been outlined to help you achieve this goal:

• Edit the HTML source code made up of divs and unsemantic elements with appropriate semantic tags where they make sense.

• Identify the relevant divs and replace them with appropriate semantic tags such as nav, main, footer etc. as well as including HTML attributes such as alt, role, aria-label that improves accessibility

• In the end, the web page’s accessibility score on Lighthouse should go from the current score of 82 to the official solution’s Accessibility score of 98.

Code challenge solution

Verify your solution with the official solution in this sandbox.

More resources

We have made available these extra resources to improve your HTML coding skills:

• 25+ HTML/CSS/JS Interview questions

Want to conduct interviews on this platform?

Check out CoderPad : pick any interview question or create your own, then invite your candidate to a shared live-coding session on an IDE like this one. You even get 2 free interviews per month forever using this registration link!