# Creating the HTML 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 ``` Next, we will need the two `path` elements that will make up our border for our graphic. ```markup ``` The property `vector-effect` defines how a vector element, `path` in this case, scales when the SVG element changes size. We want the border to remain a constant size no matter the width or height so we will set the value to `non-scaling-stroke`. #### Resources * [SVG Element](https://developer.mozilla.org/en-US/docs/Web/SVG) on MDN's website. * [View Box ](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)on MDN's website. * [Path Element](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) on MDN's website. * [Preserve Aspect Ratio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) on MDN's website. * [Vector Effect](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect) on MDN's website. ### Creating the Text Now that we have created our border, let's add in the text. We will only need a total of three elements to make this happen. A `h1`, `div`, and `p` element. ```markup

Lower Third Title

Subtitle

``` Our `div` element will act as the background for our subtitle element. Here is one last look at our final `lower-third.1.html` file. ```markup Lower Third 1

Lower Third Title

Subtitle

``` That is all we will need for HTML! Next we will style the graphic with SCSS.