What is a Tag Helper?

Razor enriches HTML with new tags and attributes. It enables us to add our custom tags and attributes thanks to a feature called tag helpers.

In order to understand how the tag helpers feature works and how to take advantage of it, we need to understand how Razor parses the tags it finds in the code:

1. It parses the open tag and stores the tag name and all attribute-value pairs contained in the tag in a data structure. When computing all values, it possibly computes C# expressions used to furnish dynamic values.
2. It recursively parses the tag content until it finds the corresponding closure tag, thus building a tree whose nodes contain each, a tag with its attribute-value pairs, or simple text if the node represents a string content instead of a tag.
3. It recursively transforms the tag content tree into an HTML string, and then it renders the open tag its attribute, its content, and finally the closure tag.

After point 2, we can add hooks that process the node data structure, possibly changing the tag name and or some tag attributes before Razor moves to point 3.

Suppose, for instance, that Razor is parsing the customized a tag below: