[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:html-video-embedding-native-player":35,"course-tree":116},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},{"id":37,"title":38,"slug":39,"content":40,"course":41,"subcategory":43,"author":46,"reading_time_minutes":12,"cornerstone":52,"schema_type":53,"faq_json":5,"video_url":5,"canonical_url":54,"meta_title":55,"meta_description":56,"og_image":5,"toc_json":57,"code_examples":87,"quiz":5,"exercises":99,"published_at":5,"updated_at":107,"prev":108,"next":112},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player","\u003Ch2 id=\"html-video-embedding-with-the-native-player\">HTML Video Embedding with the Native Player\u003C\u002Fh2>\u003Cp>The \u003Cstrong>HTML video tag\u003C\u002Fstrong> (our focus keyword) — \u003Ccode><video>\u003C\u002Fcode> — is the standard way to embed self-hosted video content directly in a webpage, without Flash or a third-party plug-in. It ships with a built-in player UI (play\u002Fpause, volume, fullscreen, scrubber) that every modern browser renders natively, making it fast, secure, and mobile-friendly.\u003C\u002Fp>\u003Ch3 id=\"basic-syntax\">Basic Syntax\u003C\u002Fh3>\u003Cp>At minimum, the video tag needs a \u003Ccode>src\u003C\u002Fcode> (or nested \u003Ccode><source>\u003C\u002Fcode> tags) and the \u003Ccode>controls\u003C\u002Fcode> attribute so users can interact with it:\u003C\u002Fp>\u003Cpre>\u003Ccode><video src=\"movie.mp4\" controls><\u002Fvideo>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"key-attributes\">Key Attributes\u003C\u002Fh3>\u003Cul>\n\u003Cli>\u003Cstrong>controls\u003C\u002Fstrong> — shows the native play\u002Fpause\u002Fvolume UI.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>autoplay\u003C\u002Fstrong> — starts playback automatically (most browsers require \u003Ccode>muted\u003C\u002Fcode> alongside this for autoplay to work).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>loop\u003C\u002Fstrong> — replays the video automatically when it ends.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>muted\u003C\u002Fstrong> — starts the video with sound off.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>poster\u003C\u002Fstrong> — an image shown before playback starts.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>preload\u003C\u002Fstrong> — hints whether the browser should preload none, metadata, or the full video.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>width\u003C\u002Fstrong> \u002F \u003Cstrong>height\u003C\u002Fstrong> — sets the player's display dimensions.\u003C\u002Fli>\n\u003C\u002Ful>\u003Ch3 id=\"multiple-sources-for-cross-browser-compatibility\">Multiple Sources for Cross-Browser Compatibility\u003C\u002Fh3>\u003Cp>Not every browser supports every video codec. The safest, most future-proof approach — a trending best practice — is to nest several \u003Ccode><source>\u003C\u002Fcode> elements inside \u003Ccode><video>\u003C\u002Fcode>, ordered from most to least preferred, so the browser automatically plays the first format it can decode.\u003C\u002Fp>\u003Ch3 id=\"captions-and-accessibility-with-track\">Captions and Accessibility with <track>\u003C\u002Fh3>\u003Cp>Adding a \u003Ccode><track>\u003C\u002Fcode> element with a WebVTT (.vtt) file provides captions or subtitles, which is essential for accessibility compliance (WCAG) and also helps with SEO since search engines can index caption text.\u003C\u002Fp>\u003Ch3 id=\"responsive-video\">Responsive Video\u003C\u002Fh3>\u003Cp>To make video scale fluidly on any screen size, set \u003Ccode>width: 100%; height: auto;\u003C\u002Fcode> in CSS, or wrap the video in a container with a fixed aspect ratio using the modern \u003Ccode>aspect-ratio\u003C\u002Fcode> CSS property.\u003C\u002Fp>\u003Ch3 id=\"controlling-video-with-javascript\">Controlling Video with JavaScript\u003C\u002Fh3>\u003Cp>The HTMLMediaElement API exposes methods like \u003Ccode>play()\u003C\u002Fcode>, \u003Ccode>pause()\u003C\u002Fcode>, and properties like \u003Ccode>currentTime\u003C\u002Fcode> and \u003Ccode>volume\u003C\u002Fcode>, letting you build fully custom player controls in JavaScript.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><video width='640' height='360' controls poster='thumbnail.jpg' preload='metadata'>\n  <source src='demo.mp4' type='video\u002Fmp4'>\n  <source src='demo.webm' type='video\u002Fwebm'>\n  <track src='captions_en.vtt' kind='captions' srclang='en' label='English' default>\n  Sorry, your browser does not support embedded videos.\n<\u002Fvideo>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* Make the video scale responsively inside any container *\u002F\nvideo {\n  width: 100%;\n  height: auto;\n  max-width: 800px;\n  border-radius: 8px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>\u002F\u002F Build simple custom controls using the HTMLMediaElement API\nconst vid = document.querySelector('video');\nconst playBtn = document.getElementById('playBtn');\n\nplayBtn.addEventListener('click', () => {\n  if (vid.paused) {\n    vid.play();\n    playBtn.textContent = 'Pause';\n  } else {\n    vid.pause();\n    playBtn.textContent = 'Play';\n  }\n});\n\nvid.addEventListener('timeupdate', () => {\n  console.log('Current time:', vid.currentTime.toFixed(1), 's');\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":15,"slug":42},"html-tutorial",{"name":44,"slug":45},"Multimedia","multimedia",{"slug":47,"display_name":48,"job_title":5,"short_bio":5,"expertise_tags":49,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":50,"posts":51},"badar-khalil","Badar Khalil",[],[],[],false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-video-embedding-native-player","HTML Video Tag: Native Video Embedding Guide","Master the HTML video tag — attributes, multiple sources, captions, responsive video, and JavaScript control — with live code examples.",[58],{"id":59,"text":60,"level":12,"children":61},"html-video-embedding-with-the-native-player","HTML Video Embedding with the Native Player",[62,67,71,75,79,83],{"id":63,"text":64,"level":65,"children":66},"basic-syntax","Basic Syntax",3,[],{"id":68,"text":69,"level":65,"children":70},"key-attributes","Key Attributes",[],{"id":72,"text":73,"level":65,"children":74},"multiple-sources-for-cross-browser-compatibility","Multiple Sources for Cross-Browser Compatibility",[],{"id":76,"text":77,"level":65,"children":78},"captions-and-accessibility-with-track","Captions and Accessibility with \u003Ctrack>",[],{"id":80,"text":81,"level":65,"children":82},"responsive-video","Responsive Video",[],{"id":84,"text":85,"level":65,"children":86},"controlling-video-with-javascript","Controlling Video with JavaScript",[],[88,92,95],{"id":89,"language":16,"code":90,"is_editable":91},126,"\u003Cvideo width='640' height='360' controls poster='thumbnail.jpg' preload='metadata'>\n  \u003Csource src='demo.mp4' type='video\u002Fmp4'>\n  \u003Csource src='demo.webm' type='video\u002Fwebm'>\n  \u003Ctrack src='captions_en.vtt' kind='captions' srclang='en' label='English' default>\n  Sorry, your browser does not support embedded videos.\n\u003C\u002Fvideo>",true,{"id":93,"language":10,"code":94,"is_editable":91},127,"\u002F* Make the video scale responsively inside any container *\u002F\nvideo {\n  width: 100%;\n  height: auto;\n  max-width: 800px;\n  border-radius: 8px;\n}",{"id":96,"language":97,"code":98,"is_editable":91},128,"javascript","\u002F\u002F Build simple custom controls using the HTMLMediaElement API\nconst vid = document.querySelector('video');\nconst playBtn = document.getElementById('playBtn');\n\nplayBtn.addEventListener('click', () => {\n  if (vid.paused) {\n    vid.play();\n    playBtn.textContent = 'Pause';\n  } else {\n    vid.pause();\n    playBtn.textContent = 'Play';\n  }\n});\n\nvid.addEventListener('timeupdate', () => {\n  console.log('Current time:', vid.currentTime.toFixed(1), 's');\n});",[100],{"id":101,"title":102,"slug":103,"prompt":104,"starter_code":105,"expected_output":106,"language":16,"order_index":23},56,"Build a Responsive Video Player","build-a-responsive-video-player","Create a \u003Cvideo> element that includes: two \u003Csource> tags (mp4 and webm), a poster image, the controls attribute, and CSS so the video is fully responsive (100% width, auto height).","\u003Cvideo>\n  \u003C!-- add your source tags here -->\n\u003C\u002Fvideo>\n\n\u003Cstyle>\n\u002F* add responsive CSS here *\u002F\n\u003C\u002Fstyle>","A \u003Cvideo> tag with controls, poster, two \u003Csource> children, and CSS setting width:100%; height:auto;","2026-09-27T18:30:54+00:00",{"id":109,"slug":110,"title":111},57,"html-media-overview","HTML Media Overview",{"id":113,"slug":114,"title":115},59,"html-audio-embedding","HTML Audio Embedding",{"data":117},[118],{"id":23,"name":15,"slug":42,"icon":5,"icon_url":5,"short_description":119,"meta_title":120,"meta_description":121,"og_image":122,"locale":123,"subcategories":124},"Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[125,150,186,210,286,320,333,350,374,390],{"id":23,"name":126,"slug":127,"order_index":23,"topics":128},"HTML Fundamentals & Setup","html-fundamentals-setup",[129,132,135,138,142,146],{"id":23,"title":130,"slug":131,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":12,"title":133,"slug":134,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":65,"title":136,"slug":137,"order_index":65,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":139,"title":140,"slug":141,"order_index":139,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":143,"title":144,"slug":145,"order_index":143,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":147,"title":148,"slug":149,"order_index":147,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":151,"slug":152,"order_index":12,"topics":153},"Text & Content Basics","text-content-basics",[154,158,162,166,170,174,178,182],{"id":155,"title":156,"slug":157,"order_index":155,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":159,"title":160,"slug":161,"order_index":159,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":163,"title":164,"slug":165,"order_index":163,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":183,"title":184,"slug":185,"order_index":183,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":65,"name":187,"slug":188,"order_index":65,"topics":189},"Links, Media & Navigation","links-media-navigation",[190,194,198,202,206],{"id":191,"title":192,"slug":193,"order_index":191,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":195,"title":196,"slug":197,"order_index":195,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":199,"title":200,"slug":201,"order_index":199,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":203,"title":204,"slug":205,"order_index":203,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":207,"title":208,"slug":209,"order_index":207,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":139,"name":211,"slug":212,"order_index":139,"topics":213},"Structuring Content","structuring-content",[214,219,224,229,234,238,242,246,250,254,258,262,266,270,274,278,282],{"id":215,"title":216,"slug":217,"order_index":218,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":220,"title":221,"slug":222,"order_index":223,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":225,"title":226,"slug":227,"order_index":228,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":230,"title":231,"slug":232,"order_index":233,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":235,"title":236,"slug":237,"order_index":215,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":239,"title":240,"slug":241,"order_index":220,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":243,"title":244,"slug":245,"order_index":225,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":247,"title":248,"slug":249,"order_index":230,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":251,"title":252,"slug":253,"order_index":235,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":255,"title":256,"slug":257,"order_index":239,"cornerstone":52,"reading_time_minutes":65},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":259,"title":260,"slug":261,"order_index":243,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":263,"title":264,"slug":265,"order_index":247,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":267,"title":268,"slug":269,"order_index":251,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":271,"title":272,"slug":273,"order_index":271,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":275,"title":276,"slug":277,"order_index":275,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":279,"title":280,"slug":281,"order_index":279,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":283,"title":284,"slug":285,"order_index":283,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":155,"name":287,"slug":288,"order_index":143,"topics":289},"Forms & User Input","forms-user-input",[290,295,300,305,310,315],{"id":291,"title":292,"slug":293,"order_index":294,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":296,"title":297,"slug":298,"order_index":299,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":301,"title":302,"slug":303,"order_index":304,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":306,"title":307,"slug":308,"order_index":309,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":311,"title":312,"slug":313,"order_index":314,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":316,"title":317,"slug":318,"order_index":319,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":159,"name":321,"slug":322,"order_index":147,"topics":323},"Graphics & Visuals","graphics-visuals",[324,329],{"id":325,"title":326,"slug":327,"order_index":328,"cornerstone":52,"reading_time_minutes":65},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":101,"title":330,"slug":331,"order_index":332,"cornerstone":52,"reading_time_minutes":65},"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":163,"name":44,"slug":45,"order_index":155,"topics":334},[335,337,339,341,346],{"id":109,"title":111,"slug":110,"order_index":336,"cornerstone":52,"reading_time_minutes":12},45,{"id":37,"title":38,"slug":39,"order_index":338,"cornerstone":52,"reading_time_minutes":12},46,{"id":113,"title":115,"slug":114,"order_index":340,"cornerstone":52,"reading_time_minutes":12},47,{"id":342,"title":343,"slug":344,"order_index":345,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":347,"title":348,"slug":349,"order_index":291,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":167,"name":351,"slug":352,"order_index":159,"topics":353},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[354,358,362,366,370],{"id":355,"title":356,"slug":357,"order_index":296,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":359,"title":360,"slug":361,"order_index":301,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":363,"title":364,"slug":365,"order_index":306,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":367,"title":368,"slug":369,"order_index":311,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":371,"title":372,"slug":373,"order_index":316,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":171,"name":375,"slug":376,"order_index":163,"topics":377},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[378,382,386],{"id":379,"title":380,"slug":381,"order_index":325,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":383,"title":384,"slug":385,"order_index":101,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":387,"title":388,"slug":389,"order_index":109,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":175,"name":391,"slug":392,"order_index":167,"topics":393},"Reference & Practice","reference-practice",[394,398,402,406,410,414,418,422],{"id":395,"title":396,"slug":397,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":399,"title":400,"slug":401,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":403,"title":404,"slug":405,"order_index":65,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":407,"title":408,"slug":409,"order_index":139,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":411,"title":412,"slug":413,"order_index":143,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":415,"title":416,"slug":417,"order_index":147,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":419,"title":420,"slug":421,"order_index":155,"cornerstone":52,"reading_time_minutes":65},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":423,"title":424,"slug":425,"order_index":159,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises"]