easyFrontend Developer interview question
What is semantic HTML and why does it matter?
What the interviewer wants to hear
- Use elements that describe meaning, like header, nav, main, article, button
- Helps screen readers and keyboard users
- Improves SEO because search engines understand structure
- Gives built-in behaviour, for example button is focusable
- Easier for developers to read and maintain
Model answer
Semantic HTML means using elements that describe what the content is, not just how it looks. For example, header, nav, main, article and footer for page structure, h1 to h6 for headings in order, and button for things you click instead of a styled div. It matters first for accessibility: screen readers use landmarks and headings to let people jump around the page, and a real button is focusable and works with Enter and Space for free. It also helps SEO because search engines understand the structure and the main content better. Finally, it makes code easier to read and maintain, and it needs less ARIA and less custom JavaScript.
Can you answer it under time pressure?
Take a timed easy round and get scored on every answer.
More easy Frontend Developer questions
- Explain the CSS box model. What is the difference between content-box and border-box?
- What is the difference between var, let and const in JavaScript?
- In React, what is the difference between props and state?
- How do you make a web page responsive for mobile, tablet and desktop?
- What is the difference between Flexbox and CSS Grid, and when would you use each?
- What is a closure in JavaScript? Give a practical example of where you use one.
- How do you make a form accessible?
- A button on a page does not work when clicked. How would you use browser DevTools to find the problem?
- What is a Promise, and how does async/await relate to it?