{"id":4792,"date":"2026-05-18T23:04:14","date_gmt":"2026-05-18T17:34:14","guid":{"rendered":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/"},"modified":"2026-05-18T23:04:14","modified_gmt":"2026-05-18T17:34:14","slug":"master-html-the-ultimate-guide-for-beginners","status":"publish","type":"post","link":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/","title":{"rendered":"Master HTML: The Ultimate Guide for Beginners"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a0b8e6603960\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a0b8e6603960\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#The_Bloat_is_a_Choice_A_Return_to_Semantic_Sanity\" >The Bloat is a Choice: A Return to Semantic Sanity<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_Nextjs_is_a_High-Level_Language_for_People_Who_Hate_Computers\" >H2: Next.js is a High-Level Language for People Who Hate Computers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Curl_Audit_4_Megabytes_of_Nothing\" >H2: The Curl Audit: 4 Megabytes of Nothing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Archeology_of_the_Tag_From_Wilbur_to_the_Living_Standard\" >H2: The Archeology of the Tag: From Wilbur to the Living Standard<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#HTML_32_Wilbur_%E2%80%93_1997\" >HTML 3.2 (Wilbur) &#8211; 1997<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#HTML_401_%E2%80%93_1999\" >HTML 4.01 &#8211; 1999<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#HTML5_The_Living_Standard\" >HTML5 (The Living Standard)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_Your_Div_Soup_is_a_Crime_Against_Logic\" >H2: Your Div Soup is a Crime Against Logic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Byte-Size_Difference_A_Technical_Reality_Check\" >H2: The Byte-Size Difference: A Technical Reality Check<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Ghost_of_Tim_Berners-Lee_is_Weeping_Over_Your_Bundle_Size\" >H2: The Ghost of Tim Berners-Lee is Weeping Over Your Bundle Size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Deprecated_Graveyard_A_Eulogy_for_the_Tag\" >H2: The Deprecated Graveyard: A Eulogy for the &lt;font&gt; Tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Obscure_Global_Attributes_Youre_Ignoring\" >H2: The Obscure Global Attributes You\u2019re Ignoring<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Accessibility_Tax_Why_Your_%E2%80%98Custom_Component_is_Broken\" >H2: The Accessibility Tax: Why Your &#8216;Custom Component&#8217; is Broken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Memory_Heap_and_the_Death_of_the_Document\" >H2: The Memory Heap and the Death of the Document<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_A_Call_for_Semantic_Sanity\" >H2: A Call for Semantic Sanity<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#H2_The_Final_Insult_The_Head_Element\" >H2: The Final Insult: The Head Element<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"The_Bloat_is_a_Choice_A_Return_to_Semantic_Sanity\"><\/span>The Bloat is a Choice: A Return to Semantic Sanity<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>Next.js is a cancer. There, I said it. It is a bloated, over-engineered, glorified wrapper for people who are too terrified to look at a raw <strong>html<\/strong> file. We have spent thirty years refining the most resilient, accessible, and lightweight document format in human history, only for a generation of &#8220;full-stack&#8221; developers to decide that what the world really needs is 2.5 megabytes of JavaScript to render a single paragraph of text. <\/p>\n<p>The modern web is a graveyard of intent. We used to build documents; now we build &#8220;experiences&#8221; that take six seconds to hydrate on a mobile device. We\u2019ve traded the elegance of the Document Object Model (DOM) for a Virtual DOM that eats RAM like a starving dog. You aren&#8217;t &#8220;optimizing&#8221; anything with your server-side rendering hacks; you are just trying to fix the problems you created by using a framework that shouldn&#8217;t exist in the first place. Every time you <code>npm install<\/code> a new dependency to handle a hover state, a piece of the original web dies.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_Nextjs_is_a_High-Level_Language_for_People_Who_Hate_Computers\"><\/span>H2: Next.js is a High-Level Language for People Who Hate Computers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The industry has been sold a lie. The lie is that <strong>html<\/strong> is &#8220;just a markup language&#8221; and therefore beneath the dignity of a &#8220;real engineer.&#8221; So, we hide it. We bury it under layers of JSX, TSX, and CSS-in-JS. We treat the browser like a dumb terminal for a remote execution engine. <\/p>\n<p>When you use a framework like Next.js or React, you aren&#8217;t writing for the web. You are writing for a transpiler. You are creating a brittle abstraction that breaks the moment the user\u2019s connection flinches. I remember when we wrote code that worked in Netscape 2.0 and IE3. It didn&#8217;t need a &#8220;build step.&#8221; It didn&#8217;t need a &#8220;hydration phase.&#8221; It just worked because the browser knew how to parse <strong>html<\/strong>. Today, if your JavaScript bundle fails to load, your site is a white screen. That isn&#8217;t progress; it&#8217;s professional malpractice.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Curl_Audit_4_Megabytes_of_Nothing\"><\/span>H2: The Curl Audit: 4 Megabytes of Nothing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let\u2019s look at the reality of a &#8220;modern&#8221; tech <a href=\"https:\/\/itsupportwale.com\/blog\/\" title=\"Read more about blog\">blog<\/a>. I won&#8217;t name names, but this is a popular site built with a &#8220;bleeding edge&#8221; stack. Let\u2019s see what happens when we ask for the headers and the initial payload.<\/p>\n<pre class=\"codehilite\"><code class=\"language-bash\">$ curl -v -I https:\/\/[REDACTED-MODERN-TECH-BLOG].com\n&gt; GET \/ HTTP\/2\n&gt; Host: [REDACTED]\n&gt; User-Agent: curl\/7.68.0\n&gt; Accept: *\/*\n&gt; \n&lt; HTTP\/2 200 \n&lt; content-type: text\/html; charset=utf-8\n&lt; x-powered-by: Next.js\n&lt; cache-control: s-maxage=31536000, stale-while-revalidate\n&lt; content-encoding: gzip\n&lt; vary: Accept-Encoding\n&lt; x-nextjs-cache: HIT\n&lt; date: Tue, 22 May 2024 14:20:01 GMT\n&lt; server: Vercel\n&lt; transfer-encoding: chunked\n<\/code><\/pre>\n<p>Look at that <code>x-powered-by: Next.js<\/code> header. It\u2019s a badge of shame. But let\u2019s look at the actual payload size. When I run a full <code>curl<\/code> and pipe it to a file:<\/p>\n<pre class=\"codehilite\"><code class=\"language-bash\">$ curl -s https:\/\/[REDACTED-MODERN-TECH-BLOG].com | wc -c\n2,458,922\n<\/code><\/pre>\n<p>2.4 megabytes. For a page that contains approximately 1,200 words of text. That is a ratio of roughly 2,000 bytes of overhead for every single byte of actual content. Where is that space going? It\u2019s going to a massive JSON object at the bottom of the page\u2014the <code>__NEXT_DATA__<\/code> script\u2014which contains the entire state of the application, duplicated, because the developers don&#8217;t trust the <strong>html<\/strong> they just sent to the client. It\u2019s going to inline CSS that redefines the meaning of &#8220;padding&#8221; forty-five times. It\u2019s a failure of engineering.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Archeology_of_the_Tag_From_Wilbur_to_the_Living_Standard\"><\/span>H2: The Archeology of the Tag: From Wilbur to the Living Standard<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We have forgotten the lineage of our craft. To understand why modern <strong>html<\/strong> is failing, you have to understand where it came from.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML_32_Wilbur_%E2%80%93_1997\"><\/span>HTML 3.2 (Wilbur) &#8211; 1997<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This was the era of the &#8220;Browser Wars.&#8221; RFC 1866 had given us the basics, but HTML 3.2 was where things got wild. We had <code>&lt;table&gt;<\/code> for layout, because CSS was a fever dream. We had <code>&lt;font&gt;<\/code> tags. We had <code>&lt;u&gt;<\/code>. It was messy, but it was <em>honest<\/em>. You knew exactly what the browser was going to do. The Trident engine (IE) and the Gecko engine (Netscape\/Firefox) were fighting for dominance, but the core of the document was still a document.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML_401_%E2%80%93_1999\"><\/span>HTML 4.01 &#8211; 1999<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The &#8220;Strict&#8221; era. This was the peak of semantic intent before the industry lost its mind. HTML 4.01 tried to separate structure from presentation. It gave us the <code>id<\/code> and <code>class<\/code> attributes as we know them. It tried to kill the <code>&lt;center&gt;<\/code> tag (rightfully so). It was the version that powered the web for a decade. If you couldn&#8217;t build a site in HTML 4.01 Strict, you weren&#8217;t a developer; you were a hobbyist.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML5_The_Living_Standard\"><\/span>HTML5 (The Living Standard)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Then came the WHATWG and the &#8220;Living Standard.&#8221; HTML5 gave us <code>&lt;article&gt;<\/code>, <code>&lt;section&gt;<\/code>, <code>&lt;nav&gt;<\/code>, and <code>&lt;header&gt;<\/code>. These weren&#8217;t just &#8220;new divs.&#8221; They were a gift to accessibility and SEO. They told the browser\u2014and the screen reader\u2014what the content <em>meant<\/em>. <\/p>\n<p>And what did the modern developer do with this gift? They ignored it. They went back to using <code>&lt;div&gt;<\/code> for everything, but this time they wrapped it in a React component called <code>&lt;StyledContainer&gt;<\/code> that compiles down to a <code>&lt;div&gt;<\/code> with a randomized class name like <code>css-18z7x3<\/code>. We have regressed past 1997. At least in 1997, I could read the source code.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_Your_Div_Soup_is_a_Crime_Against_Logic\"><\/span>H2: Your Div Soup is a Crime Against Logic<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let\u2019s perform a post-mortem on a typical &#8220;modern&#8221; navigation component. I see this every day in code reviews. It makes my teeth ache.<\/p>\n<p><strong>The Modern Horror:<\/strong><\/p>\n<pre class=\"codehilite\"><code class=\"language-html\">&lt;div class=&quot;nav-wrapper&quot;&gt;\n  &lt;div class=&quot;nav-container&quot;&gt;\n    &lt;div class=&quot;nav-item-link&quot; onclick=&quot;window.location.href='\/home'&quot;&gt;\n      &lt;span class=&quot;nav-text&quot;&gt;Home&lt;\/span&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;nav-item-link&quot; onclick=&quot;window.location.href='\/about'&quot;&gt;\n      &lt;span class=&quot;nav-text&quot;&gt;About&lt;\/span&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>This is an abomination. You\u2019ve used a <code>div<\/code> with an <code>onclick<\/code> handler. You\u2019ve broken the middle-click (open in new tab). You\u2019ve broken the &#8220;copy link address&#8221; function. You\u2019ve made it invisible to screen readers unless you manually add <code>role=\"button\"<\/code> and <code>tabindex=\"0\"<\/code>, which you won&#8217;t do because you&#8217;re &#8220;moving fast and breaking things.&#8221;<\/p>\n<p><strong>The Semantic Sanity (The HTML Way):<\/strong><\/p>\n<pre class=\"codehilite\"><code class=\"language-html\">&lt;nav&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=&quot;\/home&quot;&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=&quot;\/about&quot;&gt;About&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n<p>The second example is smaller. It\u2019s faster. It\u2019s natively accessible. It works without JavaScript. It uses the <strong>html<\/strong> tags for their intended purpose. But &#8220;engineers&#8221; today think this is too simple. They think they need a &#8220;Link Component&#8221; that tracks analytics, pre-fetches the JSON for the next page, and triggers a transition animation that nobody asked for. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Byte-Size_Difference_A_Technical_Reality_Check\"><\/span>H2: The Byte-Size Difference: A Technical Reality Check<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let&#8217;s talk about the &#8220;Cost of Convenience.&#8221; Developers claim that using <code>div<\/code> elements for everything is faster for development. It isn&#8217;t. It&#8217;s just lazier. And the user pays the price in bytes and battery life.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Element Type<\/th>\n<th style=\"text-align: left;\">Code<\/th>\n<th style=\"text-align: left;\">Bytes (Minified)<\/th>\n<th style=\"text-align: left;\">Accessibility<\/th>\n<th style=\"text-align: left;\">Keyboard Support<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Semantic<\/strong><\/td>\n<td style=\"text-align: left;\"><code>&lt;button&gt;Save&lt;\/button&gt;<\/code><\/td>\n<td style=\"text-align: left;\">21<\/td>\n<td style=\"text-align: left;\">Native<\/td>\n<td style=\"text-align: left;\">Native<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Div Soup<\/strong><\/td>\n<td style=\"text-align: left;\"><code>&lt;div class=\"btn\" onclick=\"save()\"&gt;Save&lt;\/div&gt;<\/code><\/td>\n<td style=\"text-align: left;\">46<\/td>\n<td style=\"text-align: left;\">None<\/td>\n<td style=\"text-align: left;\">None<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>React\/Tailwind<\/strong><\/td>\n<td style=\"text-align: left;\"><code>&lt;div class=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2\" role=\"button\" tabindex=\"0\"&gt;Save&lt;\/div&gt;<\/code><\/td>\n<td style=\"text-align: left;\">148<\/td>\n<td style=\"text-align: left;\">Manual<\/td>\n<td style=\"text-align: left;\">Manual<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Look at that table. The React\/Tailwind version is <strong>7 times larger<\/strong> than the semantic version. And that doesn&#8217;t even include the 50KB of CSS required to make those utility classes work, or the 100KB of JavaScript required to make the <code>div<\/code> behave like a button. You are literally charging your users for your inability to learn the <strong>html<\/strong> specification.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Ghost_of_Tim_Berners-Lee_is_Weeping_Over_Your_Bundle_Size\"><\/span>H2: The Ghost of Tim Berners-Lee is Weeping Over Your Bundle Size<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The original vision of the web was a decentralized web of linked documents. It was built on the principle of &#8220;Graceful Degradation.&#8221; If a browser didn&#8217;t support a feature, it would skip it and show the content anyway.<\/p>\n<p>Modern web development has replaced this with &#8220;Total Failure.&#8221; If your <code>main.js<\/code> bundle gets a 404 because of a CDN hiccup, your user gets nothing. You have built a single point of failure into a system that was designed to be indestructible. <\/p>\n<p>I\u2019ve seen &#8220;landing pages&#8221; that require 12MB of assets to display a headline and an email signup form. I\u2019ve seen memory heaps in Chrome climb to 1GB just to display a dashboard with three charts. This is because you aren&#8217;t using <strong>html<\/strong>; you&#8217;re using the DOM as a canvas for a bloated runtime. You are treating the user&#8217;s CPU like a free resource for your garbage collection.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Deprecated_Graveyard_A_Eulogy_for_the_Tag\"><\/span>H2: The Deprecated Graveyard: A Eulogy for the <code>&lt;font&gt;<\/code> Tag<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I almost miss the <code>&lt;font&gt;<\/code> tag. At least back then, we knew we were being naughty. We knew that putting <code>color=\"#FF0000\"<\/code> inside a tag was a hack. Today, we do the same thing with Tailwind classes\u2014<code>&lt;p class=\"text-red-500\"&gt;<\/code>\u2014and we call it &#8220;Utility-First CSS.&#8221; It\u2019s the same damn thing! We\u2019ve just renamed it and added a build step.<\/p>\n<p>But let\u2019s talk about the tags that actually died. Does anyone remember <code>&lt;dir&gt;<\/code>? It was for directory lists. It was deprecated in HTML 4.01 because <code>&lt;ul&gt;<\/code> did the same thing. What about <code>&lt;applet&gt;<\/code>? It was the precursor to the modern &#8220;SPA&#8221; (Single Page Application) nightmare. We realized that embedding a heavy, proprietary binary (Java) into a document was a bad idea. Yet, here we are in 2024, embedding a heavy, proprietary-feeling JavaScript framework into every page. We didn&#8217;t learn a thing.<\/p>\n<p>And then there\u2019s <code>&lt;center&gt;<\/code>. It was simple. It was effective. We killed it in the name of &#8220;separation of concerns.&#8221; But now, we have developers who can&#8217;t center a <code>div<\/code> without looking up a Flexbox cheat sheet or importing a &#8220;Layout System.&#8221; We traded simplicity for a theoretical purity that we immediately abandoned the moment we started writing CSS inside our JavaScript files.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Obscure_Global_Attributes_Youre_Ignoring\"><\/span>H2: The Obscure Global Attributes You\u2019re Ignoring<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you actually took the time to read the <strong>html<\/strong> Living Standard, you\u2019d find that the browser can do almost everything you\u2019re currently doing with JavaScript.<\/p>\n<p>Take <code>contenteditable<\/code>. You want to build a rich text editor? You don&#8217;t need a 300KB library. You need a container with the <code>contenteditable<\/code> attribute. The browser engine\u2014whether it\u2019s Blink, WebKit, or Gecko\u2014already has a full-featured editing engine built-in. <\/p>\n<p>What about <code>accesskey<\/code>? It allows you to define keyboard shortcuts natively. But no, you\u2019d rather import <code>react-hotkeys<\/code> and add 15KB to your bundle. <\/p>\n<p>What about the <code>details<\/code> and <code>summary<\/code> tags? They provide a native accordion widget. No JavaScript required. It\u2019s accessible by default. It works with the keyboard. But I still see developers building &#8220;Accordion Components&#8221; with <code>useState(false)<\/code> and a bunch of complex logic to toggle a CSS class. Why? Because they don&#8217;t know the platform. They are &#8220;React Developers,&#8221; not &#8220;Web Developers.&#8221;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Accessibility_Tax_Why_Your_%E2%80%98Custom_Component_is_Broken\"><\/span>H2: The Accessibility Tax: Why Your &#8216;Custom Component&#8217; is Broken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When you use a <code>div<\/code> to build a checkbox, you are a thief. You are stealing the user&#8217;s ability to use the web. A real <code>&lt;input type=\"checkbox\"&gt;<\/code> comes with a decade of accessibility refinement. It works with screen readers. It works with high-contrast modes. It works with voice control software.<\/p>\n<p>When you build a &#8220;Custom Checkbox&#8221; using a <code>div<\/code> and some CSS, you have to manually re-implement every single one of those features using ARIA attributes. And you will fail. You will forget <code>aria-checked<\/code>. You will forget to handle the <code>Space<\/code> key. You will forget that some users don&#8217;t use a mouse.<\/p>\n<p>The &#8220;Accessibility Tax&#8221; is the extra work you have to do because you refused to use the correct <strong>html<\/strong> tag. And the tragedy is that most developers just don&#8217;t pay the tax. They ship broken, inaccessible garbage and call it a &#8220;premium UI.&#8221;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Memory_Heap_and_the_Death_of_the_Document\"><\/span>H2: The Memory Heap and the Death of the Document<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let\u2019s talk about the hardware. When I started, we were targeting machines with 8MB of RAM. If your code was inefficient, the computer crashed. Today, we assume the user has a 16-core M3 Max with 64GB of memory. <\/p>\n<p>But the web isn&#8217;t just for people in San Francisco. It\u2019s for someone on a five-year-old Android phone in a rural area with a spotty 3G connection. When you ship a 5MB <strong>html<\/strong> payload (after hydration), you are excluding those people. You are saying that their time and their data plans don&#8217;t matter.<\/p>\n<p>Every node you add to the DOM has a memory cost. Every event listener you attach has a cost. When you use a framework that re-renders the entire tree because a user typed one character into a text box, you are burning CPU cycles for no reason. The browser&#8217;s parser is highly optimized. It can stream <strong>html<\/strong> and render it as it arrives. But your JavaScript-heavy site can&#8217;t do that. It has to wait for the whole bundle to download, then it has to parse the JS, then it has to execute the JS, then it has to fetch the data, and <em>then<\/em> it can finally show the user the text they came for.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_A_Call_for_Semantic_Sanity\"><\/span>H2: A Call for Semantic Sanity<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It is time to stop the madness. It is time to return to a &#8220;Markup-First&#8221; mentality. <\/p>\n<ol>\n<li><strong>Start with the Document:<\/strong> Write your content in pure, semantic <strong>html<\/strong>. Use <code>&lt;header&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;article&gt;<\/code>, and <code>&lt;section&gt;<\/code>. If it doesn&#8217;t look right, use CSS. If it doesn&#8217;t have the right behavior, use a <em>tiny<\/em> bit of JavaScript.<\/li>\n<li><strong>Kill the Frameworks:<\/strong> You don&#8217;t need React for a marketing site. You don&#8217;t need Next.js for a blog. You need a static site generator at most, and even then, you should be questioning every byte of JavaScript that makes it into the final build.<\/li>\n<li><strong>Respect the User:<\/strong> Every byte you send is a liability. Every script you include is a security risk and a performance bottleneck. <\/li>\n<li><strong>Learn the Spec:<\/strong> Stop reading &#8220;Top 10 React Hooks&#8221; articles and start reading the MDN documentation for <strong>html<\/strong> elements. Learn what <code>dl<\/code>, <code>dt<\/code>, and <code>dd<\/code> are for. Learn how to use <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code>. <\/li>\n<\/ol>\n<p>The web was designed to be a resilient, open, and accessible platform. We have turned it into a bloated, fragile mess of competing abstractions. The &#8220;Bloat&#8221; isn&#8217;t an accident; it\u2019s a choice. It\u2019s a choice made by developers who value their own &#8220;developer experience&#8221; over the actual experience of the people using their software.<\/p>\n<p>I\u2019ve been building for this platform since 1994. I\u2019ve seen technologies come and go. I\u2019ve seen Flash rise and fall. I\u2019ve seen the rise of jQuery and the death of Silverlight. And I am telling you: the current path is unsustainable. We are building on sand. <\/p>\n<p>Go back to the basics. Open a text editor. Write an <code>index.html<\/code> file. No build step. No <code>node_modules<\/code>. Just tags and content. Feel the speed. Observe the simplicity. That is the web we were supposed to have. That is the web we need to fight for.<\/p>\n<p>The ghost of Tim Berners-Lee isn&#8217;t just weeping; he&#8217;s probably wondering why he bothered in the first place. Stop building &#8220;apps&#8221; and start building documents again. Your users\u2014and your memory heap\u2014will thank you. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"H2_The_Final_Insult_The_Head_Element\"><\/span>H2: The Final Insult: The Head Element<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I can&#8217;t finish this without mentioning the <code>&lt;head&gt;<\/code> element. In a sane world, the head contains a title, some metadata, and a link to a stylesheet. In the modern world, the head is a 500-line dumping ground for tracking scripts, tag managers, polyfills for browsers that died a decade ago, and inline CSS that looks like a cat walked across the keyboard.<\/p>\n<p>I&#8217;ve seen <code>&lt;head&gt;<\/code> sections that are larger than the entire <code>&lt;body&gt;<\/code>. We are loading Facebook&#8217;s tracking pixel, Google&#8217;s analytics, Hotjar&#8217;s heatmaps, and four different &#8220;cookie consent&#8221; scripts before we even show the user a single pixel of content. This is the ultimate betrayal of the <strong>html<\/strong> philosophy. We have turned the document into a surveillance device that happens to display text as a side effect.<\/p>\n<p>If your <code>&lt;head&gt;<\/code> is more than 20 lines long, you&#8217;ve failed. If you have more than two <code>&lt;script&gt;<\/code> tags, you&#8217;re being lazy. If you&#8217;re using a &#8220;Tag Manager&#8221; to inject more bloat without telling the developers, you&#8217;re part of the problem.<\/p>\n<p>The web is a document. Treat it like one. Use <strong>html<\/strong> as it was intended. Anything else is just expensive noise. Now, if you&#8217;ll excuse me, I have some hand-coded tables to optimize for a 14.4k modem. At least back then, we knew how to fit a whole world into 64 kilobytes. You can&#8217;t even fit a favicon into that today. Pathetic.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Bloat is a Choice: A Return to Semantic Sanity Next.js is a cancer. There, I said it. It is a bloated, over-engineered, glorified wrapper for people who are too terrified to look at a raw html file. We have spent thirty years refining the most resilient, accessible, and lightweight document format in human history, &#8230; <a title=\"Master HTML: The Ultimate Guide for Beginners\" class=\"read-more\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\" aria-label=\"Read more  on Master HTML: The Ultimate Guide for Beginners\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4792","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Master HTML: The Ultimate Guide for Beginners - ITSupportWale<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Master HTML: The Ultimate Guide for Beginners - ITSupportWale\" \/>\n<meta property=\"og:description\" content=\"The Bloat is a Choice: A Return to Semantic Sanity Next.js is a cancer. There, I said it. It is a bloated, over-engineered, glorified wrapper for people who are too terrified to look at a raw html file. We have spent thirty years refining the most resilient, accessible, and lightweight document format in human history, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"ITSupportWale\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Itsupportwale-298547177495978\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-18T17:34:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2021\/05\/android-chrome-512x512-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Techie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Techie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\"},\"author\":{\"name\":\"Techie\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d\"},\"headline\":\"Master HTML: The Ultimate Guide for Beginners\",\"datePublished\":\"2026-05-18T17:34:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\"},\"wordCount\":2564,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\",\"url\":\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\",\"name\":\"Master HTML: The Ultimate Guide for Beginners - ITSupportWale\",\"isPartOf\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#website\"},\"datePublished\":\"2026-05-18T17:34:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/itsupportwale.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Master HTML: The Ultimate Guide for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#website\",\"url\":\"https:\/\/itsupportwale.com\/blog\/\",\"name\":\"ITSupportWale\",\"description\":\"Tips, Tricks, Fixed-Errors, Tutorials &amp; Guides\",\"publisher\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/itsupportwale.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#organization\",\"name\":\"itsupportwale\",\"url\":\"https:\/\/itsupportwale.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png\",\"contentUrl\":\"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png\",\"width\":1119,\"height\":144,\"caption\":\"itsupportwale\"},\"image\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Itsupportwale-298547177495978\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d\",\"name\":\"Techie\",\"sameAs\":[\"https:\/\/itsupportwale.com\",\"iswblogadmin\"],\"url\":\"https:\/\/itsupportwale.com\/blog\/author\/iswblogadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Master HTML: The Ultimate Guide for Beginners - ITSupportWale","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:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"Master HTML: The Ultimate Guide for Beginners - ITSupportWale","og_description":"The Bloat is a Choice: A Return to Semantic Sanity Next.js is a cancer. There, I said it. It is a bloated, over-engineered, glorified wrapper for people who are too terrified to look at a raw html file. We have spent thirty years refining the most resilient, accessible, and lightweight document format in human history, ... Read more","og_url":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/","og_site_name":"ITSupportWale","article_publisher":"https:\/\/www.facebook.com\/Itsupportwale-298547177495978","article_published_time":"2026-05-18T17:34:14+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2021\/05\/android-chrome-512x512-1.png","type":"image\/png"}],"author":"Techie","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Techie","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#article","isPartOf":{"@id":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/"},"author":{"name":"Techie","@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d"},"headline":"Master HTML: The Ultimate Guide for Beginners","datePublished":"2026-05-18T17:34:14+00:00","mainEntityOfPage":{"@id":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/"},"wordCount":2564,"commentCount":0,"publisher":{"@id":"https:\/\/itsupportwale.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/","url":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/","name":"Master HTML: The Ultimate Guide for Beginners - ITSupportWale","isPartOf":{"@id":"https:\/\/itsupportwale.com\/blog\/#website"},"datePublished":"2026-05-18T17:34:14+00:00","breadcrumb":{"@id":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/itsupportwale.com\/blog\/master-html-the-ultimate-guide-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itsupportwale.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Master HTML: The Ultimate Guide for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/itsupportwale.com\/blog\/#website","url":"https:\/\/itsupportwale.com\/blog\/","name":"ITSupportWale","description":"Tips, Tricks, Fixed-Errors, Tutorials &amp; Guides","publisher":{"@id":"https:\/\/itsupportwale.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itsupportwale.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/itsupportwale.com\/blog\/#organization","name":"itsupportwale","url":"https:\/\/itsupportwale.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png","contentUrl":"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png","width":1119,"height":144,"caption":"itsupportwale"},"image":{"@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Itsupportwale-298547177495978"]},{"@type":"Person","@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d","name":"Techie","sameAs":["https:\/\/itsupportwale.com","iswblogadmin"],"url":"https:\/\/itsupportwale.com\/blog\/author\/iswblogadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/posts\/4792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/comments?post=4792"}],"version-history":[{"count":0,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/posts\/4792\/revisions"}],"wp:attachment":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/media?parent=4792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/categories?post=4792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/tags?post=4792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}