A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore raw text elements and escaping rules using a short example that you can inspect and change.
The Idea in Plain English
Inside raw-text elements such as style, ordinary HTML tags are not parsed as regular child elements. Script elements have their own special parsing rules; a literal closing script sequence inside embedded JavaScript can end the element unexpectedly.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<style>
.notice {
color: darkblue;
}
</style>
<p class="notice">Notice me.</p>What Each Part Does
- The style element contains CSS rather than ordinary HTML body text.
- A paragraph keeps one idea together as readable text.
- class gives reusable identifiers for styling or structured conventions.
The browser interprets the content using the relevant language rather than building normal HTML elements.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: compare authored source against the DOM tree in DevTools focused on Raw Text Elements and Escaping Rules, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Pasting an untrusted string containing a closing script tag directly into inline JavaScript.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Inside raw-text elements such as style, ordinary HTML tags are not parsed as regular child elements. Script elements have their own special parsing rules; a literal closing script sequence inside embedded JavaScript can end the element unexpectedly.
- The browser interprets the content using the relevant language rather than building normal HTML elements.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.