diff --git a/content/notes/html-in-markdown-recommendation.md b/content/notes/html-in-markdown-recommendation.md new file mode 100644 index 0000000..3671b29 --- /dev/null +++ b/content/notes/html-in-markdown-recommendation.md @@ -0,0 +1,39 @@ +--- +title: Using HTML in Markdown +date: 2025-02-25T21:21:21-08:00 +draft: false +--- + +Markdown uses punctuation-based syntax to format text, drawing inspiration from +plain text email conventions. The goal is for Markdown documents to be easy to +read. For concerns that the [specification](https://commonmark.org/) does not +cover, users are free to use HTML. However, the HTML tags that rendering +engines support vary considerably. For example, Hugo prefers +[shortcodes](https://gohugo.io/content-management/shortcodes/) extensions to +raw HTML tags. Generally, best practice is to avoid mixing Markdown and HTML, +as doing so can detract from Markdown’s intended simplicity and readability. + +The following items are exceptions to this rule—cases where HTML provides +functionality or control that Markdown does not. + +| HTML Tag(s) | Description | Notes | +| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | +| `
` and `` | Create collapsible sections for hiding and revealing content. | [^1] | +| `` | Represent keyboard inputs or shortcuts. | — | +| `` | Add tooltips to abbreviations for clarity. | — | +| `` and `` | Format text as superscript or subscript. | — | +| `` | Highlight text with a background color. | [^2] | +| `` (HTML Comments) | Insert comments that won’t appear in the rendered output. | [^3] | +| `` | Embed images with enhanced control over attributes like class, style, width, and height. | — | +| `` | Represent variables, parameters, or mathematical symbols to add semantic clarity in technical documentation. | — | +| `` | Denote sample output from programs or command-line operations, helping readers distinguish between code input and output. | — | + +[^1]: While GitHub supports `
` and `` in GitHub Flavored +Markdown, Hugo’s support may vary based on configuration and theme. + +[^2]: The `` tag is supported on GitHub; however, styling might differ in +Hugo depending on theme defaults. + +[^3]: HTML comments (``) are preserved in GitHub’s rendered output +but may be stripped or altered in some Hugo configurations. +