Welcome to Codemoji 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

HTML

All HTML documents start and stop with the tag, so drop one in to begin, and to end your document.

Head

You'll find the brains of the operation, at the start, in the tag - not seen on the page. You might want to add a within the <head>.</p> <h3>Title</h3> <p>Turtles love <strong>titles</strong>. They like to put order to things and give them a name.</p> <h3>Body</h3> <p>Lots of things get layered to make a perfect page within the <body> tag. Go ahead, jam in as many toppings as you can.</p> <h3>Paragraph</h3> <p>Need a new <p> paragraph? Newspapers are filled with them. Drop a paragraph in to get a new one.</p> <h3>Division</h3> <p>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>.</p> <h3>Header</h3> <p>Just like swirls on a soft serve ice cream cone, <strong>H1</strong> to <strong>H6</strong> tags are here. The most important ones are the <strong>H1</strong>, like the biggest swirl at the bottom, and the least important ones <strong>H6</strong>, like the smallest swirl at the top.</p> <h3>Break</h3> <p>The <br> tag creates separation and break between likes of text, or friends.</p> <h3>Strong</h3> <p>Sometimes you need to emphasize something and say it strongly. Add a little muscle, like this flexed bicep with the <strong> tag.</p> <h3>Image</h3> <p>If you need to add an <strong>image</strong> to your page, just use an <img> and select the picture you'd like.</p> <h3>Map</h3> <p>Add a <strong>map</strong> to your document by dropping this map in and selecting a country.</p> <h3>Unordered List</h3> <p>Some lists don't have any order, like a checklist. Drop in the <ul> tag when you want a quick list that's not ordered.</p> <h3>List Item</h3> <p>Add a list item to your page using the <li> tag and see the magic.</p> <h3>Blockquote</h3> <p>Most good books are filled with <strong>quotes</strong>. Anytime you want to add a <strong>blockquote</strong>, just open one.</p> <h3>Table</h3> <p>Structure makes things easier to understand sometimes. Add a <strong>table</strong> to make rows and columns when you need to organize information.</p> <h3>Audio</h3> <p>Life is always better with some music. Add some <strong>audio</strong> to your page with the <audio> tag.</p> <h3>Video</h3> <p>Who can resist eating popcorn when you go to the movies or watch a video? To add a video to your page, use the <video> tag.</p> </section> </article> </main> <footer> <p>Original source: <a href="https://www.codemoji.com/playground.php?id=274">https://www.codemoji.com/playground.php?id=274</a></p> </footer> </body> </html>