1
00:00:00,490 --> 00:00:03,860
Now that you've learned about HTML tags,
it's important to know that certain

2
00:00:03,860 --> 00:00:07,440
characters are reserved for
use in HTML code only.

3
00:00:07,440 --> 00:00:11,220
If you use reserved characters in your
content, the browser will interpret them

4
00:00:11,220 --> 00:00:15,130
as HTML code and the characters will
not appear in your content as expected.

5
00:00:15,130 --> 00:00:17,350
For example, the less than and

6
00:00:17,350 --> 00:00:21,260
greater than symbols are part
of the HTML syntax itself.

7
00:00:21,260 --> 00:00:25,670
As you know, they are used to define
opening and closing HTML tags.

8
00:00:25,670 --> 00:00:28,300
So if we use them as content in a webpage,

9
00:00:28,300 --> 00:00:31,370
the browser will think that
they are part of an HTML tag.

10
00:00:31,370 --> 00:00:36,300
For instance, if I type a less than
symbol in front of the text in the h1,

11
00:00:36,300 --> 00:00:40,850
the browser now thinks that the less than
symbol and the right angle bracket of

12
00:00:40,850 --> 00:00:46,960
the closing h1 tag are one
HTML tag nested inside the h1.

13
00:00:46,960 --> 00:00:51,234
So over in the browser, you'll see the
headline disappear and the tag line and

14
00:00:51,234 --> 00:00:53,730
navigation are on large bold letters.

15
00:00:53,730 --> 00:00:57,270
To display a reserved
character in your content,

16
00:00:57,270 --> 00:01:00,875
you'll need to use what
are called HTML entities.

17
00:01:00,875 --> 00:01:05,750
Entities are special codes HTML uses
to represent special characters and

18
00:01:05,750 --> 00:01:10,250
symbols like the less than and
the greater than reserved characters.

19
00:01:10,250 --> 00:01:15,030
HTML entities are also referred to as
escape codes or entity references,

20
00:01:15,030 --> 00:01:19,090
and always begin with an ampersand and
end with a semicolon.

21
00:01:19,090 --> 00:01:23,210
You can reference this chart of
all of the available HTML entities

22
00:01:23,210 --> 00:01:26,060
by visiting the link posted
in the teacher's notes.

23
00:01:26,060 --> 00:01:31,868
So to display the left angle bracket,
or less than sign, inside the h1,

24
00:01:31,868 --> 00:01:38,254
type an ampersand followed by lt, which
stands for less than, and a semi colon.

25
00:01:40,910 --> 00:01:44,350
And this displays the less
than symbol in the content.

26
00:01:44,350 --> 00:01:49,318
Similarly, to display a greater
than symbol in your content use

27
00:01:49,318 --> 00:01:53,922
ampersand gt, or greater than,
followed by a semicolon.

28
00:01:56,003 --> 00:01:58,205
You'll often use the lt and

29
00:01:58,205 --> 00:02:03,320
gt entities to display HTML
code snippets in your content.

30
00:02:03,320 --> 00:02:08,590
So, for example, I'll paste a block
of code below the paragraph tag, and

31
00:02:08,590 --> 00:02:13,740
this code block uses ampersand lt and
ampersand gt to properly

32
00:02:13,740 --> 00:02:19,230
display each HTML tag in
the browser like div and paragraph.

33
00:02:19,230 --> 00:02:24,140
And as you can see, it's placed inside
HTML pre tags which, by default,

34
00:02:24,140 --> 00:02:29,750
displays the text in a mono space font and
it also displays all of the spaces and

35
00:02:29,750 --> 00:02:33,360
line breaks in the text exactly
as they're typed in the code.

36
00:02:35,130 --> 00:02:36,646
You can have a look at this code and

37
00:02:36,646 --> 00:02:40,014
learn more about the pre-element in
the teacher's notes of this video.

38
00:02:43,247 --> 00:02:46,684
Since HTML entities
begin with an ampersand,

39
00:02:46,684 --> 00:02:52,130
that means the ampersand symbol is
also a reserved character in HTML.

40
00:02:52,130 --> 00:02:55,780
So if you type an ampersand
in your content,

41
00:02:55,780 --> 00:02:58,660
you'll see that your editor
highlights it in red.

42
00:02:58,660 --> 00:03:03,130
But most modern browsers will still
display the ampersand in your content.

43
00:03:03,130 --> 00:03:07,210
But it's usually a good idea to use an
HTML entity to ensure that the ampersand

44
00:03:07,210 --> 00:03:09,940
will display correctly in every browser.

45
00:03:09,940 --> 00:03:14,501
So, the code for an ampersand is,
ampersand followed by amp or

46
00:03:14,501 --> 00:03:16,058
amp and a semicolon.

47
00:03:18,831 --> 00:03:22,246
And you'll also use HTML
entities to display symbols and

48
00:03:22,246 --> 00:03:26,380
characters that are not available
on your computer's keyboard.

49
00:03:26,380 --> 00:03:30,640
So, for example, earlier we used
ampersand copy in the footer

50
00:03:30,640 --> 00:03:33,210
to display the copyright symbol.

51
00:03:35,010 --> 00:03:40,121
And if you need to display
extra spaces in your content,

52
00:03:40,121 --> 00:03:46,453
you can use ampersand nbsp,
which stands for non-breaking space.

53
00:03:48,736 --> 00:03:52,220
Each set of characters
represents one space.

54
00:03:52,220 --> 00:03:56,311
So, I'll add a few of these.

55
00:03:56,311 --> 00:04:00,353
And as you can see, the browser adds
extra space between experience and

56
00:04:00,353 --> 00:04:04,910
VR with the non-breaking space entities.

57
00:04:04,910 --> 00:04:07,490
Again, all the symbols
you are able to display

58
00:04:07,490 --> 00:04:11,240
are listed here in
the Character Entity Reference Chart.

59
00:04:11,240 --> 00:04:14,170
As you can see,
entities can display arrows,

60
00:04:14,170 --> 00:04:18,520
quotes, math operators,
trademark and currency symbols,

61
00:04:18,520 --> 00:04:22,750
even icons, like a phone, star and heart.

62
00:04:24,330 --> 00:04:26,440
So be sure to keep this
official chart of character

63
00:04:26,440 --> 00:04:31,709
entities handy when coding your projects.