Intro

Let’s go over how to write our own elements. There are 2 ways of writing elements. One way is slower and the other is faster.

For this example, we’re going to create a paragraph element, but these techniques will apply to any element.

Steps

Paragraph element

Paragraph elements are meant to hold paragraphs of text, but it’s also ok to just put a single sentence, which we’ll do in this example. Let’s go over the slow way of writing an element first.

To write a paragraph element using the slow way, put your cursor in between the body tags.

Create opening tag

Then, type an opening angle bracket, the letter p, and then a closing angle bracket.

Autocomplete

VS Code will automatically create the closing paragraph tag for you.

Add content

The text we want displayed on the webpage goes in between the 2 tags. For this example, I’ll write This is a paragraph.

Check preview

If we check the preview, we should see the text appear. It just looks like plain text, which is what we want.

So that’s how you create an element the slow way.