Your first snippet is referred to as "input HTML" and the second as "output HTML" in OneNote parlance. You should assume the "input" and "output" HTML will be different. This is because OneNote doesn't actually encode and store content as standard HTML. From the documentation:
The HTML that defines the page content and structure when you create or update a OneNote page is called input HTML.
The HTML that's returned when you get page content is called output HTML. Output HTML won't be the same as input HTML.
The OneNote APIs in Microsoft Graph preserve the semantic content and basic structure of the input HTML, but convert it to a set of supported HTML elements and CSS properties. The APIs also add custom attributes that support OneNote features.
Think of this issue like language translation. You can easily convert English to French and French to English. If, however, you make the full roundtrip (English -> French -> English), you will end up end up with the exact same English you started with. This is because translation is quite different than encoding, translation is always a lossy conversion.
Take this for example:
- English: "Translation is typically a lossy conversion."
- French: "La traduction est généralement une conversion avec perte."
- English: "Translation is usually a loss conversion."
You'll notice that both #1 and #3 have the same meaning but not the same syntax. This is essentially what is happening with OneNote.
