# Can I loop through {{ .Content }} in order to divide it into page sections?

**URL:** <https://discourse.gohugo.io/t/can-i-loop-through-content-in-order-to-divide-it-into-page-sections/46296>\
**Category:** support\
**Created:** [September 19, 2023, 12:49pm UTC](https://discourse.gohugo.io/t/can-i-loop-through-content-in-order-to-divide-it-into-page-sections/46296 "2023-09-19T12:49:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cormor](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cormor/32/20141_2.png) [@Cormor](https://discourse.gohugo.io/u/Cormor)\
**Post date:** [September 19, 2023, 12:49pm UTC](https://discourse.gohugo.io/t/can-i-loop-through-content-in-order-to-divide-it-into-page-sections/46296/1 "2023-09-19T12:49:49Z")

</div>

This is `content/_index.md`:

```auto
---
title: Home
---
## Section 1

This is the content of section 1.

## Section 2

This is the content of section 2.

```

I would like to split the content into two separate HTML section tags, like this:

```auto
  <main>
    <section>
      <h2>Section 1</h2>
      <p>This is the content of section 1.</p>
    </section>

    <section>
      <h2>Section 2</h2>
      <p>This is the content of section 2.</p>
    </section>
  </main>

```

(I’m not talking about “Hugo sections”, you get it.)

Is there a convenient way to do it?

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [September 19, 2023, 1:50pm UTC](https://discourse.gohugo.io/t/can-i-loop-through-content-in-order-to-divide-it-into-page-sections/46296/2 "2023-09-19T13:50:30Z")

</div>

Tried that already. Answer is no, there is no **convenient** way. With a lot of coding, using the attribute .Level, it might be possible, but it’s over my head and no one seems to want that headache.

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [September 19, 2023, 2:31pm UTC](https://discourse.gohugo.io/t/can-i-loop-through-content-in-order-to-divide-it-into-page-sections/46296/3 "2023-09-19T14:31:46Z")

</div>

You can create a shortcode for this.

`layouts/shortcodes/section.html`

```go
<section>
  {{ .Inner }}
</section>

```

And then wrap your content via the `section` shortcode.

```markdown
{{% section %}}
## Section 1

This is the content of section 1.
{{% /section %}}

```

---

<div class="post-metadata">

**Author:** ![Cormor](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cormor/32/20141_2.png) [@Cormor](https://discourse.gohugo.io/u/Cormor)\
**Post date:** [September 19, 2023, 3:49pm UTC](https://discourse.gohugo.io/t/can-i-loop-through-content-in-order-to-divide-it-into-page-sections/46296/4 "2023-09-19T15:49:07Z")

</div>

Thank you. I just had to take care of this issue: [twitter bootstrap - Hugo shortcode ignored saying "raw HTML omitted" - Stack Overflow](https://stackoverflow.com/questions/63198652/hugo-shortcode-ignored-saying-raw-html-omitted)

Adding

```auto
[markup.goldmark.renderer]
   unsafe = true

```

in `config.toml` is sufficient.