How do you render < and > in HTML?

We'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?

Imagine 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?

We 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?

You're consuming an API that returns pre-escaped strings like '<strong>' 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?

We 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?

Your 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?

At 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?

We'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?