CINXE.COM

<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden;script-src 'self' https://tabi-stats.osc.garden 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>~/tabi • Table of Contents</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=98c8cfb580fe7a59eb13" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="A post showcasing the optional Table of Contents and its options." name=description><meta content="A post showcasing the optional Table of Contents and its options." property=og:description><meta content="Table of Contents" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/toc/social_cards/blog_toc.jpg?h=8d7c131e71a027feeb1a" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/toc/social_cards/blog_toc.jpg?h=8d7c131e71a027feeb1a" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/toc/ hreflang=ca rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/toc/ hreflang=es rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/toc/ hreflang=en rel=alternate><meta content=https://welpo.github.io/tabi/blog/toc/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/toc/ lang=ca role=menuitem>Català</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/toc/ lang=ar role=menuitem>العربية</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/toc/ lang=es role=menuitem>Español</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content><main><article><h1 class=article-title>Table of Contents</h1><ul class=meta><li>1st Nov 2022<li title="1997 words"><span aria-hidden=true class=separator>•</span>10 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a href=https://welpo.github.io/tabi/tags/markdown/>markdown</a>, <li class=tag><a href=https://welpo.github.io/tabi/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li>Updated on 16th Feb 2024<li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/toc/index.md>See changes</a></ul><div class=toc-container><h3>Table of Contents</h3><ul><li><a href=https://welpo.github.io/tabi/blog/toc/#documentation>Documentation</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#enabling-and-positioning-the-table-of-contents>Enabling (and positioning) the Table of Contents</a><li><a href=https://welpo.github.io/tabi/blog/toc/#setting-a-maximum-depth>Setting a maximum depth</a><li><a href=https://welpo.github.io/tabi/blog/toc/#hiding-headers-from-the-toc>Hiding headers from the ToC</a></ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-1>Heading 1</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-2>Heading 2</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-1>Heading 3.1</a><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-2>Heading 3.2</a></ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-2-1>Heading 2</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-1-1>Heading 3.1</a><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-2-1>Heading 3.2</a></ul></ul></ul></div><section class=body><h2 id=documentation><a aria-label="Anchor link for: documentation" class="header-anchor no-hover-padding" href=#documentation><span aria-hidden=true class=link-icon></span></a> Documentation</h2><h3 id=enabling-and-positioning-the-table-of-contents><a aria-label="Anchor link for: enabling-and-positioning-the-table-of-contents" class="header-anchor no-hover-padding" href=#enabling-and-positioning-the-table-of-contents><span aria-hidden=true class=link-icon></span></a> Enabling (and positioning) the Table of Contents</h3><p>There are two ways to enable the Table of Contents (ToC). If you want it to be right below the header (like in this page) set this variable on the post’s front matter:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span> </span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">toc</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> </span></code></pre><p>If you’d rather show the ToC elsewhere on your post (e.g. after an introduction), you can do so by adding a line with this content wherever you’d like the ToC to appear:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-comment z-block z-html"><span class="z-punctuation z-definition z-comment z-begin z-html">&LT!--</span> toc <span class="z-punctuation z-definition z-comment z-end z-html">--></span></span></span><span class="z-meta z-disable-markdown"> </span></span></code></pre><p>You can also use the simple <code>{{ toc() }}</code> shortcode, which will simply write that string for you, effectively inserting the ToC (<a class=external href=https://github.com/getzola/zola/issues/584#issuecomment-1546086781>Michael Clayton’s idea</a>).<p>This method will render the ToC without the “Table of Contents” header. This allows you to use a different (or no) header for the ToC, or hide it like this:<details><summary>Hidden ToC</summary> <div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/blog/toc/#documentation>Documentation</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#enabling-and-positioning-the-table-of-contents>Enabling (and positioning) the Table of Contents</a><li><a href=https://welpo.github.io/tabi/blog/toc/#setting-a-maximum-depth>Setting a maximum depth</a><li><a href=https://welpo.github.io/tabi/blog/toc/#hiding-headers-from-the-toc>Hiding headers from the ToC</a></ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-1>Heading 1</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-2>Heading 2</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-1>Heading 3.1</a><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-2>Heading 3.2</a></ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-2-1>Heading 2</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-1-1>Heading 3.1</a><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-2-1>Heading 3.2</a></ul></ul></ul></div></details><p>The code to achieve this:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html"><</span><span class="z-entity z-name z-tag z-inline z-any z-html">details</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"> <span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html"><</span><span class="z-entity z-name z-tag z-inline z-any z-html">summary</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span>Hidden ToC<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&LT/</span><span class="z-entity z-name z-tag z-inline z-any z-html">summary</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"> <span class="z-comment z-block z-html"><span class="z-punctuation z-definition z-comment z-begin z-html">&LT!--</span> toc <span class="z-punctuation z-definition z-comment z-end z-html">--></span></span> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&LT/</span><span class="z-entity z-name z-tag z-inline z-any z-html">details</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span> </span></span></code></pre><p><em>Note</em>: If you both set <code>toc = true</code> and have <code>&LT!-- toc --></code> somewhere in your text, you’ll get multiple ToCs.<p>If you set a custom position and a custom header for the ToC, you’ll probably want to hide it (see the <a href=https://welpo.github.io/tabi/blog/toc/#hiding-headers-from-the-toc>section below</a>) like this:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++ </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">title = "Your Post's Title" </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">date = 2034-01-11 </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown"> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">[extra] </span></span><mark><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">toc_ignore_pattern = "^(Table of Contents)" </span></span></mark><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++ </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown"> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">Here goes some introductory text. </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown"> </span></span><mark><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-markup z-heading z-markdown"><span class="z-punctuation z-definition z-heading z-begin z-markdown">###</span> </span><span class="z-markup z-heading z-markdown"><span class="z-entity z-name z-section z-markdown">Table of Contents</span><span class="z-meta z-whitespace z-newline z-markdown"> </span></span></span></span></mark><mark><span class="z-text z-html z-markdown"> </span></mark><mark><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-comment z-block z-html"><span class="z-punctuation z-definition z-comment z-begin z-html">&LT!--</span> toc <span class="z-punctuation z-definition z-comment z-end z-html">--></span></span></span><span class="z-meta z-disable-markdown"> </span></span></mark><span class="z-text z-html z-markdown"> </span><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-markup z-heading z-2 z-markdown"><span class="z-punctuation z-definition z-heading z-begin z-markdown">##</span> </span><span class="z-markup z-heading z-2 z-markdown"><span class="z-entity z-name z-section z-markdown">First content header</span><span class="z-meta z-whitespace z-newline z-markdown"> </span></span></span></span></code></pre><h3 id=setting-a-maximum-depth><a aria-label="Anchor link for: setting-a-maximum-depth" class="header-anchor no-hover-padding" href=#setting-a-maximum-depth><span aria-hidden=true class=link-icon></span></a> Setting a maximum depth</h3><p>You can set the maximum depth for the ToC by specifying the <code>toc_levels</code> variable, which takes an integer between 1 and 4:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span> </span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">toc_levels</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">2</span> </span></code></pre><p>In this example, only the first two levels of headers would be included in the ToC, regardless of their actual HTML tags (<code>h1</code>, <code>h2</code>, <code>h3</code>, etc.). If you want to include only the main level of headers, set <code>toc_levels = 1</code>. The default <code>toc_levels</code> value is <code>3</code>.<p>Keep your readers in mind when setting the <code>toc_levels</code>. While it can be tempting to include many nested levels for detailed navigation, a shorter and simpler ToC can often be more reader-friendly and less overwhelming. Adjust the depth according to the complexity and length of your content for the best reader experience.<h3 id=hiding-headers-from-the-toc><a aria-label="Anchor link for: hiding-headers-from-the-toc" class="header-anchor no-hover-padding" href=#hiding-headers-from-the-toc><span aria-hidden=true class=link-icon></span></a> Hiding headers from the ToC</h3><p>You might want to hide certain headers. For example, if your article has many Figures or Tables, they might clutter the ToC. You can hide specific headers in the ToC with the <code>toc_ignore_pattern</code> variable.<p>This variable expects a regular expression (regex), as it’s using Tera’s <a class=external href=https://keats.github.io/tera/docs/#matching>matching</a> test. The <code>toc_ignore_pattern</code> is tested against the text of the header, excluding the <code>#</code> character(s). For example, for the header <code>### Further reading</code>, the text <code>Further reading</code> would be checked against.<p>Here are some example values for <code>toc_ignore_pattern</code> along with the headers they can hide:<table><thead><tr><th><code>toc_ignore_pattern</code><th>Excludes headers which…<tbody><tr><td><code>Table</code><td>contain “Table”<tr><td><code>^Figure</code><td>start with “Figure”<tr><td><code>(?i)(table|figure)</code><td>start with “Table” or “Figure” (case insensitive)<tr><td><code>\[Draft\]$</code><td>end with “[Draft]”.</table><p>You can test your regular expression on a site like <a class=external href=https://regex101.com/r/2dI7U2/1>regex101</a> to ensure it works as expected.<p><em>Note</em>: “Look-around” capabilities, including look-ahead and look-behind, are not supported.<h1 id=heading-1><a aria-label="Anchor link for: heading-1" class="header-anchor no-hover-padding" href=#heading-1><span aria-hidden=true class=link-icon></span></a> Heading 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h2 id=heading-2><a aria-label="Anchor link for: heading-2" class="header-anchor no-hover-padding" href=#heading-2><span aria-hidden=true class=link-icon></span></a> Heading 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h3 id=heading-3-1><a aria-label="Anchor link for: heading-3-1" class="header-anchor no-hover-padding" href=#heading-3-1><span aria-hidden=true class=link-icon></span></a> Heading 3.1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4-1><a aria-label="Anchor link for: heading-4-1" class="header-anchor no-hover-padding" href=#heading-4-1><span aria-hidden=true class=link-icon></span></a> Heading 4.1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4-2><a aria-label="Anchor link for: heading-4-2" class="header-anchor no-hover-padding" href=#heading-4-2><span aria-hidden=true class=link-icon></span></a> Heading 4.2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h3 id=heading-3-2><a aria-label="Anchor link for: heading-3-2" class="header-anchor no-hover-padding" href=#heading-3-2><span aria-hidden=true class=link-icon></span></a> Heading 3.2</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4><a aria-label="Anchor link for: heading-4" class="header-anchor no-hover-padding" href=#heading-4><span aria-hidden=true class=link-icon></span></a> Heading 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4-3><a aria-label="Anchor link for: heading-4-3" class="header-anchor no-hover-padding" href=#heading-4-3><span aria-hidden=true class=link-icon></span></a> Heading 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h2 id=heading-2-1><a aria-label="Anchor link for: heading-2-1" class="header-anchor no-hover-padding" href=#heading-2-1><span aria-hidden=true class=link-icon></span></a> Heading 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h3 id=heading-3-1-1><a aria-label="Anchor link for: heading-3-1-1" class="header-anchor no-hover-padding" href=#heading-3-1-1><span aria-hidden=true class=link-icon></span></a> Heading 3.1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4-1-1><a aria-label="Anchor link for: heading-4-1-1" class="header-anchor no-hover-padding" href=#heading-4-1-1><span aria-hidden=true class=link-icon></span></a> Heading 4.1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4-2-1><a aria-label="Anchor link for: heading-4-2-1" class="header-anchor no-hover-padding" href=#heading-4-2-1><span aria-hidden=true class=link-icon></span></a> Heading 4.2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h3 id=heading-3-2-1><a aria-label="Anchor link for: heading-3-2-1" class="header-anchor no-hover-padding" href=#heading-3-2-1><span aria-hidden=true class=link-icon></span></a> Heading 3.2</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4-1-2><a aria-label="Anchor link for: heading-4-1-2" class="header-anchor no-hover-padding" href=#heading-4-1-2><span aria-hidden=true class=link-icon></span></a> Heading 4.1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.<h4 id=heading-4-1-3><a aria-label="Anchor link for: heading-4-1-3" class="header-anchor no-hover-padding" href=#heading-4-1-3><span aria-hidden=true class=link-icon></span></a> Heading 4.1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.</section><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/javascript/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>No mandatory JavaScript</div><div></div></nav></article></main><div id=button-container><div id=toc-floating-container><input class=toggle id=toc-toggle type=checkbox><label class=overlay for=toc-toggle></label><label title="Toggle Table of Contents" class=button for=toc-toggle id=toc-button><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg></label><div class=toc-content><div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/blog/toc/#documentation>Documentation</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#enabling-and-positioning-the-table-of-contents>Enabling (and positioning) the Table of Contents</a><li><a href=https://welpo.github.io/tabi/blog/toc/#setting-a-maximum-depth>Setting a maximum depth</a><li><a href=https://welpo.github.io/tabi/blog/toc/#hiding-headers-from-the-toc>Hiding headers from the ToC</a></ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-1>Heading 1</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-2>Heading 2</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-1>Heading 3.1</a><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-2>Heading 3.2</a></ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-2-1>Heading 2</a> <ul><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-1-1>Heading 3.1</a><li><a href=https://welpo.github.io/tabi/blog/toc/#heading-3-2-1>Heading 3.2</a></ul></ul></ul></div></div></div><a title="Go to the top of the page" class=no-hover-padding href=# id=top-button> <svg viewbox="0 0 20 20" fill=currentColor><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg> </a></div><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>