diff --git a/curriculum/challenges/english/blocks/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/english/blocks/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md index bbc119898ea..ba7f757a044 100644 --- a/curriculum/challenges/english/blocks/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md +++ b/curriculum/challenges/english/blocks/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md @@ -5,41 +5,65 @@ challengeType: 19 dashedName: what-are-html-entities --- -# --description-- +# --interactive-- -An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. In this example, there is a paragraph element with an image element nested inside: +An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. + +Let's say you wanted to display the text `This is an element` on the screen. If you use the code currently in the editor, it won't display the desired result. Even if you added `src` and `alt` attributes to the example, it would show an image in the middle of the paragraph. Not the desired result. + +:::interactive_editor ```html

This is an element

``` -The text on the screen should say `This is an element`. However, the text currently says `This is an element.` This is happening because when the HTML parser sees the less than (`<`) symbol followed by an HTML tag name, it interprets that as an HTML element. +::: -To fix this issue, you can use HTML entities. Here is an updated example using the correct HTML entities for the less than and greater than (`>`) symbols. +When the HTML parser sees the less than (`<`) symbol followed by an HTML tag name, it interprets that as an HTML element. That is why you are not getting the desired result of `This is an element` on the screen. + +To fix this issue, you can use HTML entities. Here is an updated example using the correct HTML entities for the less (`<`) than and greater than (`>`) symbols. Now you should see `This is an element` on the screen. + +Try adding a `<p>learning is fun</p>` below the paragraph element. You should see `

learning is fun

` on the screen. + +:::interactive_editor ```html

This is an <img /> element

+ ``` -These types of character references are known as named character references. Named references start with an ampersand sign (`&`) and end with a semicolon (`;`). By using a named character reference, the HTML parser will not confuse this with an actual HTML element. Here is what the updated paragraph element looks like on the page: `This is an element`. Now, users will be able to see the entire image element syntax as you intended it. +::: -Another type of character reference would be the decimal numeric reference. Here is an example of using the decimal numeric reference for the less than symbol: +These types of character references are known as named character references. Named references start with an ampersand sign (`&`) and end with a semicolon (`;`). By using a named character reference, the HTML parser will not confuse this with an actual HTML element. + +Another type of character reference would be the decimal numeric reference. This character reference starts with an ampersand sign and hash symbol (`#`), followed by one or more decimal digits, followed by a semicolon. + +Here is an example of using the decimal numeric reference for the less than symbol. + +Change the code in the editor to see different symbols. You can use `©` for the copyright symbol and `®` for the trademark symbol. + +:::interactive_editor ```html < ``` -This character reference starts with an ampersand sign and hash symbol (`#`), followed by one or more decimal digits, followed by a semicolon. +::: -The last type of character reference would be the hexadecimal numeric reference. Here is an example of using the hexadecimal numeric reference for the less than symbol: +The last type of character reference would be the hexadecimal numeric reference. This character reference starts with an ampersand sign, hash symbol, and the letter `x`. Then it is followed by one or more ASCII hex digits and ends with a semicolon. + +Here is an example of using the hexadecimal numeric reference for the less than symbol. + +Change the code in the editor to see different symbols. You can use `€` for the euro symbol and `Ω` for the Greek capital letter Omega symbol. + +:::interactive_editor ```html < ``` -This character reference starts with an ampersand sign, hash symbol, and the letter `x`. Then it is followed by one or more ASCII hex digits and ends with a semicolon. +::: -So what are some other examples of using HTML entities? Well, you often see them used for symbols like the copyright symbol (`©`), quotes (`"`), trademark symbol (`™`), and the ampersand sign. # --questions--