Easy_HTML Cheatsheet: Essential Tags for Beginners

Easy_HTML for Kids: Learn HTML with Fun ExamplesLearning HTML can be like learning the alphabet for the web — once you know the letters, you can build words, sentences, and entire stories. This guide, tailored for kids, uses playful examples and hands-on mini-projects to make HTML simple, safe, and fun. No prior experience required.


What is HTML?

HTML stands for HyperText Markup Language. HTML is the language used to create webpages. It tells a browser what content to show and how to structure it. Think of HTML as the skeleton of a webpage — it gives things shape so you can add color, style, and interactivity later.


Basic building blocks

HTML is made of “tags.” Tags are like labeled boxes that tell the browser what each part of your webpage is. Tags usually come in pairs: an opening tag and a closing tag.

Example:

<p>This is a paragraph.</p> 
  • is the paragraph tag.

  • Everything between the tags becomes a paragraph on the page.

Important beginner tags:

  • — root element
  • — where you put invisible info (like page title)
  • — the name shown on the browser tab</li> <li><body> — where visible content goes</li> <h1> to </p> <h6> — headings (h1 is the biggest)</li> <li> <p> — paragraph</li> <li><a href="url"> — link</li> <li><img decoding="async" src="image.jpg" alt="description"> — image</li> <li> <ul>, </p> <ol>, </p> <li> — lists (unordered and ordered)</li> <li> <div> and <span> — boxes for grouping elements</li> </ul> <hr> <h3 id="setting-up-a-simple-page">Setting up a simple page</h3> <p>Create a new file named index.html and paste this starter template:</p> <pre><code ><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My First Easy_HTML Page</title> </head> <body> <h1>Welcome to Easy_HTML!</h1> <p>Hello — this is my first webpage.</p> </body> </html> </code></pre> <p>Save and open it in a browser to see your page.</p> <hr> <h3 id="fun-example-1-my-pet-page">Fun example 1 — My Pet Page</h3> <p>Make a page about a pet (real or imaginary). Kids love personal projects.</p> <p>Code:</p> <pre><code ><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Pet</title> </head> <body> <h1>My Pet: Captain Whiskers</h1> <img src="cat.jpg" alt="A fluffy cat" width="300" /> <p>Captain Whiskers likes to nap in sunny spots and chase yarn.</p> <h2>Favorite Foods</h2> <ul> <li>Tuna</li> <li>Chicken</li> <li>Catnip treats</li> </ul> </body> </html> </code></pre> <p>Tip: Use a local image or a safe image URL. The alt text helps users who can’t see the image.</p> <hr> <h3 id="fun-example-2-my-favorite-things-card">Fun example 2 — My Favorite Things Card</h3> <p>Create a simple card that lists favorite things with links and emojis.</p> <p>Code:</p> <pre><code ><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Favorite Things</title> </head> <body> <h1>My Favorite Things</h1> <p>Here are a few things I love:</p> <ol> <li>Reading 📚 — <a href="https://www.example.com">Learn more</a></li> <li>Drawing 🎨</li> <li>Robots 🤖</li> </ol> </body> </html> </code></pre> <p>Note: Choose safe websites for links and ask an adult before visiting unfamiliar sites.</p> <hr> <h3 id="fun-example-3-colorful-buttons-interactive-using-basic-links">Fun example 3 — Colorful Buttons (interactive using basic links)</h3> <p>Create big colorful buttons using simple links styled inline.</p> <p>Code:</p> <pre><code ><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Colorful Buttons</title> </head> <body> <h1>Choose a Button</h1> <a href="#" style="display:inline-block;padding:12px 20px;background:#ff6f61;color:white;text-decoration:none;border-radius:8px;margin:6px;">Red Button</a> <a href="#" style="display:inline-block;padding:12px 20px;background:#6fbf73;color:white;text-decoration:none;border-radius:8px;margin:6px;">Green Button</a> <a href="#" style="display:inline-block;padding:12px 20px;background:#4da6ff;color:white;text-decoration:none;border-radius:8px;margin:6px;">Blue Button</a> </body> </html> </code></pre> <p>Clicking these won’t do anything yet, but they look like buttons — perfect for learning styling later.</p> <hr> <h3 id="fun-example-4-mini-quiz-html-structure">Fun example 4 — Mini Quiz (HTML structure)</h3> <p>Build a simple quiz layout. This example uses only HTML; adding JavaScript later can make it interactive.</p> <p>Code:</p> <pre><code ><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Mini Quiz</title> </head> <body> <h1>Animal Quiz</h1> <p>Which animal says "meow"?</p> <ul> <li>Dog</li> <li>Bird</li> <li>Cat</li> </ul> <p>Answer: <strong>Cat</strong></p> </body> </html> </code></pre> <p>Later you can learn to hide the answer and reveal it after a click with JavaScript.</p> <hr> <h3 id="safe-and-friendly-tips-for-kids">Safe and friendly tips for kids</h3> <ul> <li>Ask an adult before posting anything online or sharing personal info. </li> <li>Use only safe images and websites. </li> <li>Practice locally on your computer — no internet required. </li> <li>Save your files with .html and open them in a browser.</li> </ul> <hr> <h3 id="next-steps-what-to-learn-after-html">Next steps (what to learn after HTML)</h3> <ul> <li>CSS — for colors, fonts, and layout.</li> <li>JavaScript — to add interactivity (buttons that do things).</li> <li>Simple projects: digital greeting cards, mini galleries, or an “About Me” page (without personal contact info).</li> </ul> <hr> <h3 id="final-project-idea-my-mini-website">Final project idea: My Mini Website</h3> <p>Combine the examples above into a small website with multiple pages (Home, About My Pet, Favorites, Quiz). Use folders to organize images and link the pages with <a href="page2.html">Next</a>.</p> <p>Have fun building — HTML is the first step to making your own corner of the web!</p> </div> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> </div> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);"> <nav class="wp-block-group alignwide is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-9b36172e wp-block-group-is-layout-flex" aria-label="Post navigation" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"> <div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="http://cloud9342.click/star-fax-cover-sheet-creator-customizable-templates-for-every-office/" rel="prev">Star Fax Cover Sheet Creator: Customizable Templates for Every Office</a></div> <div class="post-navigation-link-next wp-block-post-navigation-link"><a href="http://cloud9342.click/best-practices-system-center-monitoring-pack-for-system-center-2012-app-controller/" rel="next">Best Practices: System Center Monitoring Pack for System Center 2012 — App Controller</a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div> </nav> </div> <div class="wp-block-comments wp-block-comments-query-loop" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"> <h2 class="wp-block-heading has-x-large-font-size">Comments</h2> <div id="respond" class="comment-respond wp-block-post-comments-form"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/easy_html-cheatsheet-essential-tags-for-beginners/#respond" style="display:none;">Cancel reply</a></small></h3><form action="http://cloud9342.click/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit wp-block-button"><input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='520' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div> </div> <div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> <h2 class="wp-block-heading alignwide has-small-font-size" style="font-style:normal;font-weight:700;letter-spacing:1.4px;text-transform:uppercase">More posts</h2> <div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow"> <ul class="alignfull wp-block-post-template is-layout-flow wp-container-core-post-template-is-layout-3ee800f6 wp-block-post-template-is-layout-flow"><li class="wp-block-post post-1051 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud9342.click/top-alternatives-to-pinghd-finding-the-right-digital-signage-solution/" target="_self" >Top Alternatives to PingHD: Finding the Right Digital Signage Solution</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-11T13:40:10+01:00"><a href="http://cloud9342.click/top-alternatives-to-pinghd-finding-the-right-digital-signage-solution/">11 September 2025</a></time></div> </div> </li><li class="wp-block-post post-1050 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud9342.click/time-zone-mastery-essential-techniques-for-travelers-and-remote-workers/" target="_self" >Time Zone Mastery: Essential Techniques for Travelers and Remote Workers</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-11T12:13:30+01:00"><a href="http://cloud9342.click/time-zone-mastery-essential-techniques-for-travelers-and-remote-workers/">11 September 2025</a></time></div> </div> </li><li class="wp-block-post post-1049 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud9342.click/simulation-exams-for-ccna-icnd2-200-101/" target="_self" >Simulation Exams for CCNA-ICND2 200-101</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-11T11:54:46+01:00"><a href="http://cloud9342.click/simulation-exams-for-ccna-icnd2-200-101/">11 September 2025</a></time></div> </div> </li><li class="wp-block-post post-1048 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud9342.click/why-site-visualizer-professional-is-essential-for-modern-architects-and-designers/" target="_self" >Why Site Visualizer Professional is Essential for Modern Architects and Designers</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-11T11:12:16+01:00"><a href="http://cloud9342.click/why-site-visualizer-professional-is-essential-for-modern-architects-and-designers/">11 September 2025</a></time></div> </div> </li></ul> </div> </div> </main> <footer class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-e5edad21 wp-block-group-is-layout-flex"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><h2 class="wp-block-site-title"><a href="http://cloud9342.click" target="_self" rel="home">cloud9342.click</a></h2> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div> </div> </div> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-570722b2 wp-block-group-is-layout-flex"> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Blog</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">About</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">FAQs</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Authors</span></a></li></ul></nav> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Events</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Shop</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Patterns</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Themes</span></a></li></ul></nav> </div> </div> <div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-91e87306 wp-block-group-is-layout-flex"> <p class="has-small-font-size">Twenty Twenty-Five</p> <p class="has-small-font-size"> Designed with <a href="https://en-gb.wordpress.org" rel="nofollow">WordPress</a> </p> </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/twentytwentyfive\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script src="http://cloud9342.click/wp-includes/js/comment-reply.min.js?ver=6.8.2" id="comment-reply-js" async data-wp-strategy="async"></script> <script id="wp-block-template-skip-link-js-after"> ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.id = 'wp-skip-link'; skipLink.href = '#' + skipLinkTargetID; skipLink.innerText = 'Skip to content'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); </script> </body> </html>