1<!doctype html> 2<html lang="en-US"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="profile" href="https://gmpg.org/xfn/11"> 7 <title>Tag: html - w3collective</title> 8<!-- This site is running CAOS for WordPress --> 9 10<!-- The SEO Framework by Sybre Waaijer --> 11<meta name="robots" content="max-snippet:-1,max-image-preview:standard,max-video-preview:-1" /> 12<link rel="canonical" href="https://w3collective.com/tag/html/" /> 13<link rel="next" href="https://w3collective.com/tag/html/page/2/" />
14<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://w3collective.com/#/schema/WebSite","url":"https://w3collective.com/","name":"w3collective","description":"Practical HTML, CSS, & JavaScript tutorials!","inLanguage":"en-US","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://w3collective.com/search/{search_term_string}/"},"query-input":"required name=search_term_string"},"publisher":{"@type":"Organization","@id":"https://w3collective.com/#/schema/Organization","name":"w3collective","url":"https://w3collective.com/","logo":{"@type":"ImageObject","url":"https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png","contentUrl":"https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png","width":300,"height":300,"contentSize":"4655"}}},{"@type":"CollectionPage","@id":"https://w3collective.com/tag/html/","url":"https://w3collective.com/tag/html/","name":"Tag: html - w3collective","inLanguage":"en-US","isPartOf":{"@id":"https://w3collective.com/#/schema/WebSite"},"breadcrumb":{"@type":"BreadcrumbList","@id":"https://w3collective.com/#/schema/BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":"https://w3collective.com/","name":"w3collective"},{"@type":"ListItem","position":2,"name":"Tag: html"}]}}]}</script>
14 15<!-- / The SEO Framework by Sybre Waaijer | 2.10ms meta | 0.59ms boot --> 16 17<link rel='preconnect' href='//www.google-analytics.com' /> 18<link rel="alternate" type="application/rss+xml" title="w3collective » Feed" href="https://w3collective.com/feed/" /> 19<link rel="alternate" type="application/rss+xml" title="w3collective » Comments Feed" href="https://w3collective.com/comments/feed/" /> 20<link rel="alternate" type="application/rss+xml" title="w3collective » html Tag Feed" href="https://w3collective.com/tag/html/feed/" />
21<script> 22window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/w3collective.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=30f576594eb8592d17f2554cdcaae6b6"}}; 23/*! This file is auto-generated */ 24!function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); 25</script>
25 26<style id='wp-emoji-styles-inline-css'> 27 28 img.wp-smiley, img.emoji { 29 display: inline !important; 30 border: none !important; 31 box-shadow: none !important; 32 height: 1em !important; 33 width: 1em !important; 34 margin: 0 0.07em !important; 35 vertical-align: -0.1em !important; 36 background: none !important; 37 padding: 0 !important; 38 } 39</style> 40<link rel='stylesheet' id='wp-block-library-css' href='https://w3collective.com/wp-includes/css/dist/block-library/style.min.css?ver=30f576594eb8592d17f2554cdcaae6b6' media='all' /> 41<link rel='stylesheet' id='syntax-highlighting-code-block-theme-css' href='https://w3collective.com/wp-content/plugins/syntax-highlighting-code-block/vendor/scrivo/highlight-php/styles/nord.css?ver=1.5.0' media='all' /> 42<style id='syntax-highlighting-code-block-inline-css'> 43.wp-block-code { 44 border: 0; 45 padding: 0; 46 -webkit-text-size-adjust: 100%; 47 text-size-adjust: 100%; 48} 49 50.wp-block-code > span { 51 display: block; 52 overflow: auto; 53} 54 55.shcb-language { 56 border: 0; 57 clip: rect(1px, 1px, 1px, 1px); 58 -webkit-clip-path: inset(50%); 59 clip-path: inset(50%); 60 height: 1px; 61 margin: -1px; 62 overflow: hidden; 63 padding: 0; 64 position: absolute; 65 width: 1px; 66 word-wrap: normal; 67 word-break: normal; 68} 69 70.hljs { 71 box-sizing: border-box; 72} 73 74.hljs.shcb-code-table { 75 display: table; 76 width: 100%; 77} 78 79.hljs.shcb-code-table > .shcb-loc { 80 color: inherit; 81 display: table-row; 82 width: 100%; 83} 84 85.hljs.shcb-code-table .shcb-loc > span { 86 display: table-cell; 87} 88 89.wp-block-code code.hljs:not(.shcb-wrap-lines) { 90 white-space: pre; 91} 92 93.wp-block-code code.hljs.shcb-wrap-lines { 94 white-space: pre-wrap; 95} 96 97.hljs.shcb-line-numbers { 98 border-spacing: 0; 99 counter-reset: line; 100} 101 102.hljs.shcb-line-numbers > .shcb-loc { 103 counter-increment: line; 104} 105 106.hljs.shcb-line-numbers .shcb-loc > span { 107 padding-left: 0.75em; 108} 109 110.hljs.shcb-line-numbers .shcb-loc::before { 111 border-right: 1px solid #ddd; 112 content: counter(line); 113 display: table-cell; 114 padding: 0 0.75em; 115 text-align: right; 116 -webkit-user-select: none; 117 -moz-user-select: none; 118 -ms-user-select: none; 119 user-select: none; 120 white-space: nowrap; 121 width: 1%; 122} 123 124.hljs > mark.shcb-loc { background-color: #4D525C; } 125</style> 126<style id='classic-theme-styles-inline-css'> 127/*! This file is auto-generated */ 128.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} 129</style> 130<style id='global-styles-inline-css'> 131body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
131--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
131.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} 132.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} 133:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} 134:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} 135.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} 136</style> 137<link rel='stylesheet' id='bodiggity-style-css' href='https://w3collective.com/wp-content/themes/w3c/style.css?ver=1.08' media='all' />
138<script data-cfasync="false" async src="https://w3collective.com/wp-content/uploads/caos/f736314d.js?id=G-EETERXBF9E" id="caos-gtag-js"></script>
vendor: 1 bytes, line 138
138
139<script data-cfasync="false" id="caos-gtag-js-after">
vendor: 156 bytes, lines 140-147
140window.dataLayer = window.dataLayer || []; 141 142 function gtag() { 143 dataLayer.push(arguments); 144 } 145 146 gtag('js', new Date()); 147 gtag('config', '
147G-EETERXBF9E
vendor: 110 bytes, lines 147-148
147', {"cookie_domain":"w3collective.com","cookie_flags":"samesite=none;secure","allow_google_signals":true}); 148
149</script>
149 150<link rel="https://api.w.org/" href="https://w3collective.com/wp-json/" /><link rel="alternate" type="application/json" href="https://w3collective.com/wp-json/wp/v2/tags/6" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://w3collective.com/xmlrpc.php?rsd" /> 151<link rel="icon" href="https://w3collective.com/wp-content/uploads/2023/04/w3-profile-150x150.png" sizes="32x32" /> 152<link rel="icon" href="https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png" sizes="192x192" /> 153<link rel="apple-touch-icon" href="https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png" /> 154<meta name="msapplication-TileImage" content="https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png" /> 155 <link rel="preconnect" href="https://fonts.gstatic.com"> 156 <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet"> 157</head> 158<body class="archive tag tag-html tag-6"> 159<div id="top-banner"> 160 <a target="_blank" rel="nofollow noopener" href="https://click.linksynergy.com/fs-bin/click?id=vSh04XehcDw&offerid=507388.1541&subid=0&type=4"> 161 <span>#AD</span> Top Online Web Development & Programming Courses | Udemy 162 </a> 163</div> 164<div id="header-wrapper"> 165 <header id="header" class="container"> 166 <a id="header-site" href="https://w3collective.com/" rel="home">w3collective</a> 167 <nav> 168 <div class="menu-header-container"><ul id="menu-header" class="menu"><li id="menu-item-1813" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-1813"><a href="https://w3collective.com/tag/html/" aria-current="page">HTML</a></li> 169<li id="menu-item-1814" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1814"><a href="https://w3collective.com/tag/css/">CSS</a></li> 170<li id="menu-item-1815" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1815"><a href="https://w3collective.com/tag/js/">JavaScript</a></li> 171<li id="menu-item-1816" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1816"><a href="https://w3collective.com/tag/react/">React</a></li> 172<li id="menu-item-1817" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1817"><a href="https://w3collective.com/tag/node/">Node.js</a></li> 173</ul></div> </nav> 174 <form role="search" method="get" id="searchform" class="searchform" action="https://w3collective.com/" > 175 <div><label class="screen-reader-text" for="s">Search for:</label> 176 <input type="text" value="" name="s" id="s" /> 177 <input type="submit" id="searchsubmit" value="Search" /> 178 </div> 179 </form> </header> 180 <div id="newsletter"> 181 <img src="https://w3collective.com/wp-content/uploads/2023/03/ipad-screen.png" width="143" height="205" alt="Newsletter Screenshot" /> 182 <div class="email-octopus-form-wrapper"> 183 <p>Join more than 1,300 web developers who are subscribed to w3collective email newsletter. Simply drop your email address below to get actionable tips, free tools, tutorials, and more to help you grow as a developer.</p> 184 <p class="email-octopus-success-message"></p> 185 <p class="email-octopus-error-message"></p> 186 <form method="post" 187 action="https://emailoctopus.com/lists/186c2b82-e8fc-11ea-a3d0-06b4694bee2a/members/embedded/1.3/add" 188 class="email-octopus-form" 189 data-sitekey="6LdYsmsUAAAAAPXVTt-ovRsPIJ_IVhvYBBhGvRV6" 190 > 191 <div class="email-octopus-form-row"> 192 <input id="field_0" name="field_0" type="email" placeholder=""> 193 </div> 194 <div class="email-octopus-form-row-hp" aria-hidden="true"> 195 <!-- Do not remove this field, otherwise you risk bot sign-ups --> 196 <input type="text" name="hp186c2b82-e8fc-11ea-a3d0-06b4694bee2a" 197 tabindex="-1" 198 autocomplete="nope"> 199 </div> 200 <div class="email-octopus-form-row-subscribe"> 201 <input type="hidden" 202 name="successRedirectUrl" 203 value=""> 204 <button type="submit">Subscribe</button> 205 </div> 206 </form> 207 <p class="email-octopus-spam">No Spam. We Respect Your Privacy. Unsubscribe at any Time.</p> 208 </div> 209 </div> 210</div>
211<div id="content" class="container"> 212 <main id="main"> 213<div id="content"> 214 <main id="main"> 215 216 <header class="page-header"> 217 <h1 class="page-title">Tag: <span>html</span></h1> </header><!-- .page-header --> 218 219 <div id="articles"><article id="post-2199" class="post-2199 post type-post status-publish format-standard hentry category-tutorial tag-css tag-html tag-js"> 220 221 <!-- TEASER --> 222 <a class="teaser" href="https://w3collective.com/sidebar-navigation-menu/" rel="bookmark"> 223 Create a sidebar navigation menu with HTML, CSS & JavaScript 224 </a> 225 226</article><article id="post-2110" class="post-2110 post type-post status-publish format-standard hentry category-tutorial tag-css tag-html tag-js"> 227 228 <!-- TEASER --> 229 <a class="teaser" href="https://w3collective.com/double-range-slider-html-css-js/" rel="bookmark"> 230 Code a double range price slider using HTML, CSS & JavaScript 231 </a> 232 233</article><article id="post-1951" class="post-1951 post type-post status-publish format-standard hentry category-tutorial tag-html tag-js"> 234 235 <!-- TEASER --> 236 <a class="teaser" href="https://w3collective.com/currency-converter-html-javascript/" rel="bookmark"> 237 Build a simple currency converter with HTML & JavaScript 238 </a> 239 240</article><article id="post-1783" class="post-1783 post type-post status-publish format-standard hentry category-tutorial tag-css tag-html tag-js"> 241 242 <!-- TEASER --> 243 <a class="teaser" href="https://w3collective.com/responsive-step-progress-bar/" rel="bookmark"> 244 Code a responsive step progress bar with HTML, CSS & JavaScript 245 </a> 246 247</article><article id="post-1474" class="post-1474 post type-post status-publish format-standard hentry category-tutorial tag-css tag-html"> 248 249 <!-- TEASER --> 250 <a class="teaser" href="https://w3collective.com/html-css-tooltip/" rel="bookmark"> 251 Setup a HTML tooltip on hover using CSS 252 </a> 253 254</article><article id="post-1264" class="post-1264 post type-post status-publish format-standard hentry category-tutorial tag-html tag-react"> 255 256 <!-- TEASER --> 257 <a class="teaser" href="https://w3collective.com/drag-drop-react/" rel="bookmark"> 258 How to use the HTML drag and drop API with React 259 </a> 260 261</article><article id="post-1181" class="post-1181 post type-post status-publish format-standard hentry category-tutorial tag-html tag-js"> 262 263 <!-- TEASER --> 264 <a class="teaser" href="https://w3collective.com/calculate-reading-time-javascript/" rel="bookmark"> 265 Calculate the estimated reading time of an article using JavaScript 266 </a> 267 268</article><article id="post-974" class="post-974 post type-post status-publish format-standard hentry category-tutorial tag-html tag-js"> 269 270 <!-- TEASER --> 271 <a class="teaser" href="https://w3collective.com/coming-soon-javascript-countdown/" rel="bookmark"> 272 Create a coming soon page featuring a JavaScript countdown timer 273 </a> 274 275</article><article id="post-266" class="post-266 post type-post status-publish format-standard hentry category-tutorial tag-css tag-html tag-js"> 276 277 <!-- TEASER --> 278 <a class="teaser" href="https://w3collective.com/preview-selected-img-file-input-js/" rel="bookmark"> 279 Preview selected image (input type=”file”) using JavaScript 280 </a> 281 282</article><article id="post-218" class="post-218 post type-post status-publish format-standard hentry category-tutorial tag-html tag-js"> 283 284 <!-- TEASER --> 285 <a class="teaser" href="https://w3collective.com/sortable-drag-drop/" rel="bookmark"> 286 Drag & drop quiz component using SortableJS 287 </a> 288 289</article></div> 290 <nav class="navigation pagination" aria-label="Posts"> 291 <h2 class="screen-reader-text">Posts navigation</h2> 292 <div class="nav-links"><span aria-current="page" class="page-numbers current">1</span> 293<a class="page-numbers" href="https://w3collective.com/tag/html/page/2/">2</a> 294<a class="next page-numbers" href="https://w3collective.com/tag/html/page/2/">Next</a></div> 295 </nav> 296 </main><!-- #main --> 297 <aside id="sidebar"> 298 <!-- --> 299 300 <div class="adsense"> 301 <!-- W3C - Display 200x200 --> 302 <ins class="adsbygoogle" 303 style="display:inline-block;
303width:200px;height:200px" 304 data-ad-client="ca-pub-4681669167842456" 305 data-ad-slot="5252212516"></ins> 306
306<script> 307 (adsbygoogle = window.adsbygoogle || []).push({}); 308 </script>
308 309 </div> 310 311 <div class="adsense"> 312 <!-- W3C - Display 200x200 --> 313 <ins class="adsbygoogle" 314 style="display:inline-block;width:200px;height:200px" 315 data-ad-client="ca-pub-4681669167842456" 316 data-ad-slot="5252212516"></ins> 317
317<script> 318 (adsbygoogle = window.adsbygoogle || []).push({}); 319 </script>
319 320 </div> 321 322 323</aside> 324 </div> 325 326 </main> 327</div> 328 329<footer id="footer" class="container"> 330 <a id="footer-hosting" href="https://www.dreamhost.com/r.cgi?2267735" target="_blank"> 331 <img src="https://w3collective.com/wp-content/themes/w3c/img/logo-dreamhost.png" width="150" alt="Dreamhost Logo" /> 332 </a> 333 <a href="https://homegardeningonline.com/" id="footer-ext">Home Gardening Online</a> 334 <nav> 335 <div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-1146" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1146"><a href="https://w3collective.com/">Home</a></li> 336<li id="menu-item-1147" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-1147"><a rel="privacy-policy" href="https://w3collective.com/privacy-policy/">Privacy Policy</a></li> 337<li id="menu-item-1950" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1950"><a href="https://w3collective.com/affiliate-disclosure/">Affiliate Disclosure</a></li> 338<li id="menu-item-1148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1148"><a href="https://w3collective.com/contact/">Contact</a></li> 339</ul></div> 340 <span>©2026 w3collective - Practical HTML, CSS, & JavaScript tutorials.</span> 341 </nav> 342</footer>
343<script async src="https://emailoctopus.com/bundles/emailoctopuslist/js/1.5/formEmbed.js"></script>
343 344</body> 345</html> 346<!-- Dynamic page generated in 0.078 seconds. --> 347<!-- Cached page generated by WP-Super-Cache on 2026-09-26 07:46:24 --> 348 349<!-- Compression = gzip -->
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.