HTML Elements

HTML elements are a tool you can use to change what your text looks like and how it is arranged on the page.

I feel like just having Calamondins are delicious! in plain text doesn't really capture how delicious they are, so let's add some flavor to our text with the em element.

This time, instead of Calamondins are delicious!, put Calamondins are delicious! into the editor.

As you add the , you may see your first SiteGarden error message. If you have trouble getting elements right, read these error messages — they should help you figure it out.

When you're done, the preview should look like this:

Calamondins are delicious!

There, that gets you more of the feeling of just how emphatically delicious they are, right? Ugh, so delicious.

I think I'll go eat one right now.

Anyway, where was I? Oh, right, so the em HTML element we used here starts with  and ends with .  and  won't show up on the page, but they will tell your browser to add emphasis to everything that's in between them. That's why when you're done, the word "delicious" will be in italics in the preview.

The Anatomy of an Element

In Calamondins are delicious!, the em element is made up of three things.

Opening tag: 
Content: delicious!
Closing tag:

And all these things combined — opening tag, content, and closing tag—are called an HTML element: delicious!.

Now that you've made your first element, let's take it to the next level: click here to go to the next step: Grouping and Nesting HTML elements.