Displaying HTML code on your page: escaping special characters
A few posts ago, I was writing about the use of HTML comments in code, and wanted to show some HTML code here. In other words, I wanted to display actual HTML code - tags - in an HTML document (which of course this blog page is). This wasn't as simple as I thought!
To cut to the chase, the problem was that I needed to escape the special characters that are part of HTML code. From the bit of research I did, this topic appears to be pretty complicated; this Wikipedia article might be helpful. Here's another article on Special Character Entities in HTML.
To escape the special characters, you just replace them with a sequence of letters and numbers, in your HTML. The opening bracket character, or mathematical "less than" sign, should be replaced with this sequence: "<" (without the quotation marks). The closing bracket character, or mathematical "greater than" sign, should be replaced with this sequence: ">" (without the quotation marks). This allows the browser to remain unconfused when interpreting your code, and to display the characters on the screen the way you want.
Here's an example:
<p>Here's some HTML code displayed on an HTML page.</p>
Here's the same example, marked up with the HTML "code" tag, which provides the correct semantic meaning, and allows the browser to display the code formatted slightly differently to set it apart:
To cut to the chase, the problem was that I needed to escape the special characters that are part of HTML code. From the bit of research I did, this topic appears to be pretty complicated; this Wikipedia article might be helpful. Here's another article on Special Character Entities in HTML.
To escape the special characters, you just replace them with a sequence of letters and numbers, in your HTML. The opening bracket character, or mathematical "less than" sign, should be replaced with this sequence: "<" (without the quotation marks). The closing bracket character, or mathematical "greater than" sign, should be replaced with this sequence: ">" (without the quotation marks). This allows the browser to remain unconfused when interpreting your code, and to display the characters on the screen the way you want.
Here's an example:
<p>Here's some HTML code displayed on an HTML page.</p>
Here's the same example, marked up with the HTML "code" tag, which provides the correct semantic meaning, and allows the browser to display the code formatted slightly differently to set it apart:
<p>Here's some HTML code displayed on an HTML page.</p> posted by Patty Ayers at
10:29 AM
2 Comments:
Your two examples appear the same to me. I checked on Opera and Firefox and they appear the same. Maybe I am missing your point. I looked at your source code and saw the only difference is that you added the tag "code" which creates a monospace type of font for the "p" tag. Were you trying to show the HTML code in the one and not the other?
Thanks for your comment, Edd. Yes, the only difference is that I wrapped the sentence in "code" tags. Browsers *should* display it differently, but you're right, they don't all do that. Internet Explorer does. My point was just to show that using the "code" tag is provided by the HTML specification so that code can be marked up with its semantic meaning, and that it's probably a good thing to use. (If this concept isn't familiar to you, this probably won't make much sense! Here's an article that might help: http://en.wikipedia.org/wiki/Semantic_markup. The fact that the browsers don't all display it differently makes it seem less useful, I agree, but the semantic meaning is still there, and we could always style the "code" tag with CSS.
Post a Comment
<< Home