Generating HTML document using Aspose.HTML for .NET
Tags: csharp, beginners, html, tutorial
Published: 2018-10-08 21:11:52

---
title: Generating HTML document using Aspose.HTML for .NET
published: true
description: The easiest way to generate HTML document in C#
tags: csharp, beginner, html, tutorial
---

From time to time you having a deal with a situation where you have to generate some HTML in C# code. Of course, the simplest way is to merge the strings and returns that result from the method. This is not the nicest solution, and it is good for some short strings.

In case you have a more complex HTML structure, the code becomes unsupported through many string formats and merging.

Although this is the worst way to do it, a lot of developers go with this approach but it means "it working now, but not it will not be supported in the future".

In this article, I want to show how to generate an HTML using Aspose.HTML for .NET. 

# Introduction

Aspose.HTML for .NET is both parser and page renderer. As parser, it provides access to the W3C-standard Document Object Model. So if familiar with DOM, you can easily generate an HTML document with Aspose.HTML


The Aspose.HTML library has an [**HTMLDocument**](https://apireference.aspose.com/net/html/aspose.html/htmldocument) class. This class is a root of the HTML hierarchy and holds the entire content.

The class contains several methods and properties that can help us create a simple page:

**Methods**

* [AppendChild](https://apireference.aspose.com/net/html/aspose.html.dom/node/methods/appendchild) - Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, then it is removed;

* [CreateElement](https://apireference.aspose.com/net/html/aspose.html.dom/node/methods/appendchild) - Creates an element of the type specified. Note that the instance returned implements the Element interface, so attributes can be specified directly on the returned object;

**Properties**

* [ParentElement](https://apireference.aspose.com/net/html/aspose.html.dom/node/properties/parentelement) - Gets the parent Element of this node;

* [Body](https://apireference.aspose.com/net/html/aspose.html/htmldocument/properties/body) - The element that holds the content for the document;

* [ChildNodes](https://apireference.aspose.com/net/html/aspose.html.dom/document/methods/createelement) - A NodeList that contains all children of this node. If there are no children, this is a NodeList containing no nodes.


The methods and properties described above use a [NodeList](https://apireference.aspose.com/net/html/aspose.html.collections/nodelist). The NodeList provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. In real cases of usage, NodeList represents a list of DOM elements and depends on a query type.

## Creating a simple HTML document

Let’s try to create a simple document, which contains one image, one ordered list and a table 3x3\. We will use Visual Studio 2017 in this demo:

### Step 1: Create a Project in Visual Studio

Open Visual Studio and select **File** >> **New** >> **Project menu.**

In **New Project**, you will see **Installed Templates** in the left side templates listing. On the left side, you have a choice to select a language - Visual C#. I selected **Visual C#**->**Windows Classic Desktop**->**Console App (.NET Framework).**

### Step 2: Add Aspose.Html library

Go to **Tools->Nuget Package Manager->Package Manager Console**. Run command: `Install-Package Aspose.Html`

### Step 3: Create an empty html document

Let’s try to create an empty HTML document and store it to local file `c:\apsdemo\files\demo1.html`. You need to create a folder for a demo file. One of the ways to implement this is running the command in the Package Manager Console: `New-Item -ItemType Directory C:\asposedemo\files\`

Add the following text to the Main method:

{% gist https://gist.github.com/andruhovski/61d47906d1ed1b5369b15e30427e6394 %}

Run the application and examine the results. After the execution in the folder `c:\asposedemo\files\` there appears file demo1.html with the initial document structure:

{% gist https://gist.github.com/andruhovski/8e1099926a4fe3358dbf6a03f6227088 %}

### Step 4: Add the image element to the document

First, we need to create an instance of **HTMLImageElement** using **document.CreateElement** method and fill its properties with the appropriate value. In this example, we set an **src**, **alt** and **title** attributes and call **AppendChild** method to append this element to the **Body**.

1. Add the following code to the Main method before **document.Save**:

{% gist https://gist.github.com/andruhovski/fbf2b9220eab31c82f219a79b670b2d3 %}

2. Run the application and examine the results. Please notice, that the image was stored in a folder with template name **<document>_files**. After the execution in the folder `c:\asposedemo\files\` there appears file demo01.html with the initial document structure:

{% gist https://gist.github.com/andruhovski/e34e292c8e0862e079bae33a22b85947 %}


### Step 5: Add the ordered list to the document

We will use the same strategy as in the previous step:

*   create an instance of **HTMLOListElement** as a container for the list items,
*   create several list items and add them to the container,
*   add the container to the Body.

We will use [TextContent](https://apireference.aspose.com/net/html/aspose.html.dom/node/properties/textcontent) property to save list item value.

1.  Add the following code to the Main method before **document.Save**:

{% gist https://gist.github.com/andruhovski/43c91fc49c7180f22513264306b97428 %}

2.  Run the application and examine the results. You will see something like this:  

{% gist https://gist.github.com/andruhovski/82c56b3502e2e90a8218f33795ad8717 %}

### Step 6: Add the table to the document

As in the steps above, we need to:

*   create a table as a container of thead/tfoot/tbody,
*   create a tbody as a container of rows,
*   create rows and add cells to each row.

Please notice, that we will create 3 rows with 3 cells each. For each row, we will set an **id** attribute and for each cell, we well set **id** and a cell's value. It's only for demo purposes.

1.  Add the following text to the Main method:

{% gist https://gist.github.com/andruhovski/ae6f2193217df8556dcd8ecef7822bb0 %}

2.  Run the application and examine the results. You will see something like this:

{% gist https://gist.github.com/andruhovski/56f3dafc3bcf27813f2e9ac5fa80820b %}

## Additional step

In this example a `<head>`-element remained empty. We can use [FirstChild](https://apireference.aspose.com/net/html/aspose.html.dom/node/properties/firstchild) property twice to get an instance `<head>`-element and add a `<title>`-element for example:

{% gist https://gist.github.com/andruhovski/1e46bf52a61aeeecb63d4edac6a998c1 %}

So, we have created a simple page with an image, a list, and a table. You can see full example here: 

{% gist https://gist.github.com/andruhovski/e57137932a2c9cf9dfa23c631d968675 %}