HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="HTML, Hypertext Markup Language, forms, frames, imagemaps, tables"> <meta name="Description" content="HTML tutorials, examples, and general words of wisdom!"> <link rel="canonical" href="https://www.quackit.com/html/"> <title>HTML</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML</h1> <div class="ad ad-top">  <div data-fuse="23059883638"></div> </div> <p class="lead">HTML (HyperText Markup Language) is the language of the web. It allows you to create web pages and place anything you like on them (well, almost anything!).</p> <p>This section of Quackit provides a list of articles and tutorials to assist with your HTML coding.</p> <div class="cards"> <article class="card"> <a class="wrapper" href="/html/tutorial/"> <img src="/pix/stock/html_tutorial_500x200_2.gif" alt="HTML tutorial"> <div class="card-body"> <h2>HTML Tutorial</h2> <p>Walks through the basics, such as creating your first web page. Then covers topics including tables, adding color, images, forms, image maps, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/templates/"> <img src="/pix/stock/html_templates_500x200_3.png" alt="HTML templates"> <div class="card-body"> <h2>HTML Templates</h2> <p>Free, responsive templates that automatically adjust their layout according to the screen size.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/codes/"> <img src="/pix/stock/html_codes_500x200_1.gif" alt="HTML tutorial"> <div class="card-body"> <h2>HTML Codes</h2> <p>Extensive list of copy/paste code examples. Copy and paste straight into your website, blog, or newsletter.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/tags/"> <img src="/pix/stock/html_tags_500x200_1.gif" alt="HTML tags"> <div class="card-body"> <h2>HTML Tags</h2> <p>Full list of all HTML elements.</p> <p>This is an alphabetical list of HTML elements, linking to a full page of details for each element.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/online-html-editor/"> <img src="/pix/stock/editor_500x200_1.png" alt="HTML editor"> <div class="card-body"> <h2>HTML Editor</h2> <p>Use this online HTML editor to create HTML snippets or a whole web page.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/bootstrap/tutorial/"> <img src="/pix/stock/bootstrap_tutorial_500x200_1.png" alt="Bootstrap tutorial"> <div class="card-body"> <h2>Bootstrap Tutorial</h2> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/create-a-website/"> <img src="/pix/stock/create-a-website_500x200_2.png" alt="Create a website graphic"> <div class="card-body"> <h2>Create a Website</h2> <p>Explains the basic concepts behind creating a website. From hosting, domain names, to building it.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/html_table_tutorial.cfm"> <img src="/pix/stock/html_table_tutorial_2.png" alt="Tables graphic"> <div class="card-body"> <h2>HTML Table Tutorial</h2> <p>Learn to create tables in HTML with this 5 minute table tutorial. Includes table borders and alternating row colors.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/codes/color/"> <img src="/pix/stock/css_colors_2.png" alt="Color graphic"> <div class="card-body"> <h2>Color Codes</h2> <p>Includes a color picker, and a hex color chart with the equivalent color names and RGB values.</p> </div> </a> </article> </div> <div class="ad">  <div data-fuse="23059883644"></div> </div> <div class="cards"> <article class="card card-nohover"> <a class="wrapper" href="/character_sets/"> <img src="/pix/html/codes/html_entities.png" alt="Sample HTML entities"> </a> <div class="card-title"> <h2><a href="/character_sets/">Character Codes</a></h2> </div> <div class="card-body"> <ul class="list-unstyled"> <li><a href="/character_sets/unicode/">Unicode Reference Charts</a></li> <li><a href="/character_sets/emoji/">Emoji Icons</a></li> <li><a href="/character_sets/html5_entities/">HTML5 Entities (A - Z)</a></li> <li><a href="/character_sets/what_is_a_character_set.cfm">What is a Character Set?</a></li> <li><a href="/html/html_language_codes.cfm">Language Codes</a></li> </ul> </div> </article> <article class="card card-nohover"> <a class="wrapper" href="/html/html_generators/html_code_generator.cfm"> <img src="/pix/html/codes/html_generators.png" alt="HTML generator"> </a> <div class="card-title"> <h2><a href="/html/html_generators/html_code_generator.cfm">HTML Generators</a></h2> </div> <div class="card-body"> <ul class="list-unstyled"> <li><a href="/html/online-html-editor/">Online HTML Editor</a></li> <li><a href="/html/html_generators/html_code_generator.cfm">HTML Code Generator</a></li> <li><a href="/html/html_table_generator.cfm">HTML Table Generator</a></li> <li><a href="/html/html_generators/dummy_text_generator.cfm">Dummy Text Generator</a></li> <li><a href="/html/html_generators/html_marquee_generator.cfm">Marquee Generator</a></li> <li><a href="/html/html_generators/music_code_generator.cfm">Music Code Generator</a></li> <li><a href="/html/html_generators/html_text_generator.cfm">HTML Text Generator</a></li> <li><a href="/html/html_generators/html_text_box_generator.cfm">Text Box Generator</a></li> </ul> </div> </article> <article class="card card-nohover"> <a class="wrapper" href="/html/examples/"> <img src="/pix/stock/html_examples.png" alt="HTML examples"> </a> <div class="card-title"> <h2><a href="/html/examples/">HTML Examples</a></h2> </div> <div class="card-body"> <ul class="list-unstyled"> <li><a href="/html/examples/html_text_examples.cfm">HTML Text Examples</a> <li><a href="/html/examples/html_links_examples.cfm">HTML Link Examples</a></li> <li><a href="/html/examples/html_lists_examples.cfm">HTML List Examples</a></li> <li><a href="/html/examples/html_images_examples.cfm">HTML Image Examples</a></li> <li><a href="/html/examples/html_tables_examples.cfm">HTML Table Examples</a></li> <li><a href="/html/examples/html_forms_examples.cfm">HTML Form Examples</a></li> </ul> </div> </article> </div> <div class="cards"> <article class="card card-nohover"> <img src="/pix/stock/reference_1.png" alt="HTML reference"> <div class="card-title"> <h2>Quick Reference</h2> </div> <div class="card-body"> <h4><a href="/html/html_cheat_sheet.cfm">Cheat Sheet</a></h4> <p>Use this HTML cheat sheet to quickly create HTML tables, forms, fonts, color, image maps, hyperlinks and more.</p> <h4><a href="/html/html_help.cfm">HTML Help</a></h4> <p>Quick-reference to many common tasks. For example, help with tables, help with image maps, etc.</p> <h4><a href="/html/html_4/tags/" title="HTML 4 - The current (soon to be outdated) version of HTML">HTML4 Tags</a></h4> <p>HTML4 has been superseded by HTML5 but I've kept this link here just in case anyone needs it.</p> <h4><a href="/html_5/tags/" title="HTML 5 - The next version of HTML">HTML5 Tags</a></h4> <p>Note that this list now has the same elements that can be seen at <a href="/html/tags/">HTML Tags</a>.</p> </div> </article> <article class="card card-nohover"> <img src="/pix/stock/editor_500x200_1.png" alt="HTML editor"> <div class="card-title"> <h2>More Online Editors</h2> </div> <div class="card-body"> <h4><a href="/html/html_editors/">Editor List</a></h4> <ul> <li><a href="/html/html_editors/tinymce_editor.cfm">TinyMCE Editor</a></li> <li><a href="/html/html_editors/ck_editor_standard.cfm">CK Editor (standard)</a></li> <li><a href="/html/html_editors/ck_editor_full.cfm">CK Editor (full)</a></li> <li><a href="/html/html_editors/ck_editor_classic.cfm">CK Editor (classic)</a></li> </ul> <h4><a href="https://htmleditor.online/">HtmlEditor.Online</a></h4> <p>I've also set up a dedicated website with the CK editor over at <a href="https://htmleditor.online/">HtmlEditor.Online</a>.</p> <h4><a href="/html/html_editors/scratchpad/">Quackit Scratchpad</a></h4> <p>Run and preview your code online. Includes full-screen preview.</p> </div> </article> </div> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> <li> <h3><a href="/html/tutorial/">HTML Tutorial</a></h3> <ul> <li><a href="/html/tutorial/introduction.cfm">Introduction to HTML</a></li> <li><a href="/html/tutorial/getting_started.cfm">Getting Started</a></li> <li><a href="/html/tutorial/html_elements.cfm">HTML Elements</a></li> <li><a href="/html/tutorial/html_formatting.cfm">HTML Formatting & Semantics</a></li> <li><a href="/html/tutorial/html_attributes.cfm">HTML Attributes</a></li> <li><a href="/html/tutorial/html_styles.cfm">HTML Styles</a></li> <li><a href="/html/tutorial/html_colors.cfm">HTML Colors</a></li> <li><a href="/html/tutorial/html_links.cfm">HTML Links</a></li> <li><a href="/html/tutorial/html_images.cfm">HTML Images</a></li> <li><a href="/html/tutorial/html_meta_tags.cfm">HTML Meta Tags</a></li> <li><a href="/html/tutorial/html_comments.cfm">HTML Comments</a></li> <li><a href="/html/tutorial/html_forms.cfm">HTML Forms</a></li> <li><a href="/html/tutorial/html_tables.cfm">HTML Tables</a></li> <li><a href="/html/tutorial/html_image_maps.cfm">HTML Image Maps</a></li> <li><a href="/html/tutorial/html_iframes.cfm">HTML iFrames</a></li> <li><a href="/html/tutorial/html_entities.cfm">HTML Entities</a></li> <li><a href="/html/tutorial/html_layouts.cfm">HTML Layouts</a></li> <li><a href="/html/tutorial/html_scripts.cfm">HTML Scripts</a></li> <li><a href="/html/tutorial/html_website_templates.cfm">HTML Website Templates</a></li> <li><a href="/html/tutorial/website_hosting.cfm">Website Hosting</a></li> <li><a href="/html/tutorial/summary.cfm">Summary</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059883641"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059511718"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

HTML