HTML Elements

For technical information, you can click this link.

<progress> - the progress indicator element displays the progress of a task, displayed as a progress bar. This progress needs to be input manually in obsidian (unless it's implemented in a plugin). To input a <progress> element, you need to input a "value", as well as a "max" value. E.g: <progress value="6" max="10"></progress>. That will display a progress bar with 60% progress. Note that the progress bars are already formatted so it's easy to add a label in the line below, like the following examples:

<blockquote> - the block quotation element is used to indicate that the enclosed text is part of a quotation. A text representation of the source and/or author may be given using the <cite> element. Blockquotes can also be written using Markdown syntax, simply including a > at the beginning of the line.

>Sed aliquam feugiat ante a tincidunt. Cras sed condimentum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis faucibus velit, eu ornare metus. Cras feugiat molestie dui, non molestie purus. Aenean nec erat hendrerit, blandit metus quis, sollicitudin nibh. Aliquam malesuada convallis convallis. Nulla non ultricies ligula. Praesent varius diam sed felis aliquet suscipit. Nunc sit amet ullamcorper urna, eget sollicitudin lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<blockquote>Sed aliquam feugiat ante a tincidunt. Cras sed condimentum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis faucibus velit, eu ornare metus. Cras feugiat molestie dui, non molestie purus. Aenean nec erat hendrerit, blandit metus quis, sollicitudin nibh. Aliquam malesuada convallis convallis. Nulla non ultricies ligula. Praesent varius diam sed felis aliquet suscipit. Nunc sit amet ullamcorper urna, eget sollicitudin lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</blockquote>

<blockquote class="paraphrase"> - the paraphrase custom class is part of the blockquote element, and is used to enclose text that, while not a quotation, is also not an original idea, and so should be differentiated in the text to avoid confusion and misattribution of credit/authorship. To put it simply, if you'd like to tell when you're paraphasing, you can use this class. Since it's a class of the <blockquote>element, it's best not to have it right before or after a blockquote, because both will merge. Fear not, for adding a comment (%%comment%%) between both solves the issue.

<blockquote class="paraphrase"> Sed aliquam feugiat ante a tincidunt. Cras sed condimentum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis faucibus velit, eu ornare metus. Cras feugiat molestie dui, non molestie purus. Aenean nec erat hendrerit, blandit metus quis, sollicitudin nibh. Aliquam malesuada convallis convallis. Nulla non ultricies ligula. Praesent varius diam sed felis aliquet suscipit. Nunc sit amet ullamcorper urna, eget sollicitudin lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </blockquote>

<cite> - the citation element is used for referencing a cited work. This will align the text to the right, and can (and should) be written inside a blockquote. This means you can also envelop it inside a paraphrase element in order to remind yourself of the source material.

>Sed aliquam feugiat ante a tincidunt. Cras sed condimentum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis faucibus velit, eu ornare metus. Cras feugiat molestie dui, non molestie purus. Aenean nec erat hendrerit, blandit metus quis, sollicitudin nibh. Aliquam malesuada convallis convallis. Nulla non ultricies ligula. Praesent varius diam sed felis aliquet suscipit. Nunc sit amet ullamcorper urna, eget sollicitudin lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<cite> Insert Author here https://startpage.com/ </cite>

<aside> - the aside element is used for simple call-outs or for presenting information that isn't directly related to the note's content. This is formatted the same way as a <s class="aside-in"> element (more on that later), but doesn't allow for Markdown formatting. Still, it wouldn't make sense to have more advanced sidenote options, without also having the default html element. <s class="aside-*"> - the sidenote element is used to display references or complementary information that doesn't find its place in the main text. The end block for every sidenote type is the same: </s> There are 4 types of sidenote classes:

• <s class="aside-right">: this places text in the side of the right margin of the note;
• <s class="aside-left">: this places text in the side of the right margin of the note;
• <s class="aside-in">: this places text inside the main text, but in the same way as the default <aside> element, is formatted as a callout;
• <s class="aside-hide">: this places an icon in the side of the right margin, that will reveal its content once hovered. The revealed content will display the same way as an <s class="aside-right">element.

<samp> - the sample output element is used to enclose text that simulates an output from a computer program. It's rendered using the monospaced font set for the theme.

<samp> Hello World! <samp>

<kbd> - the keyboard input element is used to represent user input from a keyboard. It's basically a good way to highlight hotkeys!

<small> - the side comment element is used, like the name implies, to write side comments and small print. It renders a smaller font-size than the default text.