HTML Codes

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="free html codes, list of html code, web page code, copy and paste, myspace, text, color, background, layout, generator, font, picture, images, photo, music, video, kodlar, kodlari, codici, kode, kodes"> <meta name="Description" content="Need some HTML code? Check out this list of free HTML Codes. Just copy/paste them into your website or blog!"> <link rel="canonical" href="https://www.quackit.com/html/codes/"> <title>HTML Codes</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 Codes</h1> <div class="ad ad-top">  <div data-fuse="23059883638"></div> </div> <div class="cards"> <article class="card card-unbordered"> <a href="/html/codes/html_background_codes.cfm"> <img src="/pix/html/codes/background_codes.png" alt="Background thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/html_background_codes.cfm">Background Codes</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/html_background_codes.cfm">HTML Background Codes</a></li> <li><a href="/html/codes/html_background_image_codes.cfm">Background Image Codes</a></li> <li><a href="/html/codes/html_stretch_background_image.cfm">Stretch Background Image</a></li> <li><a href="/html/codes/html_background_music_codes.cfm">Background Music Codes</a></li> <li><a href="/html/codes/html_fixed_background.cfm">Fixed Background Code</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/html_picture_codes.cfm"> <img src="/pix/html/codes/image_codes.png" alt="Image code thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/html_picture_codes.cfm">Image Codes</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/html_picture_codes.cfm">HTML Image Code</a></li> <li><a href="/html/codes/html_image_borders.cfm">HTML Image Borders</a></li> <li><a href="/html/codes/html_image_link_code.cfm">HTML Image Link Codes</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/color/"> <img src="/pix/stock/css_colors_2.png" alt="Color thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/color/">Color Codes</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/color/">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm">HTML Color Codes</a></li> <li><a href="/html/codes/color/color_names.cfm">HTML Color Names</a></li> <li><a href="/html/codes/html_text_color_code.cfm">Text Color</a></li> <li><a href="/html/codes/html_background_codes.cfm">Background Color Codes</a></li> <li><a href="/html/codes/comment_box_colors.cfm">Comment Box Colors</a></li> <li><a href="/html/codes/scroll_box_color.cfm">Scroll Box Color</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/text/"> <img src="/pix/html/codes/text_codes.png" alt="Text thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/text/">Text Codes</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/text/">HTML Text</a></li> <li><a href="/html/codes/bold/">HTML Bold</a></li> <li><a href="/html/html_font_code.cfm">HTML Font Codes</a></li> <li><a href="/html/codes/html_font_color_code.cfm">HTML Font Color Codes</a></li> <li><a href="/html/codes/html_font_size_code.cfm">HTML Font Size Codes</a></li> <li><a href="/html/codes/html_font_style_code.cfm">HTML Font Style Codes</a></li> <li><a href="/html/codes/html_text_box_code.cfm">HTML Text Box Codes</a></li> <li><a href="/html/codes/html_text_color_code.cfm">HTML Text Color Codes</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/tables/"> <img src="/pix/html/codes/table_codes.png" alt="Table thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/tables/">Table Codes</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/tables/">HTML Tables</a></li> <li><a href="/html/codes/html_table_code.cfm">HTML Table Codes</a></li> <li><a href="/html/codes/tables/html_table_background.cfm">HTML Table Background</a></li> <li><a href="/html/codes/tables/html_table_background_color.cfm">Table Background Color</a></li> <li><a href="/html/codes/tables/html_table_border.cfm">HTML Table Border</a></li> <li><a href="/html/codes/tables/html_table_color.cfm">HTML Table Color</a></li> <li><a href="/html/codes/tables/html_table_text.cfm">HTML Table Text</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/link/"> <img src="/pix/html/codes/link_codes.png" alt="Link thumbnail"> </a> <div class="card-body"> <h2>HTML Links</h2> <ul class="list-unstyled"> <li><a href="/html/codes/link/">Basic Link</a></li> <li><a href="/html/codes/html_link_code.cfm">HTML Link Codes</a></li> <li><a href="/html/codes/html_open_link_in_new_window.cfm">Open Link in New Window</a></li> <li><a href="/html/codes/html_popup_window_code.cfm">Pop up Windows</a></li> <li><a href="/html/codes/html_image_link_code.cfm">HTML Image Link</a></li> <li><a href="/html/codes/html_email_code.cfm">HTML Email Link</a></li> <li><a href="/html/tutorial/html_links.cfm">About HTML Links</a></li> <li><a href="/css/css_hyperlinks.cfm">CSS Hover Links</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/html_scroll_box.cfm"> <img src="/pix/html/codes/scrollbox_codes.png" alt="Scrollbox thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/html_scroll_box.cfm">Scroll Boxes</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/html_scroll_box.cfm">Scroll Box</a></li> <li><a href="/html/codes/scroll_box_color.cfm">Colored Scroll Box</a></li> <li><a href="/html/codes/scroll_box_border.cfm">Scroll Box with Borders</a></li> <li><a href="/html/codes/picture_scroll_box.cfm">Picture Scroll Boxes</a></li> <li><a href="/html/codes/horizontal_scroll.cfm">Horizontal Scroll</a></li> <li><a href="/html/codes/vertical_scroll.cfm">Vertical Scroll</a></li> <li><a href="/html/codes/hide_scrollbar.cfm">Hide Scrollbars</a></li> <li><a href="/html/codes/div_scroll_position.cfm">Div Scroll Position</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/comment_box_code.cfm"> <img src="/pix/html/codes/commentbox_codes.png" alt="Comment box thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/comment_box_code.cfm">Comment Boxes</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/comment_box_code.cfm">Comment Box Codes</a></li> <li><a href="/html/codes/comment_box_borders.cfm">Comment Box Borders</a></li> <li><a href="/html/codes/comment_box_colors.cfm">Comment Box Colors</a></li> <li><a href="/html/codes/comment_box_pictures.cfm">Comment Box Pictures</a></li> <li><a href="/html/codes/add_comments_to_website.cfm">Add Comments to Website</a></li> <li><a href="/html/codes/html_scrollbars.cfm">HTML Scrollbars</a></li> <li><a href="/html/codes/hide_scrollbar.cfm">Hide Scrollbars</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/css/codes/marquees/"> <img src="/pix/html/codes/marquee_codes.png" alt="Marquee thumbnail"> </a> <div class="card-body"> <h2><a href="/css/codes/marquees/">Marquees</a></h2> <ul class="list-unstyled"> <li><a href="/css/codes/marquees/">CSS Marquee Codes</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Codes</a></li> <li><a href="/html/codes/scrolling_text.cfm">Scrolling Text</a></li> <li><a href="/html/codes/scrolling_images.cfm">Scrolling Images</a></li> <li><a href="/html/codes/stop_marquee.cfm">HTML Stop Marquee</a></li> <li><a href="/html/codes/slow_down_marquee.cfm">Slow Down & Speed Up Marquee</a></li> <li><a href="/javascript/codes/javascript_scroll.cfm">Scrolling Marquee (JavaScript version)</a></li> </ul> </div> </article> <article class="card card-unbordered"> <img src="/pix/html/codes/window_codes.png" alt="Window thumbnail"> <div class="card-body"> <h2>Window Codes</h2> <ul class="list-unstyled"> <li><a href="/html/codes/html_close_window_code.cfm">Close Window Codes</a></li> <li><a href="/html/codes/html_open_link_in_new_window.cfm">Open Link in New Window</a></li> <li><a href="/html/codes/html_popup_window_code.cfm">Popup Window Codes</a></li> <li><a href="/html/codes/html_scrollbars.cfm">HTML Scrollbars</a></li> </ul> </div> </article> <article class="card card-unbordered"> <img src="/pix/html/codes/music_codes.png" alt="Music thumbnail"> <div class="card-body"> <h2>Music/Video Codes</h2> <ul class="list-unstyled"> <li><a href="/html/codes/create_music_playlist.cfm">Create a Music Playlist</a></li> <li><a href="/html/howto/how_to_create_a_music_playlist_in_wordpress.cfm">Create a Music Playlist in WordPress</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Codes</a></li> <li><a href="/html/codes/html_background_music_codes.cfm">Background Music Codes</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Codes</a></li> </ul> </div> </article> <article class="card card-unbordered"> <a href="/html/codes/html_form_code.cfm"> <img src="/pix/html/codes/form_codes.png" alt="Form thumbnail"> </a> <div class="card-body"> <h2><a href="/html/codes/html_form_code.cfm">Forms</a></h2> <ul class="list-unstyled"> <li><a href="/html/codes/html_form_code.cfm">HTML Form Codes</a></li> <li><a href="/html/codes/html_text_input.cfm">HTML Text Input</a></li> <li><a href="/html/codes/html_form_to_email.cfm">HTML Form To Email</a></li> <li><a href="/html/codes/mailto_form.cfm">Mailto Form</a></li> <li><a href="/html/codes/html_button.cfm">HTML Button</a></li> <li><a href="/html/codes/html_radio_button.cfm">HTML Radio Button</a></li> </ul> </div> </article> <article class="card card-unbordered"> <img src="/pix/html/codes/frames_codes.png" alt="Frames thumbnail"> <div class="card-body"> <h2>Frames</h2> <ul class="list-unstyled"> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Codes</a></li> <li><a href="/html/templates/frames/">HTML Frames Templates</a></li> <li><a href="/html/examples/frames/">HTML Frames Examples</a></li> </ul> </div> </article> <article class="card card-unbordered"> <img src="/pix/html/codes/more_codes.png" alt="Codes thumbnail"> <div class="card-body"> <h2>More HTML Codes</h2> <ul class="list-unstyled"> <li><a title="Create editable content" href="/html/codes/contenteditable.cfm">Contenteditable</a></li> <li><a href="/html/codes/html_borders.cfm">HTML Border Codes</a></li> <li><a href="/html/codes/html_code_for_colors.cfm">HTML Code for Colors</a></li> <li><a href="/html/codes/html_comments_code.cfm">HTML Comments Codes</a></li> <li><a href="/html/codes/html_cursor_code.cfm">HTML Cursor Codes</a></li> <li><a href="/html/codes/list/">HTML List Code</a></li> <li><a href="/html/codes/meta_refresh.cfm">HTML Meta Refresh Code</a></li> <li><a href="/html/html_redirect.cfm">HTML Redirect Codes</a></li> <li><a href="/javascript/codes/timed_javascript_redirect.cfm">Timed redirect</a></li> </ul> </div> </article> <article class="card card-unbordered"> <img src="/pix/html/codes/html_generators.png" alt="HTML generators thumbnail"> <div class="card-body"> <h2>HTML Generators</h2> <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/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> </div> <div class="ad">  <div data-fuse="23059883644"></div> </div> <h2>HTML Reference</h2> <ul class="steps"> <li> <figure> <a href="/html/tutorial/"><img class="steps" src="/pix/stock/html_tutorial_500x200_2.gif" alt="Screenshot of HTML code"></a> <figcaption> <h3><a href="/html/tutorial/">HTML Tutorial</a></h3> <p>Free HTML tutorial that explains how to code in HTML.</p> <p>This tutorial explains what HTML elements and attributes are, and how to use them.</p> <p>I explain the basics, such as what you need in order to write HTML and how to create your first web page.</p> <p>I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.</p> <p>I also explain the difference between HTML and CSS (and when to use each one).</p> <a class="btn btn-default" href="/html/tutorial/">Go to HTML Tutorial</a> </figcaption> </figure> </li> <li> <figure> <a href="/html/tags/"><img class="steps" src="/pix/html/tags/html_tags.gif" alt="Screenshot of HTML tags"></a> <figcaption> <h3><a href="/html/tags/">HTML Tags</a></h3> <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> <p>All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).</p> <a class="btn btn-default" href="/html/tags/">Go to HTML Tags</a> </figcaption> </figure> </li> <li> <figure> <a href="/css/properties/"><img class="steps" src="/pix/css/properties/css_properties.gif" alt="Screenshot of CSS Properties"></a> <figcaption> <h3><a href="/css/properties/">CSS Properties</a></h3> <p>Full list of CSS properties.</p> <p>Alphabetical list of CSS properties as per the W3C specifications. </p> <p>CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.</p> <p>You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.</p> <a class="btn btn-default" href="/css/properties/">Go to CSS Properties</a> </figcaption> </figure> </li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/html/codes/">HTML Codes</a></h3> <ul> <li><a href="/html/codes/html_background_codes.cfm" title="Set background properties on any HTML element.">HTML Background Code</a></li> <li><a href="/html/codes/bold/" title="Specify bold text in your HTML code.">HTML Bold</a></li> <li><a href="/html/codes/color/" title="Add color to your HTML code.">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm" title="Hexadecimal color codes">HTML Color Codes</a></li> <li><a href="/html/codes/comment_box_code.cfm" title="Create a comment box within your HTML codes.">HTML Comment Box Code</a></li> <li><a href="/html/codes/html_scroll_box.cfm" title="Create a scroll box within your HTML codes.">HTML Scrollbox Code</a></li> <li><a href="/html/codes/tables/" title="Add an HTML table to your web page or blog.">HTML Tables</a></li> <li><a href="/html/codes/text/" title="Specify font family, size, color and more within your HTML code.">HTML Text Code</a></li> <li><a href="/html/codes/html_picture_codes.cfm" title="Embed pictures within your HTML code.">HTML Image Code</a></li> <li><a href="/html/codes/link/" title="Create hyperlinks between web pages and other documents.">HTML Link Code</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Code</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Code</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Code</a></li> <li><a href="/html/codes/html_form_code.cfm">HTML Form Code</a></li> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Code</a></li> <li><a href="/html/html_special_characters.cfm" title="ISO-8859-1">HTML Entities</a></li> <li><a href="/html/examples/" title="Copy/paste examples">HTML Examples</a></li> <li><a href="/html/html_help.cfm" title="HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.">HTML Help/Cheat Sheet</a></li> <li><a href="/html/templates/" title="Thousands of pre-built websites">HTML Templates</a></li> <li><a style="padding-left:60px;font-style:italic;" href="/html/codes/">More Codes...</a></li> </ul> </li> <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> </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 Codes