This is the <title> tag. Turtles love **titles**. They like to put order to things and give them a name. ### <body> This is the <body> tag. Lots of things get layered to make a perfect <img src="https://www.codemoji.com/images/burger.png">. Within the buns of a perfect burger or page, all of the content with be layered in the **body**. Go ahead, jam in as many toppings as you can. ### <p> This is the <p> tag. Need a new **paragraph**! <img src="https://www.codemoji.com/images/news.png">? Newspapers are fill with them. Drop a newspaper in to get a new paragraph. ### <div> This is the <div> tag. Just like buses that have to come to a complete stop before starting up again, a <img src="https://www.codemoji.com/images/sign.png"> is a division in the content, separating things in the **body**. ### <h1> This is the <h1> tag. Just like swirls on a soft serve ice cream cone, **H1** to **H6** tags are here. The most important ones are the **H1**, like the biggest swirl at the bottom, and the least important ones **H6**, like the smallest swirl at the top. ### <br> This is the <br> tag. We've all had a heart break. It creates separation and **break**! <img src="https://www.codemoji.com/images/heart.png"> between likes of text, or friends <img src="https://www.codemoji.com/images/wink.png">. ### <strong> This is the <strong> tag. Sometimes you need to emphasize something and say it **strong** ly. Add a little <img src="https://www.codemoji.com/images/strong.png"> muscle, like this flexed bicep. ### <img> This is the <img> tag. Who doesn’t love to take snapshots and pictures to share with friends? If you need to add an **image** <img src="https://www.codemoji.com/images/camera.png"> to your page, just use a <img src="https://www.codemoji.com/images/camera.png"> and select the picture you'd like. ### <map> This is the <map> tag. Location is everything. Add a **map** <img src="https://www.codemoji.com/images/map.png"> to your document by dropping this map in and selecting a country. ### <ul> This is the <ul> tag. Some lists don't have any order, like a checklist. Drop in the checkmark when you want a quick list that's not ordered. ### <li> This is the <li> tag. **Lists** are a great way to add some order to things. Add a list to your page and see the magic. ### <b> This is the <b> tag. Go **bold** ly where no one has gone before, or just make some text **bold**! <img src="https://www.codemoji.com/images/rocket.png"> ### <i> This is the <i> tag. Sometimes you need to say something special, like a book title, or movie name, so why not **italics**! <img src="https://www.codemoji.com/images/italics.png"> ### <span> This is the <span> tag. Just like a scroll, **span** is a section in the document. ### <a> This is the <a> tag. **Links** connect the internet, and allow you to connnect to various sources, pages, or content. Drop in a <img src="https://www.codemoji.com/images/link.png"> to make a connection. ### <blockquote> This is the <blockquote> tag. Most good books are filled with **quotes**, so anytime you want to add a **blockquote**, just open a book. ### <table> This is the <table> tag. Structure makes things easier to understand sometimes. Add a **table** to make rows and columns when you need say something with structure. ### <audio> This is the <audio> tag. Life is always better with some music. Add some **audio** <img src="https://www.codemoji.com/images/music.png"> to your page with the <img src="https://www.codemoji.com/images/music.png">. ### <video> This is the <video> tag. Who can resist eating <img src="https://www.codemoji.com/images/popcorn.png"> when you go to the movies or watch a video? To add a video to your page, drop in this <img src="https://www.codemoji.com/images/popcorn.png">.

# Welcome to the Playground! I see that it's your first time here. Please consider doing a few lessons first if you are not familiar with Codemoji and in no time you'll be able to come back and master the playground! This area is called the playground. You can use it to play around with the different tags, building whatever webpage you would like. There are no rules! Simply drag the emojis from the Emoji Box into the text editor on the left and then add text to see what you can create. As always, press the blue "Run Code" button in the bottom left corner of the screen to run your code, then press the purple "View Code" button that appears to see what you've created! If you forget your task (to play!) or would like a refresher as to how the playground works, simply click the white triangle in the bottom left corner of the screen and this tip will reappear. # HTML Tags ### This is the tag. Before you can get going, you need a green light. All HTML documents start and stop with the

so drop one in to begin, and to end your document. ### This is the tag. You'll find the brains of the operation, at the start, in the panda's **head** \- not seen on the page. You might want to add a

**title** within the

**head**. ### This is the <title> tag. Turtles love **titles**. They like to put order to things and give them a name. ### <body> This is the <body> tag. Lots of things get layered to make a perfect <img src="https://www.codemoji.com/images/burger.png">. Within the buns of a perfect burger or page, all of the content with be layered in the **body**. Go ahead, jam in as many toppings as you can. ### <p> This is the <p> tag. Need a new **paragraph**! <img src="https://www.codemoji.com/images/news.png">? Newspapers are fill with them. Drop a newspaper in to get a new paragraph. ### <div> This is the <div> tag. Just like buses that have to come to a complete stop before starting up again, a <img src="https://www.codemoji.com/images/sign.png"> is a division in the content, separating things in the **body**. ### <h1> This is the <h1> tag. Just like swirls on a soft serve ice cream cone, **H1** to **H6** tags are here. The most important ones are the **H1**, like the biggest swirl at the bottom, and the least important ones **H6**, like the smallest swirl at the top. ### <br> This is the <br> tag. We've all had a heart break. It creates separation and **break**! <img src="https://www.codemoji.com/images/heart.png"> between likes of text, or friends <img src="https://www.codemoji.com/images/wink.png">. ### <strong> This is the <strong> tag. Sometimes you need to emphasize something and say it **strong** ly. Add a little <img src="https://www.codemoji.com/images/strong.png"> muscle, like this flexed bicep. ### <img> This is the <img> tag. Who doesn’t love to take snapshots and pictures to share with friends? If you need to add an **image** <img src="https://www.codemoji.com/images/camera.png"> to your page, just use a <img src="https://www.codemoji.com/images/camera.png"> and select the picture you'd like. ### <map> This is the <map> tag. Location is everything. Add a **map** <img src="https://www.codemoji.com/images/map.png"> to your document by dropping this map in and selecting a country. ### <ul> This is the <ul> tag. Some lists don't have any order, like a checklist. Drop in the checkmark when you want a quick list that's not ordered. ### <li> This is the <li> tag. **Lists** are a great way to add some order to things. Add a list to your page and see the magic. ### <b> This is the <b> tag. Go **bold** ly where no one has gone before, or just make some text **bold**! <img src="https://www.codemoji.com/images/rocket.png"> ### <i> This is the <i> tag. Sometimes you need to say something special, like a book title, or movie name, so why not **italics**! <img src="https://www.codemoji.com/images/italics.png"> ### <span> This is the <span> tag. Just like a scroll, **span** is a section in the document. ### <a> This is the <a> tag. **Links** connect the internet, and allow you to connnect to various sources, pages, or content. Drop in a <img src="https://www.codemoji.com/images/link.png"> to make a connection. ### <blockquote> This is the <blockquote> tag. Most good books are filled with **quotes**, so anytime you want to add a **blockquote**, just open a book. ### <table> This is the <table> tag. Structure makes things easier to understand sometimes. Add a **table** to make rows and columns when you need say something with structure. ### <audio> This is the <audio> tag. Life is always better with some music. Add some **audio** <img src="https://www.codemoji.com/images/music.png"> to your page with the <img src="https://www.codemoji.com/images/music.png">. ### <video> This is the <video> tag. Who can resist eating <img src="https://www.codemoji.com/images/popcorn.png"> when you go to the movies or watch a video? To add a video to your page, drop in this <img src="https://www.codemoji.com/images/popcorn.png">.