Escape Text for HTML Output

Select a timestamp to watch that moment on YouTube.

1. 00:00

   Suppose a learner enters the label angle bracket b angle bracket bold question mark closing b. Our page should display exactly that text. If we interpolate the raw label into an HTML string, the browser may instead interpret those brackets as markup and show only bold question mark in bold type. That is a change of meaning caused by the output context. Today we will compare the raw and escaped strings, then write a small renderer that keeps its tag and class fixed while treating the supplied label as text. The Python browser console prints these strings so we can inspect them; it does not render the strings as live HTML.

2. 00:42

   That is useful because we can see the exact character references before a browser turns them back into the visible characters. We will use the standard library html.escape function rather than a series of hand-written replacements. We will also test ampersands, quotes, empty labels, and ordinary labels. Finally we will draw a clear boundary around the technique: HTML text escaping does not validate a URL destination and does not sanitize arbitrary user-supplied markup. First, watch the raw string and decide which part is fixed code and which part is variable data. The console has not executed any markup.

3. 01:24

   It only prints a string. But if this exact string is inserted into an HTML document as markup, the inner b element may be interpreted as a tag rather than displayed literally. The second line is a simple probe: the raw opening tag sequence still appears inside the generated markup. The fixed span is supposed to be markup; the label is supposed to be data. Those two roles should not be confused. A broader example could contain an ampersand or a quote, and each special character can matter differently depending on whether text is placed in an element body or a quoted attribute. Our function will keep the class attribute fixed, so we only insert the label into

4. 02:06

   the span's body. That gives us one clear output context. We should escape the variable label just before inserting it into HTML output, leaving the original input string available for other work such as search or storage. A common mistake is to strip angle brackets or write multiple replace calls. That can discard legitimate text or double-escape a newly inserted ampersand. Python already has a function for this exact HTML representation. The angle brackets become character references, the ampersand becomes amp, and the double quote becomes quot.

5. 02:46

   The apostrophe in the last line becomes a numeric character reference. With quote=True, html.escape covers both quote characters as well as ampersands and angle brackets. When these references are later interpreted in an HTML text node, the person sees the original label characters rather than a new tag. This is encoding for an output context, not deleting content. Notice that the original label still exists in our Python variable. We did not need to mutate it at input time. If we later place a value into a different context, such as a JavaScript string, CSS property, or URL, we need rules for that context instead.

6. 03:31

   Likewise, escaping a URL's characters does not decide whether a link points somewhere acceptable. For this lesson, we simplify the interface: there is no variable tag name, no variable attribute name, and no variable URL. Only the text between fixed span tags changes. That makes the rendering function small enough to reason about and test directly. Let us apply the escape at that precise boundary. The span and its class are fixed strings chosen by the program. Only the label varies, and that label is converted with html.escape before entering the returned markup. The first line shows the angle brackets and ampersand as references; the second

7. 04:14

   shows the quote inside the label is encoded. Compare this with the broken run: there is no raw less-than b tag supplied by the input between the fixed span tags. We can reason about the function's behavior without running an HTML renderer because the returned strings contain exactly the references we expect. You might notice that quote escaping is more than an element text node strictly needs. That is acceptable here and reinforces how quote=True behaves, but it does not make the function a universal sanitizer. If callers could choose an attribute value, a tag name, a URL, or a script,

8. 04:54

   each would need additional design. A production web framework usually provides automatic context-aware escaping through its template engine; using that is safer than manually concatenating markup throughout an application. For this focused Python exercise, the function's contract is intentionally narrow and fully testable in the console. Now we should check the less dramatic inputs that often reveal accidental special cases. An empty label produces an empty fixed span rather than an error or a different tag. Ordinary text stays readable. The apostrophe gets a character reference because we explicitly requested quote

9. 05:35

   escaping. These are small assertions, but they help prove that the function does not remove user text or change the surrounding markup based on the value. There is one mistake to avoid after this: do not call html.unescape on the result just before inserting it into a page. That would turn the references back into syntax characters at the moment we most need the escaping. Also remember that this function is for HTML text within our fixed element. It does not decide whether a user- controlled href points to a safe site, and it does not turn arbitrary input HTML into sanitized HTML.

10. 06:18

    If a larger application needs to accept formatted markup, use a dedicated sanitizer with a well-defined allowlist and your framework's escaping facilities. On the lesson page, try the checked task, then replace the label with your own combination of ampersands, quotes, and brackets. Before you press run, predict the exact references you expect to see. That habit of naming the output context before inserting data is the reusable skill here.