# Document Types

The first step in any Umbraco site is to create a **Document Type**. A **Document Type** is a data container in Umbraco where you can add **Properties** (data fields/attributes) to input data. Each **Property** has a **Data Type** like text string, number, or rich text body. Umbraco outputs the input data using **Templates**.

These are some of the most common properties you would add to 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. Select **...** next to the **Document Types** in the **Settings** tree.

   ![Creating a Document Type](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-1caa8972ca0a57fb29f40b0b39bffdaa8e4cf8cf%2Ffigure-7-creating-a-document-type-v8.png?alt=media)
3. Select **Document Type with Template**.
   * Using folders can help you organise your **Document Types**.
4. 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 camel case. For example: *homePage*.
5. Enter the **Description**. For example: *This is our homepage template*. The description helps to identify the correct **Document Type** when creating new **Content Nodes** in the **Content Section**.
6. Click **Save**. Our new Document Type is now visible as a new item under **Document Types**.

   ![Saving a Document Type](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-848b24405e8e6fe3b2725fd26e290967d0d1e81a%2Ffigure-7-saving-a-document-type-v11.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. Select the icon placeholder next to the document name. The **Select Icon** dialog appears on the right-side of the website.

   ![Selecting an icon](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-271cf33bbdd18ec1592a417d3f3b3b9040a30f96%2Ffigure-9-adding-an-icon-to-document-type-v11.png?alt=media)
2. Browse through the icon list and select the icon of your choice.
3. Click **Submit**.

### Setting Permissions

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

1. Go to the **Structure** tab.

   ![Allow Document Type as root](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-1fea3e6ba48579bdf6b91cd1fd80d34f365dbe74%2Ffigure-9a-allow-document-type-as-root-v8.png?alt=media)
2. Toggle the **Allow at root** button.
   * If your **Document Types** do not have the **Allow as root** checked, you will not be able to create any content on your site.
3. Click **Save**.

### Adding Properties

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

1. Go to the **Design** tab.
2. Select **Add Group** and enter a name for the group. For this tutorial, we will call it *Content*.

   ![Adding a Group](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-cb70794b5c2193fc286af0abb7e2c85b6a2184e6%2Ffigure-10-document-types-adding-groups-v11.png?alt=media)
3. Select **Add property**. The **Property Settings** dialog opens.
4. Enter a **Name**. For example: *Page Title*.
5. Enter a **Description**. For example: *The main title of the page (Welcome to Widgets Ltd.)*.

   ![Adding a property](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-9118e0e9092ac439ab8ced4fbe1a95ab32bba6f8%2Ffigure-11-creating-our-pagetitle-property-v11.png?alt=media)
6. Select **Select Editor** and 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://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-a0c03ac76c0311cebc44f26383e5232467d9129a%2Ffigure-11a-selecting-textstring-data-type-v11.png?alt=media)
7. Click **Submit**.
   * Remember to come back and explore the list of ***Data Types*** later.
8. Repeat Steps 3 to 7 using the specification below:

   | Name        | Body Text                     |
   | ----------- | ----------------------------- |
   | Group       | Content                       |
   | Alias       | bodyText                      |
   | Description | The main content of the page. |
   | Data Type   | Richtext Editor               |
9. Select **Add Group** to create a new group called Footer. Repeat Steps 3 to 7 using the specification below:

   | Name        | Footer Text                      |
   | ----------- | -------------------------------- |
   | Group       | Footer                           |
   | Alias       | footerText                       |
   | Description | Copyright notice for the footer. |
   | Data Type   | Textstring                       |
10. Your Document Type should now look like this:

    ![Home Page with Properties](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-c8010c9738017d0fb9b218668984654b4822e757%2Ffigure-12-homepage-document-type-with-properties-v11.png?alt=media)
11. Click **Save**.

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