> For the complete documentation index, see [llms.txt](https://docs.umbraco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/templates.md).

# Working with Templates

Templating in Umbraco builds on the concept of Razor Views from ASP.NET MVC.

Templates are the files that control the look and feel of the frontend of your Umbraco websites. Building on the concept of MVC Razor Views, template files enable you to structure your websites using HTML, CSS, and JavaScript. When tied to a Document Type, templates are used to render your Umbraco content on the frontend.

Each Template is a `cshtml` file in the `Views` folder of your project directory. You can also manage Templates from the Settings section in the Umbraco backoffice.

{% hint style="info" %}
Generating a template alongside a new Document Type and making quick changes during local development work well in the backoffice. For ongoing work, maintain templates as `.cshtml` files in the `Views` folder using an IDE, and keep them in source control. For more information, see [Managing Views and Assets](/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/managing-views-and-assets.md).
{% endhint %}

## Creating Templates

When building an Umbraco website you can automatically generate Templates when you create a new Document Type. This will ensure the connection between the two and you can jump straight from defining the content to structuring it.

Choose the option called [**Document Type with Template**](/umbraco-cms/17.latest/model-your-content/content-types-and-structure/data/defining-content.md) when you create a new Document Type to automatically create a Template as well.

In some cases, you might want to create independent Templates that don't have a direct connection to a Document Type. You can follow the steps below to create a new blank Template:

1. Go to the **Settings** section inside the Umbraco backoffice.
2. Click **...** next to the **Templates** folder.
3. Choose **Create**.
4. Enter a template name.
5. Click the **Save** button.

You will now see the default template markup in the backoffice template editor.

![Created template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-7a4805ff22a4180dc732c183f9f8d2abaea2688f%2Fcreate-template.png?alt=media)

{% hint style="info" %}
Templates are registered in the Umbraco database, so adding a `.cshtml` file to the `Views` folder does not create one on its own.

If the file already exists, create the Template using the file name as the alias. Umbraco picks up the existing file content instead of overwriting it.
{% endhint %}

## Allowing a Template on a Document Type

To use a Template on your content, you must first allow it on the content Document Type.

1. Open the Document Type you want to use the template.
2. Open the **Templates** Workspace View.
3. Select your Template under the **Allowed Templates** section.

![Allowing template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-d35ea803f7bb2454b0392a7df0ffc73ddec4a5da%2Fallow-template.png?alt=media)

## Inheriting a Template

A Template can inherit content from a "Master Template". This is done by using the ASP.NET views Layout feature.

Let's say you have a Template called **MainView**, containing the following HTML:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        @RenderBody()
    </body>
</html>
```

This file contains the structural HTML tags for your website.

By using the Template as the "Master Template" on your other Templates, you can ensure that they inherit the same structural HTML.

Follow these steps to use a Template file as a Master Template:

1. Open one of your Template files.
2. Select the **Master template: No master** button above the editor.
3. Select the Template that should be defined as the Master Template.
4. Click **Choose**.

![Inherit template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-1ebcecc4986b20393606d54cfe8a6633173f4e55%2Finherit-template.png?alt=media)

Alternatively, you can manually change the value of the `Layout` variable in the Template using the name of the Template file.

The updated markup will look something like the snippet below and the Template is now referred to as a *Child Template*:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = "MainView.cshtml";
}
<p>My content</p>
```

When a page that uses a Template with a Master Template defined is rendered, the HTML of the two templates is merged.

The code from the Template replaces the `@RenderBody()` tag in the Master Template. Following the examples above, the final HTML will look like the code in the snippet below:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        <p>My content</p>
    </body>
</html>
```

## Named Sections

Template Sections give you added flexibility when building your templates. Use the Template Section together with a Master Template setup, to decide where sections of content are placed.

If a Child Template needs to add code to the `<head>` tag a Section must be defined and then used in the Master Template. This is made possible by [Named Sections](https://www.youtube.com/watch?v=lrnJwglbGUA).

### Using code

Define a named section in your Template:

```csharp
@section SectionName {
    
}
```

Add your code between the curly brackets, then render the section in your Master Template:

```csharp
@RenderSection("SectionName", false)
```

For instance, if you want to be able to add HTML to your `<head>` tags, you would add the tag there:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}

<html>
    <head>
        <title>Title</title>
        @RenderSection("SectionName", false)
    </head>

    <body>
    </body>
</html>
```

### Using the backoffice

The **Sections** dialog writes the same `@section` and `@RenderSection()` code for you:

1. Open your Template.
2. Select the **Sections** option.
3. Choose **Define a named section**.
4. Give the section a name and click **Submit**.

![Define a named section by giving it a name](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-082b4b1ce3127e7ed4f718d320642cae2f39c6ce%2Fdefined-named-section.png?alt=media)

5. Add your code between the curly brackets.
6. Save the changes.
7. Open the Master Template.
8. Choose a spot for the section and set the cursor there.
9. Select the **Sections** option.
10. Choose **Render a named section**.
11. Enter the name of the section you want to add.
12. Click **Submit**.

### Making a section mandatory

Making a section mandatory means that any template using the Master Template is required to have the section defined.

{% hint style="info" %}
Keep in mind that whenever a mandatory named section is missing, it will result in errors on your website.
{% endhint %}

To make the section mandatory, you have two options:

* Pass `true` as the second argument: `@RenderSection("SectionName", true)`.
* Check the **Section is mandatory** field when using the **Sections** dialog in the backoffice.

![Create partial](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-2c7edf033ea90f46bfee6e37d1247864b0eb4502%2Frender-named-section-mandatory.png?alt=media)

## Injecting Partial Views

Another way to reuse HTML is to use partial views - which are small reusable views that can be injected into another view.

Like Templates, a partial view is a `.cshtml` file in your project, stored in the `Views/Partials` folder. You can also create one from the **Partial Views** folder in the backoffice. For more information, see [Partial Views](/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/design/partial-views.md).

![Create partial](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-f2db936d6586978d6ad59b5d1be5f14bbaa0c3f2%2Fcreate-partial.png?alt=media)

The partial view can be injected into any template using the `<partial>` tag helper, like so:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = "MasterView.cshtml";
}

<h1>My new page</h1>
<partial name="~/Views/Partials/a-new-view.cshtml" />
```

### Related Articles

* [Working with MVC](/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/templating/mvc.md)
* [Rendering content](/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/design/rendering-content.md)
* [Partial Views](/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/design/partial-views.md)

### Tutorials

* [Creating a basic website with Umbraco](/umbraco-cms/17.latest/develop-with-umbraco/tutorials/creating-a-basic-website.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/templating-and-rendering/templates.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
