{"id":1397,"date":"2020-12-18T15:21:04","date_gmt":"2020-12-18T13:21:04","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=1397"},"modified":"2026-04-01T15:48:04","modified_gmt":"2026-04-01T12:48:04","slug":"tricks-html-only","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/tricks-html-only\/","title":{"rendered":"Interesting Tricks You Can Do With Just HTML"},"content":{"rendered":"<p>Even if you haven\u2019t been trained as a <a href=\"\/articles\/how-to-be-both-web-designer-and-developer\/\">UX graphic designer<\/a>, you can still create websites that are not only informative but also good-looking and attractive to visitors.<a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/html-css-js.com\/\">HTML5, CSS3 and JavaScript<\/a> are simple tools that every frontend developer has at their disposal, and these tools enable you to make your blog or website look modern, beautiful, and user-friendly.<\/p>\n<p><!--more--><\/p>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg\" alt=\"html tricks\"><\/p>\n<p>If you want to create outstanding websites, improving your coding skills and taking <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/html-css-js.com\/html\/tutorial\/\">coding courses<\/a> can be a great solution. However, even basic tools like <a href=\"\/html-editor\/\">HTML editor<\/a> enable you to create good websites. In fact, there are <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/www.awwwards.com\/websites\/html5\/\">dozens of incredible websites<\/a>&nbsp;created with just HTML5, and you may not need any additional tools to make your own website that will attract visitors with its design and impress them with usability. Here are some great tips that might help you.<\/p>\n<h2>Add horizontal lines<\/h2>\n<p>Horizontal lines are a good solution if you want to break up long sections of your website that are difficult to read. Sometimes, you may underestimate the volume of textual content on a certain page when designing it, and you don\u2019t want to present your readers with non-digestible chunks of text because they will simply abandon the page. A simple horizontal line can make a big difference. To add it, you can use <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/html-css-js.com\/html\/tags\/#hr\">the &lt;hr&gt; tag<\/a>:<\/p>\n<div style=\"overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #000080; font-weight: bold;\">&lt;h1&gt;<\/span>Header<span style=\"color: #000080; font-weight: bold;\">&lt;\/h1&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;<\/span>Here\u2019s a lot of interesting content...<span style=\"color: #000080; font-weight: bold;\">&lt;\/p&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;hr&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;h1&gt;<\/span>Another header<span style=\"color: #000080; font-weight: bold;\">&lt;\/h1&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;<\/span>...and more great content here<span style=\"color: #000080; font-weight: bold;\">&lt;\/p&gt;<\/span>\n<\/pre>\n<\/div>\n<h2>2. Add metadata<\/h2>\n<p>To make sure that your content will be discovered by the target audience, you should optimize it for search engines. Many people think that SEO optimization is all about keywords, but modern search algorithms display search results based on numerous factors. You should help these algorithms understand what your site is about, and how it can benefit readers.<\/p>\n<p>A great solution is to include metadata. Including metadata is no longer an option but rather a necessity if you don\u2019t want to lag behind your competitors. Fortunately, you can add metadata easily by using just HTML:<\/p>\n<p><em>&lt;meta name=\u201ddescription\u201d content=\u201dSEO tips for beginners\u201d&gt;<\/em><\/p>\n<p><em>&lt;meta name=\u201dkeywords\u201d content=\u201dSEO, optimization, website rankings\u201d \/&gt;<\/em><\/p>\n<h2>3. Enable visitors to change the color of text or background<\/h2>\n<p>You can also offer your website visitors some customization opportunities so that they\u2019ll be more engaged. No matter what colors you choose for the design of your website, the chances are that only a part of your audience will appreciate it. Customization boosts user experience and makes your website more memorable. In this case, you will need a little more code:<\/p>\n<div style=\"overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #000080; font-weight: bold;\">&lt;select<\/span> <span style=\"color: #ff0000;\">name=<\/span><span style=\"color: #0000ff;\">\"clr\"<\/span> <span style=\"color: #ff0000;\">onchange=<\/span><span style=\"color: #0000ff;\">\"document.bgColor=this.options[this.selectedIndex].value\"<\/span> <span style=\"color: #ff0000;\">size=<\/span><span style=\"color: #0000ff;\">\"1&amp;Prime;\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"black\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>black<span style=\"color: #000080; font-weight: bold;\">&lt;\/option&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"orange\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>orange<span style=\"color: #000080; font-weight: bold;\">&lt;\/option&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"white\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>white<span style=\"color: #000080; font-weight: bold;\">&lt;\/option&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;\/select&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;<\/span>&amp;nbsp;&amp;nbsp;Background Color<span style=\"color: #000080; font-weight: bold;\">&lt;br<\/span> <span style=\"color: #000080; font-weight: bold;\">\/&gt;&lt;br<\/span> <span style=\"color: #000080; font-weight: bold;\">\/&gt;&lt;\/p&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;select<\/span> <span style=\"color: #ff0000;\">name=<\/span><span style=\"color: #0000ff;\">\"clr\"<\/span> <span style=\"color: #ff0000;\">onchange=<\/span><span style=\"color: #0000ff;\">\"document.fgColor=this.options[this.selectedIndex].value\"<\/span> <span style=\"color: #ff0000;\">size=<\/span><span style=\"color: #0000ff;\">\"1&amp;Prime;\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"black\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>black<span style=\"color: #000080; font-weight: bold;\">&lt;\/option&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"orange\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>orange<span style=\"color: #000080; font-weight: bold;\">&lt;\/option&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"white\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>white<span style=\"color: #000080; font-weight: bold;\">&lt;\/option&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;\/select&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;<\/span>&amp;nbsp;&amp;nbsp;Text Color<span style=\"color: #000080; font-weight: bold;\">&lt;\/p&gt;<\/span>\n<\/pre>\n<\/div>\n<p class=\"aligncenter\"><a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/html-css-js.com\/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Ctitle%3EHTML%20CSS%20JS%3C\/title%3E%0A%20%20%3C\/head%3E%0A%20%20%3Cbody%3E%0A%0A%20%20%20%3Cselect%20name=%22clr%22%20onchange=%22document.bgColor=this.options%5Bthis.selectedIndex%5D.value%22%20size=%221$**$Prime;%22%3E%0A%3Coption%20value=%22black%22%3Eblack%3C\/option%3E%0A%3Coption%20value=%22orange%22%3Eorange%3C\/option%3E%0A%3Coption%20value=%22white%22%3Ewhite%3C\/option%3E%0A%3C\/select%3E%0A%3Cp%3E$**$nbsp;$**$nbsp;Background%20Color%3Cbr%20\/%3E%3Cbr%20\/%3E%3C\/p%3E%0A%3Cselect%20name=%22clr%22%20onchange=%22document.fgColor=this.options%5Bthis.selectedIndex%5D.value%22%20size=%221$**$Prime;%22%3E%0A%3Coption%20value=%22black%22%3Eblack%3C\/option%3E%0A%3Coption%20value=%22orange%22%3Eorange%3C\/option%3E%0A%3Coption%20value=%22white%22%3Ewhite%3C\/option%3E%0A%3C\/select%3E%0A%3Cp%3E$**$nbsp;$**$nbsp;Text%20Color%3C\/p%3E%0A%20%20%20%20%0A%20%20%20%20%0A%20%20%3C\/body%3E%0A%3C\/html%3E&amp;css=\/*%20CSS%20styles%20*\/%0Ah1%20%7B%0A%20%20font-family:%20Impact,%20sans-serif;%0A%20%20color:%20#CE5937;%0A%7D%0A%20%20%20%20%20%20%20%20%20%20&amp;js=%0A\">Live Demo<\/a><\/p>\n<h2>4. Hide fields<\/h2>\n<p>Sometimes, your forms may contain fields that you only need for internal use. Obviously, you don\u2019t want them to be visible to website visitors. <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/i.redd.it\/0pa8flqct1cz.png\">Here\u2019s an example <\/a>of such a field that sparked a discussion on Reddit. Such things make your website look amateurish, but HTML enables you to hide these fields from visitors. They won\u2019t be able to type anything in these fields but forms will carry them after the forms are submitted. In the example below, the hidden field will tell you that your users prefer English. Here\u2019s the code that you need:<\/p>\n<div style=\"overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #000080; font-weight: bold;\">&lt;form<\/span> <span style=\"color: #ff0000;\">name=<\/span><span style=\"color: #0000ff;\">\"contact\"<\/span> <span style=\"color: #ff0000;\">action=<\/span><span style=\"color: #0000ff;\">\"https:\/\/prettycoolsite.com\"<\/span> <span style=\"color: #ff0000;\">method=<\/span><span style=\"color: #0000ff;\">\"POST\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>\n   <span style=\"color: #000080; font-weight: bold;\">&lt;input<\/span> <span style=\"color: #ff0000;\">type=<\/span><span style=\"color: #0000ff;\">\"text\"<\/span> <span style=\"color: #ff0000;\">size=<\/span><span style=\"color: #0000ff;\">\"25\"<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"Your name\"<\/span> <span style=\"color: #000080; font-weight: bold;\">\/&gt;<\/span> <span style=\"color: #000080; font-weight: bold;\">&lt;br&gt;<\/span>\n   <span style=\"color: #000080; font-weight: bold;\">&lt;input<\/span> <span style=\"color: #ff0000;\">type=<\/span><span style=\"color: #0000ff;\">\"hidden\"<\/span> <span style=\"color: #ff0000;\">name=<\/span><span style=\"color: #0000ff;\">\"Language\"<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"English\"<\/span> <span style=\"color: #000080; font-weight: bold;\">\/&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;\/form&gt;<\/span>\n<\/pre>\n<\/div>\n<p class=\"aligncenter\"><a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/html-css-js.com\/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Ctitle%3EHTML%20CSS%20JS%3C\/title%3E%0A%20%20%3C\/head%3E%0A%20%20%3Cbody%3E%0A%0A%3Cform%20name=%22contact%22%20action=%22https:\/\/prettycoolsite.com%22%20method=%22POST%22%3E%0A%09%3Cinput%20type=%22text%22%20size=%2225%22%20value=%22Your%20name%22%20\/%3E%20%3Cbr%3E%0A%20%20%20%20%3Cinput%20type=%22hi$*$dden%22%20name=%22Language%22%20value=%22English%22%20\/%3E%0A%3C\/form%3E%0A%20%20%20%20%0A%20%20%3C\/body%3E%0A%3C\/html%3E&amp;css=\/*%20CSS%20styles%20*\/%0Ah1%20%7B%0A%20%20font-family:%20Impact,%20sans-serif;%0A%20%20color:%20#CE5937;%0A%7D%0A%20%20%20%20%20%20%20%20%20%20&amp;js=%0A\">Live Demo<\/a><\/p>\n<h2>5. Add voice recognition<\/h2>\n<p>Given that voice input becomes more and more popular, adding such a feature to your website is a great choice. The code is simple:<\/p>\n<p><em>&lt;input type=&#8221;text&#8221; x-webkit-speech \/&gt;<\/em><\/p>\n<h2>6. Add input suggestions<\/h2>\n<p>You can help your visitors quickly input the necessary information by offering suggestions while they\u2019re typing. For example, here\u2019s a piece of code that will offer suggestions on the preferred web browser:<\/p>\n<div style=\"overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;&lt;input<\/span> <span style=\"color: #ff0000;\">type=<\/span><span style=\"color: #0000ff;\">\"text\"<\/span> <span style=\"color: #ff0000;\">list=<\/span><span style=\"color: #0000ff;\">\"web_browsers\"<\/span> <span style=\"color: #000080; font-weight: bold;\">\/&gt;&lt;\/p&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;datalist<\/span> <span style=\"color: #ff0000;\">id=<\/span><span style=\"color: #0000ff;\">\"web_browsers\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"Chrome\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;&lt;\/option&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"Safari\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;&lt;\/option&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"Opera\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;&lt;\/option&gt;<\/span>\n\t<span style=\"color: #000080; font-weight: bold;\">&lt;option<\/span> <span style=\"color: #ff0000;\">value=<\/span><span style=\"color: #0000ff;\">\"Firefox\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;&lt;\/option&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;\/datalist&gt;<\/span>\n<span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;&lt;em&gt;<\/span>For example; <span style=\"color: #000080; font-weight: bold;\">&lt;\/em&gt;<\/span> Chrome<span style=\"color: #000080; font-weight: bold;\">&lt;\/p&gt;<\/span>\n<\/pre>\n<\/div>\n<h2>7. Add fine print<\/h2>\n<p>Quite often, you may need to add terms of service, citations, disclaimers, or various legal information at the bottom of your page. In this case, you can simply add the &lt;small&gt; tag. Here\u2019s an example:<\/p>\n<div style=\"overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #000080; font-weight: bold;\">&lt;h1&gt;<\/span>Ultimate Sale!!! 80% off on all products from the last collection<span style=\"color: #000080; font-weight: bold;\">&lt;sup&gt;<\/span>*<span style=\"color: #000080; font-weight: bold;\">&lt;\/sup&gt;&lt;\/h1&gt;<\/span>\n\n<span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;&lt;small&gt;<\/span>* Terms and Conditions apply<span style=\"color: #000080; font-weight: bold;\">&lt;\/small&gt;&lt;\/p&gt;<\/span>\n<\/pre>\n<\/div>\n<h2>8. Highlight text<\/h2>\n<p>You can use the &lt;span&gt; tag to highlight text on IE and Firefox. You can also choose any color that you like. Here\u2019s the code for orange highlighting:<\/p>\n<p><code>&lt;span style=\u201cbackground-color: #FF5733\u201d&gt;Your text&lt;\/span&gt;<\/code><\/p>\n<h2>9. Add a background image to your text<\/h2>\n<p>You can also add a background image instead of highlighting your text. However, you will only be able to do it if your font is large enough. We suggest that you don\u2019t use this approach with fonts that are smaller than 20 pts because otherwise, the difference between background color and image will be difficult to notice.<\/p>\n<div style=\"overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #000080; font-weight: bold;\">&lt;p&gt;&lt;span<\/span> <span style=\"color: #ff0000;\">style=<\/span><span style=\"color: #0000ff;\">\"background-image: url('\/imgaddress.png'); font-size: 20pt;\"<\/span><span style=\"color: #000080; font-weight: bold;\">&gt;<\/span>Better Than Highlight<span style=\"color: #000080; font-weight: bold;\">&lt;\/span&gt;&lt;\/p&gt;<\/span>\n<\/pre>\n<\/div>\n<h2>Wrapping Up<\/h2>\n<p>As you can see, HTML5 offers you many opportunities to make your website more beautiful and to improve its usability. No matter whether you\u2019re using various <a href=\"\/articles\/category\/tools\/\">website development tools<\/a>&nbsp;or not, you can always improve the design of your web pages, and it\u2019s not a difficult thing to do. Our tips will help you do some interesting tricks with HTML only so you won\u2019t need to look for more complex solutions.<\/p>\n<h2>Author Tiffany Porter<img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/tiffany-porter.jpg\" alt=\"tiffany porter author\" class=\"alignright\"><\/h2>\n<p>Tiffany Porter is a professional writer. She writes for different news portals and thematic blogs that help her stay at the heart of the programming and technology news. She also provides consultations and creates expert writing materials for the <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/alltopreviews.com\/services\">essay writer reviews<\/a>&nbsp;websites. Such work gives her the opportunity to write articles for <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https:\/\/www.topwritersreview.com\/top-10-essay-writing-services\">Top writers review<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Even if you haven\u2019t been trained as a UX graphic designer, you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript are simple tools that every frontend developer has at their disposal, and these tools enable you to make your blog or website look modern, &hellip; <a href=\"https:\/\/html-online.com\/articles\/tricks-html-only\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Interesting Tricks You Can Do With Just HTML&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1397","post","type-post","status-publish","format-standard","hentry","category-articles"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Interesting Tricks You Can Do With Just HTML<\/title>\n<meta name=\"description\" content=\"you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/tricks-html-only\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interesting Tricks You Can Do With Just HTML\" \/>\n<meta property=\"og:description\" content=\"you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/tricks-html-only\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-18T13:21:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-01T12:48:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Interesting Tricks You Can Do With Just HTML\",\"datePublished\":\"2020-12-18T13:21:04+00:00\",\"dateModified\":\"2026-04-01T12:48:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/\"},\"wordCount\":870,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg\",\"articleSection\":[\"Articles\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/\",\"url\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/\",\"name\":\"Interesting Tricks You Can Do With Just HTML\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg\",\"datePublished\":\"2020-12-18T13:21:04+00:00\",\"dateModified\":\"2026-04-01T12:48:04+00:00\",\"description\":\"you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/tricks-html-only\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/tricks-html-only\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interesting Tricks You Can Do With Just HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interesting Tricks You Can Do With Just HTML","description":"you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/tricks-html-only\/","og_locale":"en_GB","og_type":"article","og_title":"Interesting Tricks You Can Do With Just HTML","og_description":"you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript","og_url":"https:\/\/html-online.com\/articles\/tricks-html-only\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2020-12-18T13:21:04+00:00","article_modified_time":"2026-04-01T12:48:04+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Interesting Tricks You Can Do With Just HTML","datePublished":"2020-12-18T13:21:04+00:00","dateModified":"2026-04-01T12:48:04+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/"},"wordCount":870,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg","articleSection":["Articles"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/","url":"https:\/\/html-online.com\/articles\/tricks-html-only\/","name":"Interesting Tricks You Can Do With Just HTML","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg","datePublished":"2020-12-18T13:21:04+00:00","dateModified":"2026-04-01T12:48:04+00:00","description":"you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/tricks-html-only\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/12\/html-tricks.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/tricks-html-only\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Interesting Tricks You Can Do With Just HTML"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=1397"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1397\/revisions"}],"predecessor-version":[{"id":2597,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1397\/revisions\/2597"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=1397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=1397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=1397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}