# Use html as content

**URL:** <https://discourse.gohugo.io/t/use-html-as-content/32480>\
**Category:** support\
**Created:** [April 22, 2021, 6:30pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480 "2021-04-22T18:30:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 6:30pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/1 "2021-04-22T18:30:19Z")

</div>

Hello all

can i actually use html as content or only markdown?  
I have not quite understood that in the documentation. My home page is too complex to be displayed with markdown.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 6:32pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/2 "2021-04-22T18:32:29Z")

</div>

Yes.

I do it often in my personal site when making small HTML / CSS / JS fiddles.

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 6:33pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/3 "2021-04-22T18:33:39Z")

</div>

hi and thanks for the quick reply.  
How do you do that? When I put .html files in the content folder I only get an error message that html is not allowed there.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 6:41pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/4 "2021-04-22T18:41:35Z")

</div>

I keep my content files in markdown as normal (as in `foo/index.md`) then write HTML directly inside them.

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 6:45pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/5 "2021-04-22T18:45:30Z")

</div>

then i get the error message:  
plain HTML documents not supported

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 6:46pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/6 "2021-04-22T18:46:58Z")

</div>

Well, now the ball is in your court 🙂

If I or someone else are to help you further, you must provide a [minimal reproducible sample](https://stackoverflow.com/help/minimal-reproducible-example).

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 6:53pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/7 "2021-04-22T18:53:03Z")

</div>

I have built a template here, which also works wonderfully: [https://butterfly-aspect.de](https://butterfly-aspect.de)  
But I need a complex page that I can only map via html, but as soon as I enter `<h2>Charta</h2>` I get the above error message, if I enter only `Charter` it works fine.

i’m not sure right now what i should show for samples in this case

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 7:29pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/8 "2021-04-22T19:29:59Z")

</div>

Per this [GitHub issue](https://github.com/gohugoio/hugo/issues/7296), make sure you have frontmatter at the beginning of the content file.

## Sample

```md
---
---

<p>Yo, I am plain HTML.</p>

```

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 7:34pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/9 "2021-04-22T19:34:18Z")

</div>

Ok, I didn’t realize that I need the frontmatter if I don’t want to enter anything there

but now it shows me the html in a `<code>` tag instead of resolving it

the first code block is simply not displayed at all

 ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/0/07bb9c47cff7811fb9334c3f7796253e07453c7e.jpeg)

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 7:49pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/10 "2021-04-22T19:49:18Z")

</div>

Make sure you enable unsafe HTML.

For example, in your `config.yaml`, add this:

```auto
markup:
  goldmark:
    renderer:
      unsafe: true

```

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 7:51pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/11 "2021-04-22T19:51:59Z")

</div>

Ok thanks now once the first block is displayed but from the second block it is still code

 ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/1/1b6c72c44f636ecb0a1de492915d67f687436ddf.jpeg)

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 7:57pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/12 "2021-04-22T19:57:49Z")

</div>

Not sure on that one.

Confirm that you’re not incorrectly using any of the following:

- three backticks
- html code element
- html pre element

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 8:02pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/13 "2021-04-22T20:02:38Z")

</div>

i have no code or pre element in my code and what mean three backticks?

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 8:06pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/14 "2021-04-22T20:06:42Z")

</div>

Three backticks is how you write code blocks in markdown.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [April 22, 2021, 8:10pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/15 "2021-04-22T20:10:41Z")

</div>

Am out of ideas for your remaining issue. Someone else may be able to help.

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 8:12pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/16 "2021-04-22T20:12:47Z")

</div>

ok sorry 😕  
here the code snippet

