HTML Entities and Reserved Characters4:36 with Guil Hernandez
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.
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 users 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 free 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 you 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 4:03 VR with the non-breaking space entities. 4:04 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 characters 4:24 entities handy when coding your projects. 4:30
You need to sign up for Treehouse in order to download course files.Sign up