Lesson 2

How HTML Works

There are millions of websites, and a lot of them are very big. Most of us don’t realize all the little details that make up a website. Usually we’re just enjoying the view. But when you take an up-close look at the code inside the website, it all starts to make sense. 

What are HTML tags

HTML tags are labels that describe different pieces of information, a lot like clothing tags. They tell you what the item is, and sometimes other information about it.

Most websites are made up of hundreds of tags, just like how fields have hundreds of pieces of grass and houses have hundreds of bricks.

 

When you’re building it’s important to know what each brick is and where it goes, but the end goal is to see something bigger all come together.

What does a tag look like?

Opening HTML Tag

Everything in HTML starts with an opening tag. An opening tag uses angled brackets to mark when they start and finish. Inside the brackets is the name of the tag, which is usually short – sometimes just one character long.

Opening HTML Tag with Attributes

Some HTML tags are super short and simple. But sometimes they need more information included. You’ll learn more later about some types of attributes you can add to your opening tag.

HTML Closing Tag

Just like how everything has an opening tag, most HTML elements have a closing tag. The way to recognize a closing tag is by the forward slash right after the opening bracket.

HTML Element

When you combine an opening tag, a closing tag, and all the content in-between, it’s called an HTML element.

Once you’ve learned how to understand the little details that make up a website, you can really start to take off and see the big picture.

Are you ready to learn?

Now that you’ve learned a little bit about how HTML tags work, it’s time to put your knowledge to the test!

In the playground at the bottom are the names of some common HTML tags, and the tags themselves.The tags all jumbled up right now. Your job is to pair the right name with the right opening and closing tag to complete the HTML elements. Make some guesses and try a few things to see how it works. When you get it right , you’ll see that a style applies to the text.

Build with us!

HTML

CSS

JavaScript

Output