# Document Types

The first step in creating an Umbraco site is to set up a **Document Type**. A **Document Type** acts as a data container in Umbraco, where you can add **Properties** (data fields or attributes) to store content. Each **Property** is assigned a **Data Type**, such as a text string, number, or rich text editor. Umbraco uses **Templates** to render this input data on the front end.

Here are some of the most common properties you might add in a **Document Type**:

* Page Title
* Sub Heading
* Body Text
* Meta Title
* Meta Description

## Creating a Document Type

To create a Document Type:

1. Go to **Settings**.
2. Click **...** next to the **Document Types**.
3. Select **Create...**
4. Select **Document Type with Template**.

   {% hint style="info" %} **Folders** can help you organize your **Document Types**. {% endhint %}

![Creating a Document Type with Template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-01aef2268e46ae9cda91da766184ed0d75bb8991%2Fcreating-a-document-type.png?alt=media)

5. Enter a **Name** for the **Document Type**. Let's call it *HomePage*. You'll notice that an **Alias** is automatically created.
   * The alias of the Document Type is automatically generated based on the property name. If you want to change the auto-generated alias, click the "lock" icon. The alias must be in camelcase. For example *homePage*.
6. Click **Save**. Our new Document Type is now visible as a new item under **Document Types**.

![Saving a Document Type](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-afe0c947015a941f4bb3b8639f85ddd2252508fd%2Fsaving-a-document-type.png?alt=media)

## Customizing the Document Type

### Adding icons

With the help of icons, you can identify different Document Types in the **Content Tree**.

To add an icon:

1. Open the Document Type. For example: *HomePage*.
2. Click the icon placeholder to the left of the Document Type name. This opens the **Select Icon** dialog on the right side of the screen.

   ![Selecting an icon](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-37112c1d4d4b89aec28a7917038c016c45ed8ee0%2Fselecting-an-icon.png?alt=media)
3. Browse the icon list and select the icon of your choice.
4. Click **Submit**.
5. Click **Save**.

### Setting Permissions

To create a Document Type at the root of the **Content Tree**:

1. Go to the **Structure** tab.
2. Toggle the **Allow at root** button.

   ![Allow Document Type as root](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-3eb16006ef68ffd13beafb21276327f09073bda1%2Fallow-document-type-as-root.png?alt=media)

{% hint style="warning" %}
If **Allow at root** is not enabled on the **Document Type**, you cannot create any content on your site.
{% endhint %}

3. Click **Save**.

### Adding Properties

To add properties to your Document Type, follow these steps:

1. Go to the **Design** tab.
2. Click **Add Group**.
3. Enter a Name for the group. For this tutorial, we will call it *Content*.

   ![Adding a Group](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-09a29ef8d1cc6ee1cef05e015ee3b0de6664eeaf%2Fadd-group-document-type.png?alt=media)
4. Click **Add property**. The **Add property** dialog opens.
5. Enter a **Name**. For example: *Page Title*.
6. Enter a **Description**. For example: *The main title of the page (Welcome to Widgets Ltd.)*.

   ![Adding a property](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-508ae70eae1a5cad17d537812a3ad97e202d2d86%2Fcreating-our-pagetitle-property.png?alt=media)
7. Click **Select Property Editor**.
8. Select the Data Type of your choice. We'll add *text* in the search box and select the **Textstring** Data Type.

   ![Selecting a Data Type](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-99547de435912df0848c9a50b9638cfd75443ca1%2Fselecting-textstring-data-type.png?alt=media)
9. Click **Submit**.
   * Remember to come back and explore the list of ***Data Types*** later.
10. Repeat Steps 4 to 9 to add a *Body Text* using the specification below:

| Name        | Body Text                     |
| ----------- | ----------------------------- |
| Description | The main content of the page. |
| Data Type   | Richtext Editor               |

11. Click **Add Group** to create a new group called *Footer*. Repeat Steps 4 to 9 to add a *Footer Text* using the specification below:

| Name        | Footer Text                      |
| ----------- | -------------------------------- |
| Description | Copyright notice for the footer. |
| Data Type   | Textstring                       |

12. Your Document Type should now look like this:
13. Click **Save**.

![Home Page with Properties](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-eab39fc4a25ae151f82ea90a16da8401deb26f8a%2Fhomepage-document-type-with-properties.png?alt=media)

We’ve now created our first **Document Type**. Umbraco takes the data from an instance of the ***Document Type*** (also called ***Content Node***). This data is then merged with a ***Template*** – let's create our template next.