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 Overview


  1. 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.


  2. 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.

  3. </strong><br>This is the <title> tag. Turtles love <strong>titles</strong>. They help to give a name to your page.</p> </li> <li><p><strong><body></strong><br>This is the <body> tag. Lots of things get layered to make a perfect page. All of the content will be layered in the <strong>body</strong>.</p> </li> <li><p><strong><p></strong><br>This is the <p> tag. Need a new <strong>paragraph</strong>? Drop in a new paragraph here.</p> </li> <li><p><strong><div></strong><br>This is the <div> tag. Just like buses that have to come to a complete stop, a <strong>div</strong> is a division in the content.</p> </li> <li><p><strong><h1></strong><br>This is the <h1> tag. The most important heading tag, like the biggest swirl on an ice cream cone.</p> </li> <li><p><strong><br></strong><br>This is the <br> tag. It creates separation between pieces of text.</p> </li> <li><p><strong><strong></strong><br>This is the <strong> tag. Sometimes you need to emphasize something and say it <strong>strongly</strong>.</p> </li> <li><p><strong><img></strong><br>This is the <img> tag. Use it to add an <strong>image</strong> to your page.</p> </li> <li><p><strong><map></strong><br>This is the <map> tag. Add a <strong>map</strong> to your document by dropping this in.</p> </li> <li><p><strong><ul></strong><br>This is the <ul> tag. Some lists don't have any order, like a checklist.</p> </li> <li><p><strong><li></strong><br>This is the <li> tag. Lists are a great way to add some order to things.</p> </li> <li><p><strong><b></strong><br>This is the <b> tag. Go <strong>boldly</strong> where no one has gone before!</p> </li> <li><p><strong><i></strong><br>This is the <i> tag. Use italics for special text.</p> </li> <li><p><strong><span></strong><br>This is the <span> tag. A section in the document.</p> </li> <li><p><strong><a></strong><br>This is the <a> tag. Links connect the internet.</p> </li> <li><p><strong><blockquote></strong><br>This is the <blockquote> tag. Use it for quotes.</p> </li> <li><p><strong><table></strong><br>This is the <table> tag. Add structure with rows and columns.</p> </li> <li><p><strong><audio></strong><br>This is the <audio> tag. Add some <strong>audio</strong> to your page.</p> </li> <li><p><strong><video></strong><br>This is the <video> tag. To add a video, drop this in.</p> </li> <li><p><strong><tr></strong><br>This is the <tr> tag for table rows.</p> </li> <li><p><strong><td></strong><br>This is the <td> tag for table data cells.</p> </li> </ol> </section> </article> </main> <footer> <p>Original source: <a href="https://www.codemoji.com/playground.php?id=273">https://www.codemoji.com/playground.php?id=273</a></p> </footer> </body> </html>