What do < and > stand for?

Understanding '<' and '>' in HTML: The Role of HTML Entities

Explore why angle brackets are special in HTML, how they define elements, and why HTML entities like < and > are crucial for displaying them literally without breaking your code.

In the world of HTML, the characters < (less than) and > (greater than) hold a fundamental significance. They are not just ordinary symbols; they are the very delimiters that define HTML tags, forming the structural backbone of every web page. However, this special role also means that if you want to display these characters literally within your content, you can't just type them directly. Doing so would confuse the browser, leading to rendering errors or unexpected behavior. This article delves into why these characters are special and how HTML entities provide a robust solution for their proper display.

The Special Meaning of Angle Brackets in HTML

HTML (HyperText Markup Language) uses angle brackets to encapsulate tag names, which in turn define elements. For example, <p> signifies the start of a paragraph, and </p> signifies its end. Similarly, <a> creates a hyperlink, and <div> defines a division or a section. Without these brackets, the browser wouldn't be able to distinguish between plain text and structural commands. This fundamental role makes them reserved characters.

flowchart TD
    A["Browser encounters '<'"] --> B{Is it followed by a valid tag name?}
    B -->|Yes| C["Interpret as start of HTML tag"]
    B -->|No| D["Interpret as literal character (Error or unexpected behavior)"]
    C --> E["Process HTML element"]
    D --> F["Display incorrect content or error"]
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bfb,stroke:#333,stroke-width:2px
    style D fill:#fbb,stroke:#333,stroke-width:2px
    style E fill:#bfb,stroke:#333,stroke-width:2px
    style F fill:#fbb,stroke:#333,stroke-width:2px

Browser's interpretation of the '<' character in HTML

Introducing HTML Entities: The Solution

To display the < and > characters literally on a web page without them being interpreted as HTML tags, we use HTML entities. An HTML entity is a sequence of characters that represents another character, especially those that are reserved in HTML, invisible (like non-breaking spaces), or difficult to type directly from a keyboard. For the angle brackets, the entities are:

• < for the less-than sign (<)
• > for the greater-than sign (>)

These entities tell the browser, "Hey, this isn't a tag; this is the actual character I want to show." They are part of a larger set of entities used for various special characters, including & for & (ampersand) and " for " (double quote).

<!-- Incorrect way to display angle brackets -->
<p>This is a <p> tag.</p>

<!-- Correct way to display angle brackets using HTML entities -->
<p>This is a &lt;p&gt; tag.</p>

<!-- Displaying other common entities -->
<p>Copyright &copy; 2023. All rights reserved.</p>
<p>The price is &euro;100.</p>

Demonstration of incorrect vs. correct usage of angle brackets and other HTML entities.

When to Use HTML Entities

The primary use case for < and > is when you are writing about HTML itself, perhaps in a tutorial or documentation, and need to show code examples. Without entities, the browser would try to render the example code as actual HTML, leading to a broken display. Beyond angle brackets, entities are also vital for:

• Ampersands (&): The ampersand itself is used to start an entity, so & is used to display a literal ampersand.
• Quotes (" and '): Especially within attribute values, " and ' (though ' is less universally supported than ' or ’) are used to prevent early termination of the attribute value.
• Non-breaking space ( ): To create a space that prevents a line break.
• Special characters: Symbols like copyright (©), trademark (™), registered (®), and various currency symbols (€, £).

Modern web development often involves JavaScript frameworks or server-side rendering engines that automatically escape output to prevent these issues. However, understanding the underlying mechanism of HTML entities remains crucial for debugging and direct HTML manipulation.