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.

Code Demonstration

index.html

style.css

Show Code

This is a title.

This is a link.

Run Code

View Code

HTML Tags Overview

<html>
<head>
<title></title>
<body>
<h1></h1>
<p></p>
<span></span>
<quote></quote>
<strong></strong>
<i></i>
<img src="" alt=""/>
<a href=""></a>
<audio></audio>
<video></video>
<map></map>
<br/>
<div></div>
<ul>
<li></li>
</ul>

Tag Descriptions

  • : All HTML documents start and stop with the tag.
  • : Contains the meta-information for the HTML document.
  • </strong>: Sets the title of the document, displayed on the browser tab.</li> <li><strong><body></strong>: All the content of your page is contained here.</li> <li><strong><h1></strong> to <strong><h6></strong>: Heading tags from most to least important.</li> <li><strong><p></strong>: Paragraph tag for creating text blocks.</li> <li><strong><div></strong>: A division in the content, separating things.</li> <li><strong><br></strong>: A break tag for adding space between elements.</li> <li><strong><strong></strong>: Indicates strong importance.</li> <li><strong><img></strong>: For inserting images into the document.</li> <li><strong><map></strong>: Used for incorporating maps.</li> <li><strong><ul></strong>: Unordered lists; for items without a specific order.</li> <li><strong><li></strong>: List items, nested under <ul> or <ol> tags.</li> <li><strong><blockquote></strong>: Used for quotes from other sources.</li> </ul> <h3>Media Tags</h3> <ul> <li><strong><audio></strong>: To embed sound files.</li> <li><strong><video></strong>: To embed video content.</li> <li><strong><table></strong>: Structuring content into rows and columns.</li> </ul> </section> </article> </main> <footer> <p>Original source: <a href="https://www.codemoji.com/playground.php?id=250">https://www.codemoji.com/playground.php?id=250</a></p> </footer> </body> </html>