Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Certain characters are reserved for use in HTML code only. If you use reserved characters in your content, the browser will interpret them as HTML code, and the characters will not appear in your content as expected.
Content Snippets
<pre>
<div>
This is a div...
<p>This paragraph is nested</p>
</div>
</pre>
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you've learned about HTML tags,
it's important to know that certain
0:00
characters are reserved for
use in HTML code only.
0:03
If you use reserved characters in your
content, the browser will interpret them
0:07
as HTML code and the characters will
not appear in your content as expected.
0:11
For example, the less than and
0:15
greater than symbols are part
of the HTML syntax itself.
0:17
As you know, they are used to define
opening and closing HTML tags.
0:21
So if we use them as content in a webpage,
0:25
the browser will think that
they are part of an HTML tag.
0:28
For instance, if I type a less than
symbol in front of the text in the h1,
0:31
the browser now thinks that the less than
symbol and the right angle bracket of
0:36
the closing h1 tag are one
HTML tag nested inside the h1.
0:40
So over in the browser, you'll see the
headline disappear and the tag line and
0:46
navigation are on large bold letters.
0:51
To display a reserved
character in your content,
0:53
you'll need to use what
are called HTML entities.
0:57
Entities are special codes HTML uses
to represent special characters and
1:00
symbols like the less than and
the greater than reserved characters.
1:05
HTML entities are also referred to as
escape codes or entity references,
1:10
and always begin with an ampersand and
end with a semicolon.
1:15
You can reference this chart of
all of the available HTML entities
1:19
by visiting the link posted
in the teacher's notes.
1:23
So to display the left angle bracket,
or less than sign, inside the h1,
1:26
type an ampersand followed by lt, which
stands for less than, and a semi colon.
1:31
And this displays the less
than symbol in the content.
1:40
Similarly, to display a greater
than symbol in your content use
1:44
ampersand gt, or greater than,
followed by a semicolon.
1:49
You'll often use the lt and
1:56
gt entities to display HTML
code snippets in your content.
1:58
So, for example, I'll paste a block
of code below the paragraph tag, and
2:03
this code block uses ampersand lt and
ampersand gt to properly
2:08
display each HTML tag in
the browser like div and paragraph.
2:13
And as you can see, it's placed inside
HTML pre tags which, by default,
2:19
displays the text in a mono space font and
it also displays all of the spaces and
2:24
line breaks in the text exactly
as they're typed in the code.
2:29
You can have a look at this code and
2:35
learn more about the pre-element in
the teacher's notes of this video.
2:36
Since HTML entities
begin with an ampersand,
2:43
that means the ampersand symbol is
also a reserved character in HTML.
2:46
So if you type an ampersand
in your content,
2:52
you'll see that your editor
highlights it in red.
2:55
But most modern browsers will still
display the ampersand in your content.
2:58
But it's usually a good idea to use an
HTML entity to ensure that the ampersand
3:03
will display correctly in every browser.
3:07
So, the code for an ampersand is,
ampersand followed by amp or
3:09
amp and a semicolon.
3:14
And you'll also use HTML
entities to display symbols and
3:18
characters that are not available
on your computer's keyboard.
3:22
So, for example, earlier we used
ampersand copy in the footer
3:26
to display the copyright symbol.
3:30
And if you need to display
extra spaces in your content,
3:35
you can use ampersand nbsp,
which stands for non-breaking space.
3:40
Each set of characters
represents one space.
3:48
So, I'll add a few of these.
3:52
And as you can see, the browser adds
extra space between experience and
3:56
VR with the non-breaking space entities.
4:00
Again, all the symbols
you are able to display
4:04
are listed here in
the Character Entity Reference Chart.
4:07
As you can see,
entities can display arrows,
4:11
quotes, math operators,
trademark and currency symbols,
4:14
even icons, like a phone, star and heart.
4:18
So be sure to keep this
official chart of character
4:24
entities handy when coding your projects.
4:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up