Inline HTML

In addition of common markdown, it is possible to use some raw HTML tags.

Abbr

With 11ty you can use CSS to style your HTML. Title attribute is optional but if set, <abbr> tags are clickable and expanded once on click.

With <abbr title="Eleventy">11ty</abbr> you can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your
<abbr title="HyperText Markup Language">HTML</abbr>. Title attribute is optional. Title attribute is optional but if set, `<abbr>` tags are clickable and expanded once on click.

MDN Reference

Deleted text

When you want to display something that was added deleted.

When you want to display something that was <del>added</del> deleted.

MDN Reference

Inline quotation

And then Albus says It is our choices, Harry, that show what we truly are, far more than our abilities. to Harry.

And then Albus says 
<q cite="https://www.harrypotter.com/fr/features/pearls-of-wisdom-from-professor-dumbledore">
    It is our choices, Harry, that show what we truly are, far more than our abilities.
</q> 
to Harry.

MDN Reference

Inserted text

When you want to display something that was added.

When you want to display something that was <ins>added</ins>.

MDN Reference

Keyboard input element

You can use Ctrl + Shift + R to refresh page and empty cache.

You can use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to refresh page and empty cache.

MDN Reference

Line break

• I am an item
  Sometimes it comes we need to break the line inside markdown
• I am another item
  Sometimes it comes we need to re-break the line inside markdown
• I am the ultimate item
  Sometimes it comes we need to re-re-break the line inside markdown

* **I am an item** <br>
    Sometimes it comes we need to break the line
* **I am another item** <br>
    Sometimes it comes we need to re-break the line
* **I am the ultimate item** <br>
    Sometimes it comes we need to re-re-break the line

MDN Reference

Links

Just like Markdown internal links, you can write dynamic HTML links pointing to input path and then easily create links between your project pages. permalink must be set into the destination page. If permalink changes on destination page, internal links pointing to this page change accordingly.

Of course, non-dynamic links work too! Here is an example:

Let’s go to Markdown page (dynamic link) or Front matter page (dynamic link) or minimal page (static link)

Let’s go to <a href="/content/creating-content/markdown.md">Markdown</a> page (dynamic link) 
or <a href="/content/front-matter/index.md">Front matter</a> page (dynamic link) 
or <a href="/content/front-matter/front-matter-minimal/">minimal</a> page (static link) 

MDN Reference

Mark

Here is a paragraph with a mark tag that highlights text fragment.

Here is a paragraph with a mark tag that <mark>highlights text fragment</mark>.

MDN Reference

Ruby

Even if not common, ruby tag represents small annotationsRuby that are rendered above spec (single work recommended). A text fragment Description can be described.

Even if not common, ruby tag represents <ruby>small annotations<rt>Ruby</rt></ruby> that are rendered above spec (single work recommended).
<ruby>A text fragment <rt>Description</rt></ruby> can be described.

MDN Reference

Sample output

Neo wakes up and reads his screen saying, The Matrix has you... Follow the white rabbit... Knock, knock, Neo.

Neo wakes up and reads his screen saying, 
<samp>The Matrix has you... Follow the white rabbit... Knock, knock, Neo.</samp>

MDN Reference

Side comment

Eleventy LibDoc is a starter project to create documentation website.

Eleventy LibDoc is under MIT License.

<small>Eleventy LibDoc is under MIT License.</small>

MDN Reference

Strikethrough

This tag is useful when you wish to emphasis to display something not relevant anymore.

This tag is useful when you wish <s>to emphasis</s> to display something not relevant anymore.

MDN Reference

Subscript

Caffeine C₈H₁₀N₄O₂ is known to be the favorite’s developer molecule.

Caffeine **C**<sub>8</sub>**H**<sub>10</sub>**N**<sub>4</sub>**O**<sub>2</sub> is known to be the favorite’s developer molecule.

MDN Reference

Superscript

Equation a² + b² = c² usually expresses the Pythagorean theorem.

Equation *a*<sup>2</sup> + *b*<sup>2</sup> = *c*<sup>2</sup> usually expresses the *Pythagorean theorem*.

MDN Reference

Time and date

The concert took place on July 7th, 2018 and started at 20h 30m.

The concert took place on <time datetime="2018-07-07">July 7th, 2018</time> 
and started at <time datetime="PT20H30M">20h 30m</time>.

MDN Reference

Unarticulated annotation

Here is a paragraph with an unarticulated annotation.

Here is a paragraph with an <u>unarticulated annotation</u>.

MDN Reference

Variable

The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.

The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where
<var>l</var> represents the length, <var>w</var> the width and
<var>h</var> the height of the box.

MDN Reference