{"id":11883,"date":"2026-05-31T14:32:43","date_gmt":"2026-05-31T14:32:43","guid":{"rendered":"https:\/\/www.web-ai-institute.com\/wp\/2026\/05\/31\/the-only-html-tutorial-that-teaches-you-how-the-internet-works\/"},"modified":"2026-05-31T14:32:44","modified_gmt":"2026-05-31T14:32:44","slug":"the-only-html-tutorial-that-teaches-you-how-the-internet-works","status":"publish","type":"post","link":"https:\/\/www.web-ai-institute.com\/wp\/2026\/05\/31\/the-only-html-tutorial-that-teaches-you-how-the-internet-works\/","title":{"rendered":"The Only HTML Tutorial That Teaches You How the Internet Works"},"content":{"rendered":"<p><iframe loading=\"lazy\"  width=\"800\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/8CWh2GXNQ-k?modestbranding=1\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<br \/>Most HTML tutorials hand you a list of tags. This one builds HTML from scratch \u2014 so every tag makes sense before you type it.<\/p>\n<p>You&#8217;ll leave understanding not just HTML, but the internet itself: IP addresses, DNS, HTTP, and how a webpage actually travels from a server to your screen. The web half isn&#8217;t a footnote \u2014 it&#8217;s half the video.<\/p>\n<p>\ud83d\udee0\ufe0f Never used VS Code before? Set it up here first: https:\/\/www.youtube.com\/watch?v=PTMv5uEHqvU&#038;t=860s<\/p>\n<p>&#8212;<\/p>\n<p>What you&#8217;ll learn:<\/p>\n<p>\ud83e\uddf1 Inventing HTML Before Using It<br \/>\nWe don&#8217;t start with tags. We start with the problem tags were invented to solve \u2014 a publisher drowning in unstructured manuscripts. Once you feel that problem, every HTML concept (nesting, attributes, structure) arrives as the obvious solution.<\/p>\n<p>\u270d\ufe0f HTML Text Tags \u2014 The Google Docs Way<br \/>\nWe put Google Docs on one side, a code editor on the other. Every button you already know \u2014 bold, italic, heading \u2014 becomes the HTML tag that creates it. You stop guessing and start predicting.<\/p>\n<p>\ud83c\udfd7\ufe0f Semantic HTML: Meaning vs Style<br \/>\nstrong and b both look bold. Only one means something. You&#8217;ll understand why that difference matters \u2014 for accessibility, screen readers, and writing HTML that actually communicates.<\/p>\n<p>\ud83c\udf10 How the Web Actually Works<br \/>\nIP addresses, DNS, HTTP requests and responses \u2014 explained from first principles. We send raw HTTP requests by hand, watch DNS propagate across the globe live, and see exactly what your browser does in secret.<\/p>\n<p>&#8212;<\/p>\n<p>\u23f1\ufe0f Chapters<\/p>\n<p>0:00:00 Intro: Why Most HTML Tutorials Get It Wrong<br \/>\n0:02:03 What HTML Tags Are And Why They Exist<br \/>\n0:08:13 Nested Tags and DOCTYPE: Parent-Child Tags<br \/>\n0:13:47 Lists and Attributes: Container Tags and Metadata<br \/>\n0:19:28 HTML Document Structure: Head, Body, and Logical Grouping<br \/>\n0:23:42 Your First HTML Document: Seeing the Patterns<br \/>\n0:27:53 MDN, Validator, and How to Use Docs<br \/>\n0:34:41 Your First HTML Text: p, h1\u2013h6<br \/>\n0:37:43 Pattern Behind HTML Tag Names (b, i, u, s, sub, sup, mark)<br \/>\n0:45:08 Whitespace, Line Breaks (br), and Standalone Tags (hr)<br \/>\n0:51:41 Semantic vs Generic Tags: HTML Captures Meaning, Not Style<br \/>\n1:03:13 Semantic vs Generic Tags: The Pattern Repeats (em, i, and More)<br \/>\n1:07:19 HTML Structural Elements: header, main, footer, nav, aside, section<br \/>\n1:12:21 Block vs Inline Elements: div, span<br \/>\n1:17:50 HTML Lists: ul, ol, dl<br \/>\n1:24:51 Nested Lists: Sub-List Within an Item<br \/>\n1:27:49 HTML Tables: tr, th, td, thead, tbody, tfoot<br \/>\n1:36:30 Merging Table Cells: rowspan and colspan<br \/>\n1:40:25 The HTML Validator: Errors, Warnings, and Info<br \/>\n1:45:59 Who&#8217;s Behind HTML? WHATWG, the Living Standard, and MDN<br \/>\n1:53:36 Can I Use &#8220;X&#8221;? Browser Support, Deprecated and Experimental Tags<br \/>\n1:58:10 HTML Text Elements: A Tour of Every Textual Tag<br \/>\n2:02:13 HTML Entities: Unicode &#038; Special Characters in HTML<br \/>\n2:09:35 HTML img Tag &#038; the Rabbit Hole It Opens (Internet!)<br \/>\n2:12:47 The Internet: Real Cables, Real Computers, Real Connections<br \/>\n2:17:21 IP Address: Give Every Computer a Number<br \/>\n2:22:57 Domain Names and DNS: Use Names Instead of IP Addresses<br \/>\n2:31:06 Buy a Domain, Set It Up, and Watch It Spread Worldwide (For Real)<br \/>\n2:37:45 HTTP &#038; Protocols: Choosing a Language Both Computers Can Understand<br \/>\n2:41:16 HTTP Follows the Pattern You Already Know (BTML \u2192 HTML \u2192 HTTP)<br \/>\n2:48:38 HTTP Message: Start Line, Headers, and Body (Familiar?)<br \/>\n2:51:55 HTTP Requests: You Ask a Server to Do Something<br \/>\n2:56:26 HTTP Responses: The Server Replies Back with Result<br \/>\n3:01:09 Just Watch: Sending Raw HTTP Requests to Servers (No Browser)<br \/>\n3:09:08 Your Turn: Send HTTP Requests with reqbin Online Tool<br \/>\n3:12:13 Keep Going: Ports, HTTPS, Local Server, URLs, Paths, Forms, and More<\/p>\n<p>&#8212;<\/p>\n<p>\ud83d\udd17 Resources<\/p>\n<p>\ud83c\udf93 Full HTML &#038; Web Course (continues from here): https:\/\/www.udemy.com\/course\/html-web-conceptual-guide\/?referralCode=B34895D5626BBE5F3842<br \/>\n\ud83d\udcbb Starter files: https:\/\/github.com\/KianAttar\/html-internet-web-starter-files\/archive\/refs\/heads\/main.zip<br \/>\n\ud83d\udcd6 BTML Docs (the invented markup language from this video): https:\/\/kianattar.github.io\/btml-docs\/#\/docs<br \/>\n\ud83d\udee0\ufe0f New to VS Code? Set it up here first: https:\/\/www.youtube.com\/watch?v=PTMv5uEHqvU&#038;t=860s<\/p>\n<p>&#8212;<\/p>\n<p>\ud83d\udc4b About KianCode<\/p>\n<p>I&#8217;m Kian. I dropped out of veterinary school in 2022 and switched to Computer Science at age 24, starting from zero. I know what it feels like to stare at a tutorial and understand nothing. Every video on this channel is built around one idea: concepts before syntax, reasons before rules. No memorization. No jargon.<\/p>\n<p>If something clicked for you in this video, drop it in the comments \u2014 And subscribe if you want more like this.<\/p>\n<p>\ud83d\udcfa Subscribe: https:\/\/www.youtube.com\/@KianCodes<br \/>\n\ud83d\udcf8 Instagram: https:\/\/instagram.com\/kiancode.dev<br \/>\n\u2615 Buy me a coffee: https:\/\/buymeacoffee.com\/kianattar<\/p>\n<p>&#8212;<\/p>\n<p>#HTML #WebDevelopment #HTMLTutorial #HowTheInternetWorks #HTTP #DNS #KianCode #HTMLCourse #LearnHTML<br \/>\n<br \/><a href=\"https:\/\/www.youtube.com\/watch?v=8CWh2GXNQ-k\">source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most HTML tutorials hand you a list of tags. This one builds HTML from scratch \u2014 so every tag makes sense before you type it. You&#8217;ll leave understanding not just HTML, but the internet itself: IP addresses, DNS, HTTP, and how a webpage actually travels from a server to your screen. The web half isn&#8217;t&#8230;<\/p>\n","protected":false},"author":1348,"featured_media":11884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[338],"tags":[337,336],"class_list":["post-11883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css-tutorial","tag-html-tutorial"],"_links":{"self":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts\/11883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/users\/1348"}],"replies":[{"embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/comments?post=11883"}],"version-history":[{"count":1,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts\/11883\/revisions"}],"predecessor-version":[{"id":11885,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts\/11883\/revisions\/11885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/media\/11884"}],"wp:attachment":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/media?parent=11883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/categories?post=11883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/tags?post=11883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}