{"id":2154,"date":"2024-01-15T11:25:15","date_gmt":"2024-01-15T09:25:15","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=2154"},"modified":"2025-01-30T08:55:56","modified_gmt":"2025-01-30T06:55:56","slug":"html-tricks-no-one-is-talking-about","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/","title":{"rendered":"5 HTML Tricks No One Is Talking About"},"content":{"rendered":"<p><strong>Regardless of what <a href=\"\/articles\/javascript-frameworks-for-front-end-development\/\">framework<\/a> or server-side language one uses, all web developers rely on HTML after some use, regardless of their knowledge of how the technologies stack and interact. HTML won&rsquo;t go away. Yet though widely used, there are still tags and properties that most developers would not know about.<\/strong><\/p>\n<p><!--more--><\/p>\n<p class=\"aligncenter\"><img decoding=\"async\" alt=\"cool unknown html tricks\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg\" \/><\/p>\n<p>Of course, there are many ways to create templates (Pug for one), but you have to understand HTML to do so. However, we think it&rsquo;s better to use existing HTML features whenever possible, rather than creating something similar with JavaScript, though <a href=\"\/\">writing HTML<\/a> can be boring.<\/p>\n<p>Developers use HTML every day but don&rsquo;t strive to be really good at using it and don&rsquo;t use all of the less talked about HTML features. This is exactly why we&rsquo;re sharing material that summarizes 5 HTML tags and attributes you should know.<\/p>\n<h2>#1. Lazy Image Loading<\/h2>\n<p>Lazy-loading images can improve the performance and responsiveness of your website. Lazy loading prevents you from immediately loading images that you don&#8217;t really need. Typically, an image starts loading when you scroll down the page and approach the image. In other words, the image loads when the user scrolls the page and the image becomes visible, otherwise, it doesn&#8217;t load.<\/p>\n<p>This is easy to achieve with plain HTML. All you need to do is add the loading=&#8221;lazy&#8221; property to the img tag. After adding the property, your element should look something like this:<\/p>\n<div>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;img<\/span> <span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"image.png\"<\/span> <span style=\"color: #0000cc;\">loading=<\/span><span style=\"background-color: #fff0f0;\">\"lazy\"<\/span> <span style=\"color: #0000cc;\">alt=<\/span><span style=\"background-color: #fff0f0;\">\"description\"<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"250\"<\/span> <span style=\"color: #0000cc;\">height=<\/span><span style=\"background-color: #fff0f0;\">\"250\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<\/pre>\n<\/div>\n<p>You can get some idea of the bytes you&#8217;ll save with this trick by using the Google Lighthouse tool.<\/p>\n<h2>#2. Autocomplete<\/h2>\n<p>Getting hints right on the line when you try to search for example <a target=\"_blank\" href=\"https:\/\/www.objectstyle.com\/services\/it-staff-augmentation\">Software Staff Augmentation<\/a> companies is a really cool trick. Autocomplete is pretty common these days, and you must have noticed it on sites like Google and Facebook.<\/p>\n<p>You can <a href=\"\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\">use JavaScript to implement autocomplete<\/a> by setting an input field event listener and then mapping the searched words to predefined choices. However, HTML also allows you to display a set of predefined variants using the<a target=\"_blank\" href=\"https:\/\/html-css-js.com\/html\/tags\/#datalist\"><strong> &lt;datalist&gt; tag<\/strong><\/a>. Remember that the ID attribute of this tag must match the list attribute of the input tag.<\/p>\n<div>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;label&gt;<\/span>Pick a car: \n<span style=\"color: #007700;\">&lt;input<\/span> <span style=\"color: #0000cc;\">list=<\/span><span style=\"background-color: #fff0f0;\">\"cars\"<\/span> <span style=\"color: #0000cc;\">name=<\/span><span style=\"background-color: #fff0f0;\">\"carList\"<\/span> <span style=\"color: #007700;\">\/&gt;&lt;\/label&gt;<\/span>\n<span style=\"color: #007700;\">&lt;datalist<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"carList\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;option<\/span> <span style=\"color: #0000cc;\">value=<\/span><span style=\"background-color: #fff0f0;\">\"Volvo\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;option<\/span> <span style=\"color: #0000cc;\">value=<\/span><span style=\"background-color: #fff0f0;\">\"Tesla\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;option<\/span> <span style=\"color: #0000cc;\">value=<\/span><span style=\"background-color: #fff0f0;\">\"Toyota\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;option<\/span> <span style=\"color: #0000cc;\">value=<\/span><span style=\"background-color: #fff0f0;\">\"Ferrari\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/datalist&gt;<\/span>\n<\/pre>\n<\/div>\n<h2>#3. Picture<\/h2>\n<p>Have you ever had a problem with images not enlarging as you expected? We have &#8211; many times.<\/p>\n<p>This usually happens when you are trying to create a gallery site or using a large image and displaying it as a thumbnail. When you change the width of the viewport, you may notice that some images don&#8217;t scale up and down as expected. Fortunately, HTML gives developers the ability to fix this fairly easily by using the <a target=\"_blank\" href=\"https:\/\/html-css-js.com\/html\/tags\/#picture\">&lt;picture&gt; tag<\/a>, which allows you to add multiple images to match different widths.<\/p>\n<p>Your code will look something like this:<\/p>\n<div>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;picture&gt;<\/span>\n  <span style=\"color: #007700;\">&lt;source<\/span> <span style=\"color: #0000cc;\">media=<\/span><span style=\"background-color: #fff0f0;\">\"(min-width: 480px)\"<\/span> <span style=\"color: #0000cc;\">srcset=<\/span><span style=\"background-color: #fff0f0;\">\"car.jpg\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n  <span style=\"color: #007700;\">&lt;source<\/span> <span style=\"color: #0000cc;\">media=<\/span><span style=\"background-color: #fff0f0;\">\"(min-width: 320px)\"<\/span> <span style=\"color: #0000cc;\">srcset=<\/span><span style=\"background-color: #fff0f0;\">\"town.jpg\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n  <span style=\"color: #007700;\">&lt;img<\/span> <span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"tree.jpg\"<\/span> <span style=\"color: #0000cc;\">alt=<\/span><span style=\"background-color: #fff0f0;\">\"Flags\"<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"width: auto;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/picture&gt;<\/span>\n<\/pre>\n<\/div>\n<p>As you can see, we have specified the minimum width at which a particular image should be displayed. This tag is very similar to the <strong>&lt;audio&gt;<\/strong> and <strong>&lt;video&gt;<\/strong> tags.<\/p>\n<h2>#4. Base URL<\/h2>\n<p>This tag comes in handy when you have many link tags redirecting to a specific URL, and all URLs start with the same base URL.<\/p>\n<p>For example, if we want to point a URL to Twitter <span><a target=\"_blank\" href=\"https:\/\/www.bbc.com\/news\/live\/cn54dky671zt\">Jeff Bezos<\/a><\/span>&nbsp;and <span><a target=\"_blank\" href=\"https:\/\/www.apple.com\/leadership\/tim-cook\/\">Tim Cook<\/a><\/span>, the beginning of the URL (domain) will be the same, and what follows will be their respective identifiers. Normally you would have to insert a link with the same domain name twice. However, HTML has a &lt;base&gt; tag that allows you to set the base URL as shown below:<\/p>\n<div>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;head&gt;<\/span>\n  <span style=\"color: #007700;\">&lt;base<\/span> <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"https:\/\/www.twitter.com\/\"<\/span> <span style=\"color: #0000cc;\">target=<\/span><span style=\"background-color: #fff0f0;\">\"_blank\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/head&gt;<\/span>\n<span style=\"color: #007700;\">&lt;body&gt;<\/span>\n  <span style=\"color: #007700;\">&lt;img<\/span> <span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"jeffbezos\"<\/span> <span style=\"color: #0000cc;\">alt=<\/span><span style=\"background-color: #fff0f0;\">\"Jeff Bezos\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n  <span style=\"color: #007700;\">&lt;a<\/span> <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"timcook\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Tim Cook<span style=\"color: #007700;\">&lt;\/a&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/body&gt;<\/span>\n<\/pre>\n<\/div>\n<p>The above code will generate an image linking to &#8220;<em>https:\/\/www.twitter.com\/jeffbezos<\/em>&#8221; and a link tag redirecting to &#8220;<em>https:\/\/www.twitter.com\/timcook<\/em>&#8220;. The &lt;base&gt; tag must have either &#8220;href&#8221; or &#8220;target&#8221; attributes.<\/p>\n<h2>#5. Refreshing a Document<\/h2>\n<p>If you want to redirect a user to another page after a period of inactivity or even immediately, you can easily do so using simple HTML. You may have noticed this feature when you open certain websites and see something like &#8220;<strong>You will be redirected in 5 seconds<\/strong>&#8220;.<\/p>\n<p>This behavior is built into the HTML, and you can use it by using the &lt;meta&gt; tag and setting <strong>http-equiv=&#8221;refresh&#8221;<\/strong> in it:<\/p>\n<div>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;head&gt;<\/span>\n  <span style=\"color: #007700;\">&lt;meta<\/span> <span style=\"color: #0000cc;\">http-equiv=<\/span><span style=\"background-color: #fff0f0;\">\"refresh\"<\/span> <span style=\"color: #0000cc;\">content=<\/span><span style=\"background-color: #fff0f0;\">\"4; URL='https:\/\/google.com'\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/head&gt;<\/span>\n<\/pre>\n<\/div>\n<p>Here the content property specifies the time in seconds after which the redirection should take place.<\/p>\n<h2>Conclusion<\/h2>\n<p>HTML and CSS are pretty powerful tools, and you can create fantastic websites using them. There are many such tips and tricks beyond the ones I&#8217;ve shared with you, and they are definitely worth trying in your project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Regardless of what framework or server-side language one uses, all web developers rely on HTML after some use, regardless of their knowledge of how the technologies stack and interact. HTML won&rsquo;t go away. Yet though widely used, there are still tags and properties that most developers would not know about.<\/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-2154","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>5 HTML Tricks No One Is Talking About<\/title>\n<meta name=\"description\" content=\"Explore 5 lesser-known HTML tricks to enhance your web development skills, including lazy image loading and responsive image handling.\" \/>\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\/html-tricks-no-one-is-talking-about\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 HTML Tricks No One Is Talking About\" \/>\n<meta property=\"og:description\" content=\"Explore 5 lesser-known HTML tricks to enhance your web development skills, including lazy image loading and responsive image handling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/\" \/>\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=\"2024-01-15T09:25:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-30T06:55:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-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\/html-tricks-no-one-is-talking-about\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"5 HTML Tricks No One Is Talking About\",\"datePublished\":\"2024-01-15T09:25:15+00:00\",\"dateModified\":\"2025-01-30T06:55:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/\"},\"wordCount\":769,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg\",\"articleSection\":[\"Articles\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/\",\"url\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/\",\"name\":\"5 HTML Tricks No One Is Talking About\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg\",\"datePublished\":\"2024-01-15T09:25:15+00:00\",\"dateModified\":\"2025-01-30T06:55:56+00:00\",\"description\":\"Explore 5 lesser-known HTML tricks to enhance your web development skills, including lazy image loading and responsive image handling.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 HTML Tricks No One Is Talking About\"}]},{\"@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":"5 HTML Tricks No One Is Talking About","description":"Explore 5 lesser-known HTML tricks to enhance your web development skills, including lazy image loading and responsive image handling.","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\/html-tricks-no-one-is-talking-about\/","og_locale":"en_GB","og_type":"article","og_title":"5 HTML Tricks No One Is Talking About","og_description":"Explore 5 lesser-known HTML tricks to enhance your web development skills, including lazy image loading and responsive image handling.","og_url":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2024-01-15T09:25:15+00:00","article_modified_time":"2025-01-30T06:55:56+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-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\/html-tricks-no-one-is-talking-about\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"5 HTML Tricks No One Is Talking About","datePublished":"2024-01-15T09:25:15+00:00","dateModified":"2025-01-30T06:55:56+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/"},"wordCount":769,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg","articleSection":["Articles"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/","url":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/","name":"5 HTML Tricks No One Is Talking About","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg","datePublished":"2024-01-15T09:25:15+00:00","dateModified":"2025-01-30T06:55:56+00:00","description":"Explore 5 lesser-known HTML tricks to enhance your web development skills, including lazy image loading and responsive image handling.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2025\/01\/cool-html-tricks.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/html-tricks-no-one-is-talking-about\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"5 HTML Tricks No One Is Talking About"}]},{"@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\/2154","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=2154"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2154\/revisions"}],"predecessor-version":[{"id":2158,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2154\/revisions\/2158"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=2154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=2154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=2154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}