Because [[Obsidian]] is an [[Electron]] app, it functions very similarly to a webpage. Because [[Markdown]] is a superset of [[HTML]], you ==can== directly use HTML inside of Obsidian notes. This is not necessary in essentially 100% of cases, but it does open up some new functionality you couldn't otherwise achieve. > [!note] > You cannot use Markdown _inside_ of HTML content. Markdown will not be applied to anything in the HTML tags. # Examples These examples show the effect, then the html to achieve the effect. ## Element In-line Styling Probably the only practical example of HTML in Obsidian is applying specific styles to spans (or other html elements). <span style="color:cyan">This is cyan</span> ```html <span style="color:cyan">This is cyan</span> ``` <span style="font-size:2em">This is big</span> ```html <span style="font-size:2em">This is big</span> ``` <p style="border: 2px solid black; padding: 10px;">It doesn't <i>have</i> to be a span.</p> ```html <p style="border: 2px solid black; padding: 10px;">It doesn't <i>have</i> to be a span.</p> ``` <p style="font-family:monospace;">This is monospace</p> <p style="font-family:cursive;">This is cursive</p> ```html <p style="font-family:monospace;">This is monospace</p> <p style="font-family:cursive;">This is cursive</p> ``` ## Layout Another potentially valid use case: doing fancy layouts within a note. <div style="display:grid;grid-template-columns: auto auto;"> <p style="margin:auto">Left side</p> <p style="margin:auto">Right side</p> </div> ```html <div style="display:grid;grid-template-columns: auto auto;"> <p style="margin:auto">Left side</p> <p style="margin:auto">Right side</p> </div> ``` ## Details <details> <summary>Click me!</summary> <p>This is a <b>details</b> element, it's built in to HTML</p> </details> ```html <details> <summary>Click me!</summary> <p>This is a <b>details</b> element, it's built in to HTML</p> </details> ``` This is unnecessary due to Obsidian's new callout functionality, which is nice. Here's how that looks: > [!example]- I'm clickable! > And this content is hidden until you click. Exactly like the `details` tag above. > This is accomplished by adding a `-` after the callout opening brackets ```plaintext > [!example]- I'm clickable! > And this content is hidden until you click. Exactly like the `details` tag above. > This is accomplished by adding a `-` after the callout opening brackets ``` ## Accordions <details name="example" open> <summary>These three details blocks...</summary> <p>This is open by default, thanks to the `open` attribute</p> </details> <details name="example"> <summary>...cannot be opened...</summary> <p>Do I use this in my actual notes? No! But it's cool</p> </details> <details name="example"> <summary>...at the same time as each other.</summary> <p>Okay that's a lie, technically I used it here</p> </details> ```html <details name="example" open> <summary open>These three details blocks...</summary> <p>This is open by default, thanks to the `open` attribute</p> </details> <details name="example"> <summary>...cannot be opened...</summary> <p>Do I use this in my actual notes? No! But it's cool</p> </details> <details name="example"> <summary>...at the same time as each other.</summary> <p>Okay that's a lie, technically I used it here</p> </details> ``` Obsidian has no native way to enforce one callout open at a time, so if you really wanted that for some reason this would be your only option. **** # More ## Source - Experimentation