> For the complete documentation index, see [llms.txt](https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/html-templates/creating-the-html.md).
# Creating the HTML
Here we will create all the HTML code needed to create the graphic.
Our HTML file is going to contain two main parts, the SVG background element and text elements. As of now our `lower-third.1.html` file looks like this.
```markup
Lower Third 1
```
To begin with, let's add a `main` element inside the `body` with a class of `lt-style-one`. This `main` element will contain and position our graphic. Along with the `main` element, we will add a `div` element that will contain the graphic's elements. We will also give the `div`a class of `graphic`.
```markup
```
### Creating the SVG Element
The outer bounding box of our graphic is going to be an [SVG element](https://developer.mozilla.org/en-US/docs/Web/SVG) so we can use properties like `stroke-dasharray` to animate the border around the text. To begin, lets create the basic `svg` element.
```markup
```
This SVG element will give us a `viewbox` with a width of `100` and a height of `100`. We will add one addition property, `preserveAspectRatio`, that is going to allow our SVG element to scale freely with our inner text.
```markup