HTML reserves five characters — <, >, &, " and ' — because they have structural meaning in markup. Typing them raw into a page can break tags or get stripped by a parser, so this tool swaps them for entities instead: named (&), decimal (&), or hexadecimal (&). The decode direction runs the same logic backwards, turning any entity — named, decimal, or hex — back into the literal character, and the preview renders the result inside a sandboxed iframe so nothing you paste can execute against this page.
Because a browser's parser treats < as the start of a tag and & as the start of an entity reference. If you want that literal character to display rather than be interpreted, it has to be escaped as an entity — otherwise the markup can render incorrectly or get silently cut off.
They all point at the same character — &, &, and & all decode to a literal ampersand. Named entities are the most readable for common characters; decimal and hex references work for any Unicode code point, including ones with no named entity at all, which is why the "encode all characters" option here falls back to numeric form.
No — encoding and decoding are lossless and reversible; only the representation changes, not the underlying character. The rendered preview is there so you can visually confirm the decoded output matches what you expect before you paste it somewhere that will interpret it as HTML.