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 Structure

  1. HTML Tag
    This is the <html> tag. Before you can get going, you need a green light. All HTML documents start and stop with the <html> so drop one in to begin, and to end your document.

  2. Head Tag
    This is 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>.

  3. Title Tag
    This is the <title> tag. Turtles love titles. They like to put order to things and give them a name.

  4. Body Tag
    This is the <body> tag. Lots of things get layered to make a perfect page. All of the content will be layered in the body. Go ahead, jam in as many toppings as you can.

  5. Paragraph Tag
    This is the <p> tag. Need a new paragraph? Newspapers are filled with them. Drop a new paragraph in to get a new paragraph.

  6. Div Tag
    This is the <div> tag. Just like buses that have to come to a complete stop before starting up again, a <div> is a division in the content, separating things in the body.

  7. H1 Tag
    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.

  8. Break Tag
    This is the <br> tag. It creates separation and break between likes of text.

  9. Strong Tag
    This is the <strong> tag. Add a little emphasis and say it strongly.

  10. Image Tag
    This is the <img> tag. If you need to add an image to your page, just use an <img> and select the picture you'd like.

  11. Map Tag
    This is the <map> tag. Location is everything. Add a map to your document by dropping this map in and selecting a country.

  12. Unordered List Tag
    This is the <ul> tag. Some lists don't have any order, like a checklist.

  13. List Item Tag
    This is the <li> tag. Lists are a great way to add some order to things.

  14. Bold Tag
    This is the <b> tag. Go boldly where no one has gone before.

  15. Italics Tag
    This is the <i> tag. Sometimes you need to express something special, like a book title, or movie name.

  16. Span Tag
    This is the <span> tag. It is a section in the document.

  17. Link Tag
    This is the <a> tag. Links connect the internet, and allow you to connect to various sources.

  18. Blockquote Tag
    This is the <blockquote> tag. Most good books are filled with quotes.

  19. Table Tag
    This is the <table> tag. Structure makes things easier to understand sometimes.

  20. Audio Tag
    This is the <audio> tag. Add some music to your page.

  21. Video Tag
    This is the <video> tag. To add a video to your page, drop in this tag.