# 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
<html>
    <head>
        <title>Your Title Here</title>
    </head>
    <body>
        <h1>Welcome to Codemoji</h1>
        <p>This is a simple example paragraph.</p>
        <div>
            <p>This is a div element.</p>
        </div>
        <ul>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ul>
    </body>
</html>
```

## HTML Tags Explained

### The `<html>` Tag
All HTML documents start and stop with the `<html>` tag.

### The `<head>` Tag
You'll find the brains of the operation at the start, in the `<head>` - not seen on the page. You might want to add a `<title>` within the `<head>`.

### The `<title>` Tag
Turtles love **titles**. They like to put order to things and give them a name.

### The `<body>` Tag
Lots of things get layered to make a perfect page. All of the content will be layered in the **body**.

### The `<p>` Tag
Need a new **paragraph**? Drop a paragraph tag to get a new paragraph.

### The `<div>` Tag
A `<div>` is a division in the content, separating things in the **body**.

### The `<h1>` Tag
The most important header is the **H1**.

### The `<br>` Tag
Creates a break between lines of text.

### The `<strong>` Tag
Emphasizes something by making it **strong**.

### The `<img>` Tag
Use `<img>` to add an **image** to your page.

### The `<ul>` Tag
A list without any order, like a checklist.

### The `<li>` Tag
**Lists** are great for organization.

### The `<a>` Tag
**Links** connect the internet and allow you to connect to various sources.

### The `<table>` Tag
Use a `<table>` to create rows and columns for structured data.

### The `<audio>` Tag
Add some **audio**! Music can enhance your page.

### The `<video>` Tag
To add a video to your page, use the `<video>` tag.

```css
.color-1 { color: red; }
.color-2 { color: blue; }
.color-3 { color: green; }
.color-4 { color: orange; }
.color-5 { color: purple; }
```

---

Create your own unique page by using these tags and experimenting in the playground!
