There are going to be times that you're going to want to use a character or
a symbol that's not readily available on your keyboard.
What's more, you might want to use a symbol that's actually reserved for
use by HTML that you're really not supposed to use.
For example, using the left or
right angle brackets in your content could actually cause rendering errors.
So if you want to use those special characters,
you're going to have to use something, that's called a named character entity.
And in order to explore those we're going to be using
the special.htm file found in the 03_06 directory.
And I have this page open and
you can see right off the bat that there's a potential problem with it.
Brackets does a really nice thing,
whenever it finds what it thinks to be an error in code.
It gives me this little warning by code coloring the text red.
And the potential problem is this angle bracket right here that
we're using in the text.
If a browser or other user agent sees this, it's probably going to
assume that we wanted to start opening a tag and just didn't finish it.
That could lead to syntax errors, validation problems and
even rendering errors.
Now if I look at this page in the browser, I can see that it's rendering okay but
that's just because Chrome is being extra nice to me at the moment.
That's definitely not something you want to try and get away with.
So let's talk about displaying special characters, and
the text that I have here for you the page describes it pretty well.
So as I mentioned, using the left angle bracket can cause rendering issues.
But we have also other characters that are available to us that you can't really type
through a keyboard, so something like the trademarks symbol or the copyright symbol.
Maybe it's something that is used by other languages or something like that.
So that's where we turn to named character entities.
Now these are special codes that browser user agents will recognize them and
then replace them with the character that you need.
The syntax form is really, really straight forward.
We start with an ampersand, then we follow by using the named entity itself, and
then we'd follow that with a semicolon.
Let's go take a look at that.
So if I go back into my code,
I can replace this left angle bracket with an ampersand, so
we always start with an ampersand, and then I'm going to type in L-A-N-G.
Now how do I know to type that in?
Well, I just happen to know what the named character entity is for
left angle bracket.
So these are some of the things that you're just either going to have to know
or have a reference handy, and I'm going to show you at the very end of this
that I've got a nice link for a reference for you.
So there is ampersand L-A-N-G semicolon.
If I save this, go back to the browser,
I can see that it doesn't really render any differently.
But what's nice about that is the browser is recognizing that
named character entity and replacing that text with the actual symbol that we want.
Now, sometimes, that's easy to do and sometimes, it takes a little bit of work.
Let me scroll down, and
in the second paragraph below that, you'll notice that we have some text here.
It says, you start with an ampersand, then we displayed an ampersand,
followed by the named entity that's followed by a semicolon.
To display the ampersand for example you would type in, ampersand.
Well that's not right at all.
If I go back into the code I can see I'm having problems.
You see that is the syntax for the named character entity for the ampersand.
So there are two things here that I need to be correct.
One, I don't want just an ampersand here, you can see that's code
colored red by brackets to let me know that that could be a problem.
I'm going to replace that with the named character entity,
which is ampersand A-M-P semicolon.
All right, down here, I actually want this to display within the text.
In order to do that, what I'm going to do is
I'm going to follow this named character entity because, remember,
that's just displaying the ampersand, with the text A-M-P semicolon.
So it kind of looks like I'm doing it twice, but bear with me.
These are just individual characters, A-M-P semicolon.
This is actually a named character entity which will display the actual ampersand.
So if I save this, go back in the browser and refresh this.
You can see right there,
I'm getting the text to display exactly the way that I want to.
And here we still have our ampersand.
Now just so you can have a little bit more practice,
let's take a look at the copyright and trademark symbols.
So if I go through there,
I want to replace this text with the actual symbols themselves.
So I'm going to take copyright, and replace that.
So remember, we start with an ampersand, and
then after that, the name of the named character entity.
Now a lot of these, you could probably guess if you had to.
So for this one, we're going to use copy, and then a semicolon.
For trademark, see if you can guess that, so ampersand trade.
I'm guessing that most of you were able to guess that properly.
So if I save that, go back in the browser,
I can see indeed that I'm seeing my copyright and trademark symbols.
So some of these are pretty self explanatory.
Some of them are pretty easy to guess, but there are literally hundreds of them.
So it’s really difficult to keep track of all of them or have them all memorized.
That’s why it’s nice to have a little reference and I’ve given you a link here
to a page on Wikipedia, where we have a list of XML and HTML character entities.
If I scroll down, you see I have a really big table here of HTML character
entities and you can see the character that's displayed and the name of it.
So to display quotation mark, for example, you would do ampersand, Q-U-O-T and
then a semicolon, so that's kind of how that works.
And as I scroll through here, you can see how many of them there are and
there are a lot of them.
So the hardest part of using these named character entities is for
the most part remembering them.
That's why it's a good reason to bookmark a page like this, so that you can have
a reference like this Wikipedia page handy while you're authoring your own HTML.