In any conversation about HTML5, one needs to consider what’s changed and how to adapt to those changes. Although many tags are now deprecated, some still work with some browsers; they should not be used because that functionality could end without warning. In this article, I present ten deprecated tags and tell what you should be using instead. You will also discover that many tags which were once based in HTML are now being controlled by CSS.
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
</plaintext></a></big></font></font></li><li class="unstyled"><a href="#bonus-semantic-markup">Bonus: Semantic Markup</a></li></ul></astro-collapsible></div></div></div></astro-article-contents></div><h2 id="1-font-face">1. <font face=””></h2> <p>The HTML markup <font face=””> was used to specify a typeface. It’s been deprecated. Instead, use one of the CSS font-family properties. Using the <tt>@font-face</tt> declaration gives you control over the font(s) used, which can be uploaded to the server. Here is an example of the syntax:</p> <pre class="hljs"><span class="hljs-keyword">@font-face</span> { <span class="hljs-attribute">font</span>-properties } </pre> <p>Here is an example which shows the CSS and HTML together:</p> <pre class="hljs"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"> <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">font-family</span>: sansation; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>This is a Heading<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </pre> <h2 id="2-center">2. <center></h2> <p>The <center> tag has been deprecated. Use CSS instead. In this case, the text-align property is used to set the horizontal alignment of a text. Here is an example:</p> <pre class="hljs"><span class="hljs-selector-tag">h3</span> { <span class="hljs-attribute">text-align</span>: center; } </pre> <p>Here’s an example of the CSS and HMTL together:</p> <pre class="hljs"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"> <span class="hljs-selector-tag">h2</span> { <span class="hljs-attribute">text-align</span>: left; } <span class="hljs-selector-tag">h3</span> { <span class="hljs-attribute">text-align</span>: right; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Heading 2 (left)<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Heading 3 (right)<span class="hljs-tag"></<span class="hljs-name">h3</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </pre> <div class="has-data-empty:hidden print:hidden"> <div class="flex items-center gap-4 pt-2"> <div class="flex-1 border-t border-zinc-300"></div> <span class="text-xs uppercase font-semibold text-zinc-600"> Advertisement </span> <div class="flex-1 border-t border-zinc-300"></div> </div> <div class="flex justify-center items-center min-h-[260px] py-2"> <div class="flex justify-center inline-article-display data-empty:hidden" data-ad-slot="inline-article-display"> </div> </div> <div class="border-t border-zinc-300"></div> </div><p><img loading="lazy" decoding="async" alt="The previous code displayed on a Web page" height="84" src="https://assets.codeguru.com/uploads/2021/07/Tags1.jpg" width="424"><br> <strong>Figure 1:</strong> Various heading alignments</p> <h2 id="3-img-border">3. <img border=””></h2> <p>The border attribute on an img tag was used to place a border around an image. This has been deprecated. Instead, you need to make use of the CSS3 border properties; these are: <tt>border-width</tt>, <tt>border-style</tt>, and <tt>border-color</tt>. You can use this with images or text. Here’s an example of how to use the code around some text:</p> <pre class="hljs"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"> <span class="hljs-selector-tag">h1</span> { <span class="hljs-attribute">border-width</span>: <span class="hljs-number">5px</span>; <span class="hljs-attribute">border-color</span>: blue; <span class="hljs-attribute">border-style</span>: dashed; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Heading Sample<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </pre> <p><img loading="lazy" decoding="async" alt="A bordered heading" height="67" src="https://assets.codeguru.com/uploads/2021/07/Tags2.gif" width="507"><br> <strong>Figure 2:</strong> A bordered heading</p> <h2 id="4-font-color">4. <font color=””></h2> <p>The color attribute of the font tag was used to specify the font color. It has since been deprecated and, if used, it could create unexpected results because it is no longer supported by all browsers. To achieve color effects, use CSS3. In CSS3, color is now independent and can be applied to various elements.</p> <p>Now, colors are defined using the RGBA model, which is red, green, blue, and alpha. Alpha is where you define the opacity of a color and ranges from 0.0 (completely transparent) to 1.0 which is completely opaque. Here’s an example of how color might be represented with at text element:</p> <pre class="hljs"><span class="hljs-selector-tag">h4</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-number">255</span>,<span class="hljs-number">0.3</span>); } </pre> <p>Here is a code sample:</p> <pre class="hljs"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"> <span class="hljs-selector-tag">h1</span> { <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">255</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>); } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>This is a Heading<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </pre> <div class="has-data-empty:hidden print:hidden"> <div class="flex justify-center inline-article-native data-empty:hidden" data-ad-slot="inline-article-native"> </div> </div><p><img loading="lazy" decoding="async" alt="A heading with a colored background" height="53" src="https://assets.codeguru.com/uploads/2021/07/Tags3.gif" width="506"><br> <strong>Figure 3:</strong> A heading with a colored background</p> <h2 id="5-big">5. <big></h2> <p>The <tt><Big></tt> element was used to make text appear one size bigger than the surrounding text. This element is no longer available in HTML5. Instead, the solution is to use CSS3.</p> <p>One way to deal with the issue of text size is to write the text like this in CSS:</p> <pre class="hljs">.big { <span class="hljs-number">1.7</span>em<span class="hljs-comment">;</span> } </pre> <p>Another option is to use <tt><em></tt> for emphasis, or the <tt><strong></tt> tag to define bold text.</p> <h2 id="6-body-text">6. <body text=””></h2> <p>The text attribute of the body tag was used to control the text style inside the document body. This has been deprecated. The solution is CSS. Here’s an example of what the CSS would look like along with the HTML in a document:</p> <pre class="hljs"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"> <span class="hljs-selector-tag">p</span><span class="hljs-selector-class">.sansserif</span> { <span class="hljs-attribute">font-family</span>: Arial, Helvetica, sans-serif; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sansserif"</span>></span>Here is a sentence using the Arial font.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </pre> <div class="jwplayer-wrapper mx-auto my-6 w-full max-w-[640px] aspect-video print:hidden" data-jwplayer-wrapper="d9e0d2f5-2d22-4c36-853b-1b0baee06914"> <div id="d9e0d2f5-2d22-4c36-853b-1b0baee06914"></div> </div> <script async src="https://cd.connatix.com/connatix.player.js?cid=9e857bcd-b137-450c-abcf-2838a1b053cb&pid=d9e0d2f5-2d22-4c36-853b-1b0baee06914" type="text/javascript"></script> <script>(function(){const id = "d9e0d2f5-2d22-4c36-853b-1b0baee06914"; const token = "d9e0d2f5-2d22-4c36-853b-1b0baee06914"; const cid = "9e857bcd-b137-450c-abcf-2838a1b053cb"; /* * Skybox fill contract (keep in sync with src/components/ad/SkyboxAd.astro): * Non-empty skybox sets data-loaded on [data-ad-slot='skybox'] * then dispatches skybox-ad-ready. We probe the DOM initially; * if empty, we listen for that event so a late fill still suppresses Connatix. */ function isSkyboxFilled() { return Boolean( document.querySelector("[data-ad-slot='skybox'][data-loaded]"), ) } const wrapper = document.querySelector(`[data-jwplayer-wrapper="${id}"]`) let suppressed = false const suppressPlayer = () => { if (suppressed) return // Do not suppress player on desktop if (window.innerWidth > 768) return suppressed = true if (wrapper) { wrapper.remove() } } if (isSkyboxFilled()) { suppressPlayer() } else { // Try to suppress player on late skybox fill document.addEventListener("skybox-ad-ready", suppressPlayer, { once: true, }) window.cnx = window.cnx || { cmd: [] } window.cnx.cmd.push(function () { // do not add the pixel if the player is suppressed const mount = document.getElementById(id) if (suppressed || !mount || !mount.isConnected) return new Image().src = "https://capi.connatix.com/tr/si?token=" + token + "&cid=" + cid cnx({ playerId: token }).render(id) }) } })();</script> <h2 id="7-listing">7. <listing></h2> <p>The purpose of the <tt><listing></tt> element was for rendering code on a page. It was never supported well and is now deprecated. If you use it, expect unexpected results.</p> <p>A better option is to use <tt><code></tt> or to place your content in a <tt><div></tt> and use CSS styling to create the effect you’re after.</p> <div class="has-data-empty:hidden print:hidden"> <div class="flex items-center gap-4 pt-2"> <div class="flex-1 border-t border-zinc-300"></div> <span class="text-xs uppercase font-semibold text-zinc-600"> Advertisement </span> <div class="flex-1 border-t border-zinc-300"></div> </div> <div class="flex justify-center items-center min-h-[260px] py-2"> <div class="flex justify-center inline-article-display data-empty:hidden" data-ad-slot="inline-article-display"> </div> </div> <div class="border-t border-zinc-300"></div> </div><h2 id="8-frame">8. <frame></h2> <p>The frame tag was used to create multiple independent browsing contexts from a single browser window. This tag is now deprecated and should not be used.</p> <p>Instead, make use of <tt><iframe></tt>. This is not another version of <tt><frame></tt>. It is a tag which some might think of as an inline frame or internal frame. It doesn’t split the browser window. Instead, it allows you to embed one document into another. And, for greater functionality, you can use CSS to style the content.</p> <h2 id="9-app">9. <app></h2> <p>The <app> tag was the ancestor of the <tt><applet></tt> element. This has been completely removed from the specification in HTML5.</p> <p>Here’s what to use, instead:</p> <ul> <li>To embed non-JavaScript applications, use <tt><object></tt>.</li> <li>For media playback, use <tt><video></tt> or<tt><audio></tt>.</li> <li>If you plan to use native JavaScript, use <tt><canvas></tt>.</li> </ul> <div class="has-data-empty:hidden print:hidden"> <div class="flex justify-center inline-article-native data-empty:hidden" data-ad-slot="inline-article-native"> </div> </div><h2 id="10-plaintext">10. <plaintext></h2> <p>The <plaintext> element was designed for browsers to render HMTL code as plain text. This made the need for a closing tag unnecessary. This element is obsolete and should no longer be used.</p> <p>Instead, make use of either the <tt><code></tt> or <tt><pre></tt> elements.</p> <h2 id="bonus-semantic-markup">Bonus: Semantic Markup</h2> <p>An important topic to consider is the role of semantic markup. HTML5 changed the structure of a Web page and created descriptive tags which were easier to follow. The main elements are:</p> <ul> <li><tt><header></tt></li> <li><tt><nav></tt></li> <li><tt><main></tt></li> <li><tt><article></tt></li> <li><tt><aside></tt></li> <li><tt><section></tt></li> <li><tt><footer></tt></li> </ul> <p>For more information on semantic markup, check out the article “<a href="http://www.htmlgoodies.com/html5/tutorials/html5-semantics-in-dreamweaver-cs5.5.html" target="new" rel="noopener">HTML5 Semantics in Dreamweaver CS5.5</a>.”</p> </div> </div> <div style="clear: both;"></div> </div> <div class="border-t border-zinc-300 pt-6 mt-8"> <div class="lg:grid lg:grid-cols-8 gap-[10px] flex"> <a href="/author/nathan-segal/"> <div class="h-auto overflow-hidden rounded-full w-[65px] h-[65px] shrink-0 relative" data-lazyimage=""> <img alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAUABQAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+uKKKKACiiigAooooAKKKKACiiigAooooAKKK9P+G/geI28Wr38Qkd/mt4nGQB/fI7n0/OgDi9N8Fa3q0QlttPkMZ5DyEID9NxGaNS8Fa3pMRkuNPkEY5Lx4cD67ScV9AUUAfMlFen/EjwPH9nl1ewiEbp81xEgwCP74HYjv+deYUAFFFFABRRRQBZ0y0/tDUbW1zjzpVjz9SBX0bFCkESxxqFRFCqo7AdBXzvoNytnrenzucJHcRux9gwzX0bQAUUUUARTQpPE8cihkdSrKe4PUV85anafYNRurY8+TK0efoSK+kq+cteuVvNb1CdDlJLiR1PsWOKAKNFFFABRRRQAV7d8PvFMfiDSo4JHH262UJIpPLAcBh/X3rxa2tZryZYbeJ5pW6JGpYn8BXY+H/h54jjvIbmMjS2U5EruNwH+6M/kaAPZaKhgV44UWR/McKAz4xuPc47UTq8kLrG/luVIV8Z2nscd6AOY+IHimPw/pMkMbj7dcqUjUHlQeC3+HvXiNdt4g+HniOS8muZCNUZjkyo43Ef7px+Qrjrm1ms5mhuInhlXqkilSPwNAEVFFFABV7RNHn17U4LK3H7yU/ePRR3J+gqjXpfwb05S2oXzDLLthQ+meW/8AZaAO48PeGrLw3aCG1jG8j55mHzufc/0rYoooAKKKKACsfxD4asvEloYbqMbwPkmUfOh9j/StiigD5y1vSJ9C1KeyuB+8iONw6MOxH1FUa9L+MmnKG0++UYZt0Ln1xyv/ALNXmlAH/9k=" decoding="async" aria-hidden="true" class="aspect-square object-cover object-center h-auto overflow-hidden rounded-full w-[65px] h-[65px] shrink-0 absolute inset-0" style="z-index: -1"> <div data-blur="" class="absolute inset-0 transition-opacity duration-300" style="backdrop-filter: blur(20px); z-index: 1;"></div> <img src="https://secure.gravatar.com/avatar/66edd514ab3f0ecbbbf02407c5e30883?d=mm&r=g" srcset="https://secure.gravatar.com/avatar/66edd514ab3f0ecbbbf02407c5e30883?d=mm&r=g 128w, https://secure.gravatar.com/avatar/66edd514ab3f0ecbbbf02407c5e30883?d=mm&r=g 256w" alt="Nathan Segal" loading="lazy" fetchpriority="low" decoding="async" data-image="true" style="opacity:0" width="96" height="96" class="aspect-square object-cover object-center h-auto overflow-hidden rounded-full w-[65px] h-[65px] shrink-0 transition-opacity duration-300"> </div> </a> <div class="space-y-4 col-start-2 col-span-7"> <div> <a class="group" href="/author/nathan-segal/"> <h2 class="h4 font-mono uppercase font-semibold mb-1 group-hover:text-primary text-secondary transition">Nathan Segal</h2> </a> </div> </div> </div> </div> </div> </div> <aside class="lg:min-w-[300px] lg:max-w-[300px] gap-10 flex flex-col content-sidebar"> <div class="grow ad-container print:hidden"><div class="sticky top-[150px]"><div class="flex justify-center md:justify-start right-rail data-empty:hidden" data-ad-slot="right-rail"> </div> </div></div><div class="grow print:hidden"><div class="sticky top-[150px]"><astro-island uid="Z1v5RUc" prefix="s2" component-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/CardNewsletterSubscribe.DIf_NdEw.js" component-export="default" renderer-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/client.D3va_9lb.js" props="{"config":[0,{"title":[0,"Developer Insider"],"header":[0,"Get the Free Newsletter!"],"subheader":[0,"Subscribe to Developer Insider for top news, trends & analysis"],"primarySubscription":[0,{"code":[0,"developer-insider"],"name":[0,"Developer Insider"],"label":[0,"Stay ahead with the latest in coding and open source."]}],"assets":[0,{"backgroundImage":[0,null],"desktopPreview":[0,null],"mobilePreview":[0,null],"peopleImage":[0,null]}],"pages":[0,{"simple":[0,{"description":[0,"Stay ahead with the latest in coding and open source."],"class":[0,"text-quaternary-foreground"],"containerClass":[0,"[&_:not(input)]:[&_:not(button)]:!text-heading !bg-quaternary py-16 rounded-2xl px-4 mx-auto w-full lg:max-w-9/10"],"sections":[1,[[0,{"type":[0,"hero"],"layout":[0,"simple"]}]]]}],"detailed":[0,{"class":[0,"text-quaternary-foreground"],"sections":[1,[[0,{"type":[0,"hero"],"layout":[0,"detailed"],"subscriberTitle":[0,"Developers"],"subscriberCount":[0,"25k+"],"description":[0,"\n <p>\n Developer Insider is a free newsletter that keeps you sharp on the latest in programming and open source. Each edition delivers coding insights, language updates, and industry commentary you need to stay ahead as a developer.\n </p>\n "],"outerClass":[0,"bg-gradient-to-r from-primary from-60% to-secondary"]}],[0,{"type":[0,"subscribe"],"description":[0,"Stay ahead with the latest in coding and open source."]}]]]}]}],"sparkloop":[0,true]}],"websiteName":[0,"CodeGuru"],"slug":[0,"codeguru"],"location":[0,"sidebar"],"locale":[0,"en"],"formClass":[0,"border-[#cbd5e1]"]}" ssr="" client="idle" opts="{"name":"CardNewsletterSubscribe","value":true}" await-children=""><div class="pt-[20px] pb-[30px] px-[24px] space-y-4 @container bg-primary/10 border-[#cbd5e1]"><h3 class="text-[24px]/[27px] tracking-[1.2px] font-bold uppercase text-secondary">Get the Free Newsletter!</h3><p class="text-[18px]/[24px] font-light">Subscribe to Developer Insider for top news, trends & analysis</p><!--[--><form class="space-y-4 flex gap-4 flex-wrap justify-between"><input name="email" type="email" value="" placeholder="enter your email" autocomplete="off" style="display:contents;opacity:0;"><div class="flex lg:flex-row flex-col w-full lg:bg-white rounded-full p-1 has-active:border-zinc-400 has-focus:border-zinc-400 border-zinc-200 lg:border border-0 motion-safe:transition flex-col! bg-transparent! border-0! gap-y-2! pb-0! mb-0!"><label for="subscription-email-25157" class="sr-only">ENTER YOUR EMAIL</label><input id="subscription-email-25157" type="email" placeholder="ENTER YOUR EMAIL" class="border border-zinc-300 bg-white w-full text-[16px] p-2 rounded-lg order-1 sm:grow sm:basis-0 lg:w-auto lg:grow flex-1 px-6 py-3 text-gray-800 text-lg lg:border-none outline-none rounded-l-full rounded-r-full lg:rounded-r-none focus:border-tertiary active:border-tertiary lg:active:border-none lg:focus:border-none rounded-full!"><button type="submit" id="join-newsletter-btn" class="text-[16px] rounded-full py-2 order-3 hover:cursor-pointer motion-safe:transition max-sm:w-full px-8 sm:order-2 lg:min-w-[205px] flex items-center justify-center bg-tertiary text-tertiary-foreground hover:bg-tertiary/80 font-bold tracking-wide min-w-auto!">Join For Free</button></div><!----><!--[--><div class="text-sm text-gray-600">By subscribing, you agree to receive emails from CodeGuru. You can unsubscribe at any time. View our <a href="/terms-conditions/" target="_blank">Terms</a> and <a href="/privacy-policy/" target="_blank">Privacy Policy</a>. </div><!--]--></form><!----><!----><!--]--></div><!--astro:end--></astro-island></div></div><div class="grow ad-container print:hidden"><div class="sticky top-[150px]"><div class="flex justify-center md:justify-start right-rail data-empty:hidden" data-ad-slot="right-rail"> </div> </div></div><div class="grow print:hidden"><div class="sticky top-[150px]"><div><div class="px-6 py-4 space-y-4 bg-primary/10"><h3 class="h3 uppercase text-secondary text-[20px] tracking-[1px] font-bold border-b border-black/15 pb-2 mb-0"> More From Nathan Segal</h3><ul class="flex flex-col"><li class="py-2"><a class="text-[16px]/[24px]" href="/csharp/top-10-css3-things-developers-should-know-and-do/">Top 10 CSS3 Things Developers Should Know and Do</a></li></ul></div></div></div></div><div class="grow ad-container print:hidden"><div class="sticky top-[150px]"><div class="flex justify-center md:justify-start right-rail data-empty:hidden" data-ad-slot="right-rail"> </div> </div></div> </aside> <div style="margin: 40px 0px; position: relative; height: 1px; width: 100%; user-select: none; pointer-events: none;"> <div data-type="infiniscroll-break" style="position: absolute; bottom: 0; left: 0; right: 0; height: 100vh;"></div> </div> <script type="infiniscroll/json">{"title":"Ten HTML Tags Developers Should No Longer be Using in Web Apps","path":"/csharp/ten-html-tags-developers-should-no-longer-be-using-in-web-apps/","id":7298,"category":30653,"ads":true,"adTargeting":{"env":"prod","stage":"prod","url":"www.codeguru.com/csharp/ten-html-tags-developers-should-no-longer-be-using-in-web-apps/","hostname":"www.codeguru.com","cid":"ten-html-tags-developers-should-no-longer-be-using-in-web-apps","path":"csharp,ten-html-tags-developers-should-no-longer-be-using-in-web-apps","kw":["css","css3","html","html5","web-apps"],"category":["csharp"],"topic":["csharp"],"tax":["audience purchase stage awareness","audience purchase stage evaluation","audience purchase stage implementation","product development markup languages css","product development markup languages html","product development platform framework web"],"ptype":"article","news":"no"}}</script> <aside> <div class="flex flex-col gap-7"> <div class="flex items-start justify-between gap-4"> <div class="text-[20px]/[28px] pt-[12px] tracking-[1.4px] font-bold uppercase grow text-secondary border-t-2 border-secondary"> <h2>Recommended for you...</h2> </div> <div class="hidden md:block"> </div> </div> <div> <div class="grid grid-cols-1 gap-6 md:grid-cols-4"><div class="space-y-[17px]"><div class="flex flex-col w-full"><a class="block group w-full overflow-hidden relative" href="/csharp/c-sharp-vs-java/"> <div class="relative w-full aspect-video"> <div class="w-full h-full relative" data-lazyimage=""> <img alt="" src="data:image/webp;base64,UklGRnQAAABXRUJQVlA4IGgAAACQAgCdASoQAAoAAQAaJagCdAYQB6JpheMZQqaH4AD++SHE2/tCzP5uXlHnE89+rYxxx6OVUQUZF0/+9fp0giai6LeP11Gf7OoJL/ol6Cg1JX6P6Pxi90rf/LP/9rAM2/7yuLPnDAAAAA==" decoding="async" aria-hidden="true" class="w-full h-full object-cover aspect-video absolute inset-0" style="z-index: -1"> <div data-blur="" class="absolute inset-0 transition-opacity duration-300" style="backdrop-filter: blur(20px); z-index: 1;"></div> <img src="https://assets.codeguru.com/uploads/2023/01/c-sharp-tutorials-tips-tricks.png?w=1024" srcset="https://assets.codeguru.com/uploads/2023/01/c-sharp-tutorials-tips-tricks.png?w=128 128w, https://assets.codeguru.com/uploads/2023/01/c-sharp-tutorials-tips-tricks.png?w=256 256w, https://assets.codeguru.com/uploads/2023/01/c-sharp-tutorials-tips-tricks.png?w=512 512w" alt="C# vs Java" loading="lazy" fetchpriority="auto" decoding="async" data-image="true" style="opacity:0" width="1024" height="834" class="w-full h-full object-cover aspect-video transition-opacity duration-300"> </div> </div> </a><a class="bg-primary overflow-hidden text-primary-foreground inline-block uppercase text-[12px] leading-[16px] font-mono font-semibold hover:bg-primary/90 self-start tracking-widest text-nowrap max-w-full text-ellipsis" href="/csharp/"> <astro-island uid="11ghHV" prefix="s4" component-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/Ticker.BehFjubV.js" component-export="default" renderer-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/client.D3va_9lb.js" props="{"text":[0,"C#"]}" ssr="" client="idle" opts="{"name":"Ticker","value":true}" await-children=""><div class="ticker-container px-[8px] py-[6px] flex" style="--scroll-distance:-0px;" data-v-34ac2891=""><span class="w-full truncate ticker-text" data-v-34ac2891="">C#</span></div><!--astro:end--></astro-island> </a></div><a class="font-semibold text-secondary hover:text-primary line-clamp-3 text-ellipsis md:text-[18px]/[22px] text-[18px]/[22px]" href="/csharp/c-sharp-vs-java/"> C# vs Java </a><div class="md:block hidden"><div class="font-light text-zinc-800 line-clamp-3 text-ellipsis text-[14px]"><p></p><p>C# and Java are two very popular programming languages, each regularly topping the charts of the top 5 most widely use programming languages in the world. Both programming languages share a similar syntax and structure, and are often considered to be part of the same family of programming languages – notably, the “C-family”, which includes […]</p> <p></p></div></div><div class="gap-x-7 mt-2 uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500 flex flex-col"><a class="text-secondary hover:text-primary font-semibold" href="/author/nrini/"> Nicholas Rini </a><div class="uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500" data-nosnippet="true">Mar 24, 2023</div></div></div><div class="space-y-[17px]"><div class="flex flex-col w-full"><a class="block group w-full overflow-hidden relative" href="/csharp/c-sharp-versus-c/"> <div class="relative w-full aspect-video"> <div class="w-full h-full relative" data-lazyimage=""> <img alt="" src="data:image/webp;base64,UklGRv4AAABXRUJQVlA4WAoAAAAQAAAADwAACAAAQUxQSEgAAAABYBPZtpNHpgMFmEHFd0ESQEeFAMqMk6wABciI96IhIiZAoJkVvvwN5+s6lMayC1asRzur0cQ6tLEcjUxXx3WdkctEvLIOBAJWUDggkAAAABADAJ0BKhAACQABABolqAJ0OsAGYFf3vgAP1ANrquHS2AD90nzFq1pqmYBcajz90TAW377+f5c5//3Mcqiq9xZ3/W1N/6vT9VA5vZoiJSajFwLS3xuBLa3fN3clAJ/+oPI7/H26z97+H2QfJ/8a8ec/7+qocOX8P+PfsVqu3nIqFHgg4tE8jnclwj+1WNMgAA==" decoding="async" aria-hidden="true" class="w-full h-full object-cover aspect-video absolute inset-0" style="z-index: -1"> <div data-blur="" class="absolute inset-0 transition-opacity duration-300" style="backdrop-filter: blur(20px); z-index: 1;"></div> <img src="https://assets.codeguru.com/uploads/2021/08/C-Sharp-Tutorials.png?w=1024" srcset="https://assets.codeguru.com/uploads/2021/08/C-Sharp-Tutorials.png?w=128 128w, https://assets.codeguru.com/uploads/2021/08/C-Sharp-Tutorials.png?w=256 256w, https://assets.codeguru.com/uploads/2021/08/C-Sharp-Tutorials.png?w=512 512w" alt="C# versus C" loading="lazy" fetchpriority="auto" decoding="async" data-image="true" style="opacity:0" width="1024" height="1305" class="w-full h-full object-cover aspect-video transition-opacity duration-300"> </div> </div> </a><a class="bg-primary overflow-hidden text-primary-foreground inline-block uppercase text-[12px] leading-[16px] font-mono font-semibold hover:bg-primary/90 self-start tracking-widest text-nowrap max-w-full text-ellipsis" href="/csharp/"> <astro-island uid="11ghHV" prefix="s5" component-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/Ticker.BehFjubV.js" component-export="default" renderer-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/client.D3va_9lb.js" props="{"text":[0,"C#"]}" ssr="" client="idle" opts="{"name":"Ticker","value":true}" await-children=""><div class="ticker-container px-[8px] py-[6px] flex" style="--scroll-distance:-0px;" data-v-34ac2891=""><span class="w-full truncate ticker-text" data-v-34ac2891="">C#</span></div><!--astro:end--></astro-island> </a></div><a class="font-semibold text-secondary hover:text-primary line-clamp-3 text-ellipsis md:text-[18px]/[22px] text-[18px]/[22px]" href="/csharp/c-sharp-versus-c/"> C# versus C </a><div class="md:block hidden"><div class="font-light text-zinc-800 line-clamp-3 text-ellipsis text-[14px]"><p></p><p>Without a doubt, C and C# are two of the most powerful and popular programming languages used for software development in the world. Both languages share certain similarities, as their names suggest; however, they are also very different in terms of structure, syntax, performance, and, perhaps most notably, memory management. In addition, C and C# […]</p> <p></p></div></div><div class="gap-x-7 mt-2 uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500 flex flex-col"><a class="text-secondary hover:text-primary font-semibold" href="/author/nrini/"> Nicholas Rini </a><div class="uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500" data-nosnippet="true">Mar 22, 2023</div></div></div><div class="space-y-[17px]"><div class="flex flex-col w-full"><a class="block group w-full overflow-hidden relative" href="/dotnet/jit-compiler-dot-net/"> <div class="relative w-full aspect-video"> <div class="w-full h-full relative" data-lazyimage=""> <img alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAUFBQUFBQUGBgUICAcICAsKCQkKCxEMDQwNDBEaEBMQEBMQGhcbFhUWGxcpIBwcICkvJyUnLzkzMzlHREddXX0BBQUFBQUFBQYGBQgIBwgICwoJCQoLEQwNDA0MERoQExAQExAaFxsWFRYbFykgHBwgKS8nJScvOTMzOUdER11dff/AABEIAAoAEAMBIgACEQEDEQH/xABiAAADAQAAAAAAAAAAAAAAAAAEBQYHEAACAQQCAwEBAAAAAAAAAAABAgMEBRExABIGISIUFwEBAQAAAAAAAAAAAAAAAAAAAgMRAAICAwEAAAAAAAAAAAAAAAECAxEABBIT/9oADAMBAAIRAxEAPwBzS3LxuGWhr7Hbw09NUIz5Uu0qsOokyPYTOweA1Xmgv1dUV4Y0NY8H5nSP5AIOD9neSNclLS7/AM6ujdjlexU50Q/MxtUspu0mZG9xsdnfXgSGP2YgGxlXkddSOSwem5qs/9k=" decoding="async" aria-hidden="true" class="w-full h-full object-cover aspect-video absolute inset-0" style="z-index: -1"> <div data-blur="" class="absolute inset-0 transition-opacity duration-300" style="backdrop-filter: blur(20px); z-index: 1;"></div> <img src="https://assets.codeguru.com/uploads/2022/05/c-sharp-tutorial-scaled.jpeg?w=1024" srcset="https://assets.codeguru.com/uploads/2022/05/c-sharp-tutorial-scaled.jpeg?w=128 128w, https://assets.codeguru.com/uploads/2022/05/c-sharp-tutorial-scaled.jpeg?w=256 256w, https://assets.codeguru.com/uploads/2022/05/c-sharp-tutorial-scaled.jpeg?w=512 512w" alt="Different Types of JIT Compilers in .NET" loading="lazy" fetchpriority="auto" decoding="async" data-image="true" style="opacity:0" width="1024" height="1707" class="w-full h-full object-cover aspect-video transition-opacity duration-300"> </div> </div> </a><a class="bg-primary overflow-hidden text-primary-foreground inline-block uppercase text-[12px] leading-[16px] font-mono font-semibold hover:bg-primary/90 self-start tracking-widest text-nowrap max-w-full text-ellipsis" href="/dotnet/"> <astro-island uid="DI7zo" prefix="s6" component-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/Ticker.BehFjubV.js" component-export="default" renderer-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/client.D3va_9lb.js" props="{"text":[0,".NET"]}" ssr="" client="idle" opts="{"name":"Ticker","value":true}" await-children=""><div class="ticker-container px-[8px] py-[6px] flex" style="--scroll-distance:-0px;" data-v-34ac2891=""><span class="w-full truncate ticker-text" data-v-34ac2891="">.NET</span></div><!--astro:end--></astro-island> </a></div><a class="font-semibold text-secondary hover:text-primary line-clamp-3 text-ellipsis md:text-[18px]/[22px] text-[18px]/[22px]" href="/dotnet/jit-compiler-dot-net/"> Different Types of JIT Compilers in .NET </a><div class="md:block hidden"><div class="font-light text-zinc-800 line-clamp-3 text-ellipsis text-[14px]"><p></p><p>The majority of today’s programming languages are written in human-readable form known as source code. Computers, however, cannot understand source code, and, as such, to execute or run source code, compilers are used to convert code into machine language (also known as native code) for the computer to understand the set of instructions (what code […]</p> <p></p></div></div><div class="gap-x-7 mt-2 uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500 flex flex-col"><a class="text-secondary hover:text-primary font-semibold" href="/author/tariqsiddiqui/"> Tariq Siddiqui </a><div class="uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500" data-nosnippet="true">Mar 17, 2023</div></div></div><div class="space-y-[17px]"><div class="flex flex-col w-full"><a class="block group w-full overflow-hidden relative" href="/csharp/asp-net-middleware/"> <div class="relative w-full aspect-video"> <div class="w-full h-full relative" data-lazyimage=""> <img alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAUFBQUFBQUGBgUICAcICAsKCQkKCxEMDQwNDBEaEBMQEBMQGhcbFhUWGxcpIBwcICkvJyUnLzkzMzlHREddXX0BBQUFBQUFBQYGBQgIBwgICwoJCQoLEQwNDA0MERoQExAQExAaFxsWFRYbFykgHBwgKS8nJScvOTMzOUdER11dff/AABEIAAkAEAMBIgACEQEDEQH/xABkAAEBAQAAAAAAAAAAAAAAAAAEAgYQAAEDBAEEAwAAAAAAAAAAAAIBAwQABQYREwcSNnMiMbIBAQAAAAAAAAAAAAAAAAAAAAIRAAICAgMBAAAAAAAAAAAAAAECAxEAEgQhIkH/2gAMAwEAAhEDEQA/ABPSsvmZNaZEPmK0ILCI4GkYURTZ/DuVNr9LV9VbhYnbW/EWO2Mp2QyYhsORpsEItoQpvRU/FvCz9SVjM98aZ9xfimiCPkxLQ1jbUACia+nBCwlVbBDUxsHrzn//2Q==" decoding="async" aria-hidden="true" class="w-full h-full object-cover aspect-video absolute inset-0" style="z-index: -1"> <div data-blur="" class="absolute inset-0 transition-opacity duration-300" style="backdrop-filter: blur(20px); z-index: 1;"></div> <img src="https://assets.codeguru.com/uploads/2022/01/c-sharp-tutorials-state-management-scaled.jpg?w=1024" srcset="https://assets.codeguru.com/uploads/2022/01/c-sharp-tutorials-state-management-scaled.jpg?w=128 128w, https://assets.codeguru.com/uploads/2022/01/c-sharp-tutorials-state-management-scaled.jpg?w=256 256w, https://assets.codeguru.com/uploads/2022/01/c-sharp-tutorials-state-management-scaled.jpg?w=512 512w" alt="Middleware in ASP.NET Core" loading="lazy" fetchpriority="auto" decoding="async" data-image="true" style="opacity:0" width="1024" height="1440" class="w-full h-full object-cover aspect-video transition-opacity duration-300"> </div> </div> </a><a class="bg-primary overflow-hidden text-primary-foreground inline-block uppercase text-[12px] leading-[16px] font-mono font-semibold hover:bg-primary/90 self-start tracking-widest text-nowrap max-w-full text-ellipsis" href="/csharp/"> <astro-island uid="11ghHV" prefix="s7" component-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/Ticker.BehFjubV.js" component-export="default" renderer-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/client.D3va_9lb.js" props="{"text":[0,"C#"]}" ssr="" client="idle" opts="{"name":"Ticker","value":true}" await-children=""><div class="ticker-container px-[8px] py-[6px] flex" style="--scroll-distance:-0px;" data-v-34ac2891=""><span class="w-full truncate ticker-text" data-v-34ac2891="">C#</span></div><!--astro:end--></astro-island> </a></div><a class="font-semibold text-secondary hover:text-primary line-clamp-3 text-ellipsis md:text-[18px]/[22px] text-[18px]/[22px]" href="/csharp/asp-net-middleware/"> Middleware in ASP.NET Core </a><div class="md:block hidden"><div class="font-light text-zinc-800 line-clamp-3 text-ellipsis text-[14px]"><p></p><p>Middleware is a piece of computer software that allows software ( such as an internet application) to communicate with databases, servers, and remote machines. Middleware handles the HTTP requests and HTTP responses between a client and a server, which helps developers build better and more efficient software architecture. Read: Best Online Courses to Learn C# […]</p> <p></p></div></div><div class="gap-x-7 mt-2 uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500 flex flex-col"><a class="text-secondary hover:text-primary font-semibold" href="/author/tariqsiddiqui/"> Tariq Siddiqui </a><div class="uppercase font-mono text-[12px] leading-[16px] tracking-widest text-zinc-500" data-nosnippet="true">Mar 16, 2023</div></div></div></div> </div> <div class="justify-center md:hidden flex"> </div> </div> </aside> <astro-island uid="1ffXFD" prefix="s1" component-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/ExitIntentNewsletterPopup.BZDutT6Z.js" component-export="default" renderer-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/client.D3va_9lb.js" props="{"newsletter":[0,{"title":[0,"Developer Insider"],"header":[0,"Get the Free Newsletter!"],"subheader":[0,"Subscribe to Developer Insider for top news, trends & analysis"],"primarySubscription":[0,{"code":[0,"developer-insider"],"name":[0,"Developer Insider"],"label":[0,"Stay ahead with the latest in coding and open source."]}],"assets":[0,{"backgroundImage":[0,null],"desktopPreview":[0,null],"mobilePreview":[0,null],"peopleImage":[0,null]}],"pages":[0,{"simple":[0,{"description":[0,"Stay ahead with the latest in coding and open source."],"class":[0,"text-quaternary-foreground"],"containerClass":[0,"[&_:not(input)]:[&_:not(button)]:!text-heading !bg-quaternary py-16 rounded-2xl px-4 mx-auto w-full lg:max-w-9/10"],"sections":[1,[[0,{"type":[0,"hero"],"layout":[0,"simple"]}]]]}],"detailed":[0,{"class":[0,"text-quaternary-foreground"],"sections":[1,[[0,{"type":[0,"hero"],"layout":[0,"detailed"],"subscriberTitle":[0,"Developers"],"subscriberCount":[0,"25k+"],"description":[0,"\n <p>\n Developer Insider is a free newsletter that keeps you sharp on the latest in programming and open source. Each edition delivers coding insights, language updates, and industry commentary you need to stay ahead as a developer.\n </p>\n "],"outerClass":[0,"bg-gradient-to-r from-primary from-60% to-secondary"]}],[0,{"type":[0,"subscribe"],"description":[0,"Stay ahead with the latest in coding and open source."]}]]]}]}],"sparkloop":[0,true]}],"websiteName":[0,"CodeGuru"],"slug":[0,"codeguru"]}" ssr="" client="idle" opts="{"name":"ExitIntentNewsletterPopup","value":true}" await-children=""><!----><!--astro:end--></astro-island> <script data-ad-sidebar-selector=".content-sidebar"> ;(() => { const el = document.querySelector("[data-ad-sidebar-selector]") const sidebarSelector = el?.getAttribute("data-ad-sidebar-selector") || ".content-sidebar" const childrenSelector = `${sidebarSelector} > div` // AY uses GPT under the hood, so slotRenderEnded events fire reliably // Watch for right-rail ads filling and adjust sidebar height window.googletag = window.googletag || { cmd: [] } window.googletag.cmd.push(() => { const articleContainer = document.getElementById("article-container") const aside = document.querySelector(sidebarSelector) if (!articleContainer || !aside) return const getSidebarHeight = () => { const sidebarChildren = document.querySelectorAll(childrenSelector) return Array.from(sidebarChildren).reduce( (acc, div) => acc + div.offsetHeight, 0, ) } const adjustSidebarHeight = () => { let ads = aside.querySelectorAll(".ad-container") while ( articleContainer.offsetHeight < getSidebarHeight() && ads.length > 0 ) { if (ads.item(ads.length - 1)) { ads.item(ads.length - 1).remove() } ads = aside.querySelectorAll(".ad-container") } } window.googletag .pubads() .addEventListener("slotRenderEnded", (event) => { // Only process filled ads if (event.isEmpty) return const slotElementId = event.slot.getSlotElementId() const placement = document.getElementById(slotElementId) // Check if this is a right-rail ad (class-based identification) if ( !placement || !placement.classList.contains("right-rail") ) { return } // Ad filled, check if we need to remove ads to fit sidebar adjustSidebarHeight() }) }) })() </script> <div class="flex items-center justify-center min-h-[90px]! md:min-h-[130px]! print:hidden inline-bottom data-empty:hidden" data-ad-slot="inline-bottom"> </div> <div class="wrapper relative bg-primary text-primary-foreground pt-[44px] pb-[9px] z-999"> <div class="flex flex-col lg:grid lg:grid-cols-5 gap-x-[64px] space-y-[24px] lg:space-y-[16px]"> <div class="space-y-[24px] lg:space-y-[16px] lg:col-span-3"> <a class="inline-block" href="/"> <div class="max-w-[200px] self-start md:ml-[unset] invert brightness-0 contrast-200 relative"> <img src="https://ccae997a-constellation.micah-shackelford.workers.dev/_image/?href=%2F_astro%2Fcodeguru.BQmYOOVf.png&w=2267&h=339&f=webp" alt="CodeGuru Logo" data-image="true" style="opacity:1" loading="lazy" decoding="async" fetchpriority="auto" width="2267" height="339" class="max-w-[200px] self-start md:ml-[unset] invert brightness-0 contrast-200 transition-opacity duration-300"> </div> </a> <p class="leading-6"> CodeGuru covers topics related to Microsoft-related software development, mobile development, database management, and web application programming. In addition to tutorials and how-tos that teach programmers how to code in Microsoft-related languages and frameworks like C# and .Net, we also publish articles on software development tools, the latest in developer news, and advice for project managers. Cloud services such as Microsoft Azure and database options including SQL Server and MSSQL are also frequently covered. </p> <div class="flex gap-6 justify-center lg:justify-normal h-fit"> <div class="flex items-center gap-3 gap-4"> <div class="flex items-center"> <a href="https://www.facebook.com/CodeGuru-108048391032729" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-foreground text-primary transition-all ease-in-out hover:opacity-80 aspect-square" aria-label="facebook"> <svg role="img" viewBox="0 0 24 24" class="fill-current" width="20" height="20" aria-hidden="true"><title>Facebook</title><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" /></svg> <div class="sr-only">facebook</div> </a> </div><div class="flex items-center"> <a href="https://www.linkedin.com/company/codegurutoday/?viewAsMember=true" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-foreground text-primary transition-all ease-in-out hover:opacity-80 aspect-square" aria-label="linkedin"> <svg class="fill-current" viewBox="0 0 24 25" fill="none" width="20" height="20" aria-hidden="true"> <path d="M6.20062 21.2143H1.84688V7.194H6.20062V21.2143ZM4.02141 5.2815C2.62922 5.2815 1.5 4.12838 1.5 2.73619C1.5 2.06747 1.76565 1.42614 2.2385 0.953285C2.71136 0.48043 3.35269 0.214783 4.02141 0.214783C4.69012 0.214783 5.33145 0.48043 5.80431 0.953285C6.27716 1.42614 6.54281 2.06747 6.54281 2.73619C6.54281 4.12838 5.413 5.2815 4.02141 5.2815ZM22.4953 21.2143H18.1509V14.3893C18.1509 12.7628 18.1181 10.6768 15.8873 10.6768C13.6237 10.6768 13.2769 12.444 13.2769 14.2721V21.2143H8.92781V7.194H13.1034V9.1065H13.1644C13.7456 8.00494 15.1655 6.84244 17.2838 6.84244C21.69 6.84244 22.5 9.744 22.5 13.5128V21.2143H22.4953Z" fill="currentColor" /> </svg> <div class="sr-only">linkedin</div> </a> </div><div class="flex items-center"> <a href="https://twitter.com/CodeGuruToday" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-foreground text-primary transition-all ease-in-out hover:opacity-80 aspect-square" aria-label="x"> <svg role="img" viewBox="0 0 24 24" class="fill-current" width="20" height="20" aria-hidden="true"><title>X</title><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" /></svg> <div class="sr-only">x</div> </a> </div> </div> </div> </div> <div class="flex gap-x-[64px] lg:col-span-2 justify-center lg:justify-start"> <div class="space-y-[24px] lg:space-y-[16px]"> <h3 class="h3 uppercase font-bold text-[16px]/[16px] text-white">Company</h3> <div class="grid space-y-[12px]"> <a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[16px] text-nowrap" href="https://technologyadvice.com/contact-us/" target="_blank" rel="nofollow"> Contact us </a> <a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[16px] text-nowrap" href="https://solutions.technologyadvice.com/advertise-on-codeguru/?utm_source=codeguru&utm_medium=portfolio_footer&utm_campaign=advertise_contact-us" target="_blank" rel="nofollow"> Advertise with us </a> </div> </div> <div class="space-y-[24px] lg:space-y-[16px]"> <h3 class="h3 uppercase font-bold text-[16px]/[16px] text-white">Categories</h3> <div class="grid space-y-[12px]"> <a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/news/"> News </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/cplusplus/"> C++ </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/csharp/"> C# </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/dotnet/"> .NET </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/visual-basic/"> Visual Basic </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/java/"> Java </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/database/"> Database </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/azure/"> Azure </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/iot/"> IoT </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/mobile/"> Mobile </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/research/"> Research </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/tools/"> Tools </a><a class="text-primary-foreground hover:text-primary-foreground/80 text-[16px]/[20px] text-ellipsis line-clamp-1" href="/blog/"> Blog </a> </div> </div> </div> </div> </div> <div class="wrapper relative bg-white pt-[9px] pb-[100px] z-999"> <div class="flex flex-col items-center lg:grid lg:grid-cols-2 gap-x-[64px] space-y-[24px] lg:space-y-[16px]"> <div class="flex flex-col gap-4 col-span-full text-[12px]/[21px] text-secondary"> <div class="space-y-2"> <p class="font-bold"> Property of TechnologyAdvice. © 2026 TechnologyAdvice. All Rights Reserved </p> <p> Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace. </p> </div> <div class="flex gap-4 items-center font-bold uppercase"> <a class="text-secondary hover:text-primary" href="/terms-conditions/"> Terms of Service </a> <a class="text-secondary hover:text-primary" href="/privacy-policy/"> Privacy Policy </a> <a class="text-secondary hover:text-primary" href="https://technologyadvice.com/privacy-policy/ccpa-opt-out-form/" target="_blank" rel="nofollow"> California - Do Not Sell My Information </a> </div> <div id="choice-footer-msg" class="text-[12px]/[21px]"></div> </div> </div> </div><astro-island uid="ZBxB5E" prefix="s3" component-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/BackToTop.9me73tvH.js" component-export="default" renderer-url="https://ccae997a-constellation.micah-shackelford.workers.dev/_astro/client.D3va_9lb.js" props="{}" ssr="" client="idle" opts="{"name":"BackToTop","value":true}" await-children=""><button id="back-to-top" class="fixed right-4 z-1001 cursor-pointer transition-all duration-500 ease-in-out rounded-full hover:shadow-[0px_0px_3px_#71717a] hover:scale-105 bg-primary text-primary-foreground border-none p-0 opacity-0 translate-y-[70px]" style="bottom:calc(var(--sticky-ad-height, 0px) + 16px);" aria-label="Back to top"><svg width="48" height="48" viewBox="0 0 48 48" class="block" aria-hidden="true"><circle cx="24" cy="24" r="21" fill="none" stroke="currentColor" stroke-width="3" opacity="0.2" /><circle cx="24" cy="24" r="21" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-dasharray="131.94689145077132" stroke-dashoffset="131.94689145077132" transform="rotate(-90 24 24)" style="transition:stroke-dashoffset 150ms ease;" /></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up-icon lucide-chevron-up absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" aria-hidden="true"><path d="m18 15-6-6-6 6" /></svg></button><!--astro:end--></astro-island> <sticky-footer-ad class="group hide-on-empty fixed w-full bottom-0 bg-white flex justify-center items-center border-gray-200 border-t transition-transform duration-500 ease-in-out z-1000 has-[div[data-empty]]:hidden print:hidden" style="height: min-content"> <button class="absolute left-8 -top-[25px] cursor-pointer bg-white px-2 border-gray-200 border-t border-r border-l rounded-t-lg" aria-label="Toggle collapse"><!----><!--[--> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down chevron transition-transform duration-500" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg> <!--]--></button> <div class="sticky-footer data-empty:hidden" data-ad-slot="sticky-footer"> </div> </sticky-footer-ad> </body></html>