What's the purpose of <hr>?

0-2 years experience

1. 1You need a simple visual break between two paragraphs on a static page. How would you use <hr> and what should you keep in mind?
2. 2If you place an <hr> inside a <section>, what does it communicate to the browser and to assistive technology?
3. 3What are the downsides of replacing an <hr> with a div that has a top border for visual separation?

2-5 years experience

1. 1Your team swapped several <hr> tags for CSS borders to match a new design, but accessibility tests now fail. Why might that happen?
2. 2You notice extra spacing around an <hr> in a responsive layout on mobile. How would you debug and resolve the issue?
3. 3We need to hide the <hr> on mobile devices while keeping it on desktop. How would you implement that without losing semantic meaning?

5-8 years experience

1. 1A documentation site contains thousands of <hr> elements as section dividers. Discuss the performance, maintainability, and SEO implications, and suggest any better approaches.
2. 2Design a reusable component library that abstracts the <hr> element to guarantee consistent styling and accessibility across multiple teams. What considerations would you include?
3. 3Legacy browsers render <hr> inconsistently. What fallback strategies would you employ to ensure a consistent visual break?

8+ years experience

1. 1Our organization is migrating a monolithic HTML help system to a component‑driven architecture. How would you handle existing <hr> usage to preserve semantics while enabling future styling flexibility?
2. 2When defining a company‑wide design system, how do you decide whether to expose <hr> as a primitive component versus providing a CSS utility, considering cross‑team collaboration and theming?
3. 3If multiple product lines need different visual styles for thematic breaks, how would you architect a solution that keeps <hr> semantically correct yet allows per‑team customization at scale?