How do you render < and > in HTML?

0-2 years experience

1. 1We're building a blog where users can post code snippets. If a user writes 'if (x < y && y > z)', the browser tries to parse '< y' as an HTML tag and breaks the page. How would you write this in the raw HTML so it renders exactly as written?
2. 2Imagine you are writing a documentation page for a new framework and you need to display the literal text '<div>Hello World</div>' on the screen without the browser actually rendering a div box. How do you write that in your HTML file?

2-5 years experience

1. 1We have a React component that displays user comments. A user submitted a comment containing 'I <3 coding', but everything after the '<' disappeared on the page. What's happening under the hood, and how would you fix this safely without exposing us to XSS?
2. 2You're consuming an API that returns pre-escaped strings like '&lt;strong&gt;' from a legacy database, but you need to render them as actual bold text in a modern frontend application. What are the security risks of doing this, and how would you safely handle it?

5-8 years experience

1. 1We are building a markdown previewer component. Users can type raw HTML, markdown, and code blocks. How would you design the client-side sanitization pipeline to ensure that code blocks containing '<' and '>' are safely escaped, while legitimate formatting tags like '<b>' are allowed, without introducing XSS vulnerabilities?
2. 2Your team is migrating a legacy jQuery app to a modern SPA framework. The old app heavily relied on '.html()' to insert user-generated strings, which occasionally broke when users typed math symbols like '<' or '>'. How do you systematically audit and refactor these insertion points to use safe DOM APIs, and what fallback strategy would you use for strings that do require rich text?

8+ years experience

1. 1At our scale, we handle millions of user-generated posts daily across multiple micro-frontends. Some teams use React, others use Vue, and some legacy parts use raw templates. How would you design an organization-wide content sanitization and escaping strategy—spanning from the API gateway down to the client-side rendering layer—to prevent XSS while ensuring mathematical symbols and code snippets render correctly?
2. 2We've had a recurring issue where developers bypass framework-level escaping (like using 'dangerouslySetInnerHTML' or 'v-html') to render user content, occasionally leading to security incidents or broken layouts when users type '<' or '>'. How would you implement automated guardrails, linting, or CSP policies to enforce safe rendering practices across a 100+ engineer organization?