Introduction
HTML entities are used to display reserved characters in HTML, such as <, >, and &, which would otherwise be interpreted as HTML code. They are also used to display characters that are not present on a standard keyboard, such as ©, ®, and ™.
Key Concepts
-
What are HTML Entities?
- HTML entities are special codes that represent characters in HTML.
- They start with an ampersand (
&) and end with a semicolon (;).
-
Common HTML Entities
<for<>for>&for&"for"'for'
-
Why Use HTML Entities?
- To display reserved characters that have special meanings in HTML.
- To display characters that are not available on the keyboard.
- To ensure that the HTML code is correctly parsed by browsers.
Practical Examples
Example 1: Displaying Reserved Characters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Entities Example</title>
</head>
<body>
<p>To display a less than sign, use <.</p>
<p>To display a greater than sign, use >.</p>
<p>To display an ampersand, use &.</p>
</body>
</html>Explanation:
- The
<entity is used to display the<character. - The
>entity is used to display the>character. - The
&entity is used to display the&character.
Example 2: Displaying Special Characters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Entities Example</title>
</head>
<body>
<p>Copyright symbol: ©</p>
<p>Registered trademark symbol: ®</p>
<p>Trademark symbol: ™</p>
</body>
</html>Explanation:
- The
©entity is used to display the © symbol. - The
®entity is used to display the ® symbol. - The
™entity is used to display the ™ symbol.
Practical Exercises
Exercise 1: Display Reserved Characters
Task: Create an HTML page that displays the following text:
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercise 1 Solution</title>
</head>
<body>
<p>To write HTML code, use <html> tags.</p>
</body>
</html>Exercise 2: Display Special Characters
Task: Create an HTML page that displays the following text:
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercise 2 Solution</title>
</head>
<body>
<p>The copyright symbol is ©, the registered trademark symbol is ®, and the trademark symbol is ™.</p>
</body>
</html>Common Mistakes and Tips
-
Mistake: Forgetting the semicolon (
;) at the end of an entity.- Tip: Always ensure that your HTML entities are complete with a semicolon.
-
Mistake: Using HTML entities for characters that do not need them.
- Tip: Only use HTML entities for reserved characters or special symbols that are not available on the keyboard.
Conclusion
In this section, you learned about HTML entities, their purpose, and how to use them to display reserved and special characters in HTML. Understanding HTML entities is crucial for writing clean and functional HTML code, especially when dealing with characters that have special meanings in HTML. In the next section, we will explore how to use iframes in HTML.
HTML Course
Module 1: Introduction to HTML
- What is HTML?
- Setting Up Your Environment
- Basic HTML Structure
- HTML Tags and Elements
- Creating Your First HTML Page
Module 2: HTML Text Formatting
- Headings and Paragraphs
- Text Formatting Tags
- Lists: Ordered and Unordered
- Blockquotes and Preformatted Text
Module 3: HTML Links and Media
Module 4: HTML Tables
Module 5: HTML Forms
- Creating a Basic Form
- Form Elements: Input, Textarea, and Select
- Form Attributes and Validation
- Submitting Forms