```
---
---
<h2>Unsere Dienste im Überblick</h2>
<content class="home">
    <p class="text-center"><b class="firstpart">Rollenspiel</b><b class="lastpart">Monster</b> bietet euch folgende Dienste kostenlos an. Unser Ziel ist es euch eine freie und datensparsame Alternative zu
        bekannten Diensten zur Verfügung zu stellen.</p>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card">
                <a href="ts3server://RollenspielMonster" onClick="_paq.push(['trackLink', 'ts3server://RollenspielMonster', 'link']);">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fab fa-teamspeak fa-3x"></i></h5>
                        <h6 class="card-subtitle mb-2">Teamspeak</h6>
                        <p class="card-text">Teamspeak-Server für eure Rollenspielrunden</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="col">
            <div class="card">
                <a href="http://guilded.gg/RollenspielMonster" onClick="_paq.push(['trackLink', 'http://guilded.gg/RollenspielMonster', 'link']);">
                    <div class="card-body">
                        <h5 class="card-title">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 60px;height: 60px;" viewBox="30 28 75 75">
                                <g id="Assets-/-Logomark-/-Guilded-Wordmark-White" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M47.8903288,48.2641509 C47.8903288,48.2641509 47.9503286,56.8036226 52.3351089,65.6355094 C56.8398888,74.1369434 63.0510609,79.5977358 68.175038,81.7730189 C73.4694143,79.2981887 78.5837914,75.0023019 81.3749789,70.3735849 L66.840644,70.3735849 C63.0798608,67.2568679 60.1206741,62.0861132 59.4414771,56.109434 L102.079686,56.109434 C99.9772956,65.718717 95.5157156,74.4578868 91.2653346,80.023283 C85.3658754,87.739919 77.3664831,93.6292832 68.2062379,97 L68.0718385,97 C52.7791069,90.9068302 44.5519438,81.309434 39.1231681,70.480566 C35.6407837,63.5410566 32,50.9410566 32,34 L104,34 C104.011637,38.7709414 103.690875,43.5370029 103.039682,48.2641509 L47.8903288,48.2641509 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                                </g>
                            </svg>
                        </h5>
                        <h6 class="card-subtitle mb-2">Guilded</h6>
                        <p class="card-text">Guilded-Server für Spielersuche, Öffentliche- sowie Gruppengespräche</p>
                    </div>
                </a>
            </div>
        </div>
```

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [April 22, 2021, 8:20pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/17 "2021-04-22T20:20:36Z")

</div>

- You can have HTML files as content files (as in: name them foo.html etc.)
- You can use shortcodes etc.
- But they need front matter (even if just empty)

Putting lots of HTML in Markdown isn’t something I would recommend. CommonMark is very strict so you quickly end up with “code” blocks when indenting things etc.

---

<div class="post-metadata">

**Author:** ![Tealk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tealk/32/14107_2.png) [@Tealk](https://discourse.gohugo.io/u/Tealk)\
**Post date:** [April 22, 2021, 8:25pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/18 "2021-04-22T20:25:04Z")

</div>

ok with the front matter i can also use a .html file  
thanks for the help

such a tile view with mousover and fontawesome is just not feasible in markdown

 ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/f/f3c625e119eac9e714150e679d9f71c9b4dd4f12.jpeg)

---

<div class="post-metadata">

**Author:** ![fairplay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fairplay/32/9884_2.png) [@fairplay](https://discourse.gohugo.io/u/fairplay)\
**Post date:** [April 22, 2021, 8:27pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/19 "2021-04-22T20:27:27Z")

</div>

Using html as content has serious issue I’ve just bump up. And it seems Hugo developers won’t pay attention to it for half a year:

> <https://github.com/gohugoio/hugo/issues/7926>
>
> \### What version of Hugo are you using (\`hugo version\`)?
> 
> \<pre\>
> $ hugo vers…ion
> Hugo Static Site Generator v0.77.0/extended linux/amd64 BuildDate: unknown
> \</pre\>
> 
> \### Does this issue reproduce with the latest release?
> yes
> 
> \### Description
> If a manual summary is used the \`.Summary\` contains the HTML formatted manual summary but if the default auto summary is used it only contains the raw text (no markdown/no HTML).
> 
> In the template I used \`{{ .Summary }}\` and also tried variations with \`plainify\` and \`safeHTML\` as stated in the documentation but with no changes for the automatic summary.
> 
> \#### Manual
> 
> \*Example:\*
> \`\`\`md
> \---
> title: "manual summary"
> date: 2020-10-31T17:00:00+02:00
> \---
> 
> some summary content \*\*with\*\* markdown
> 
> 
> main content
> \`\`\`
> 
> \*Output:\*
> \`\`\`html
> \<p\>some summary content \<strong\>with\</strong\> markdown\</p\>
> \`\`\`
> 
> \#### Automatic
> 
> \*Example:\*
> \`\`\`md
> \---
> title: "auto summary"
> date: 2020-10-31T17:00:00+02:00
> \---
> 
> some summary content \*\*with\*\* markdown
> 
> main content
> \`\`\`
> 
> \*Output:\*
> \`\`\`
> some summary content with markdown
> main content
> \`\`\`

---

<div class="post-metadata">

**Author:** ![Simran-B](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/simran-b/32/10055_2.png) [@Simran-B](https://discourse.gohugo.io/u/Simran-B)\
**Post date:** [April 22, 2021, 10:30pm UTC](https://discourse.gohugo.io/t/use-html-as-content/32480/20 "2021-04-22T22:30:30Z")

</div>

There’s one more option: You could turn that page into a layout that you then use for that particular page only.

[Next page](https://discourse.gohugo.io/t/use-html-as-content/32480.md?page=2)