[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:html-svg-scalable-vector-graphics":35,"course-tree":120},{"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":52,"cornerstone":53,"schema_type":54,"faq_json":5,"video_url":5,"canonical_url":55,"meta_title":56,"meta_description":57,"og_image":5,"toc_json":58,"code_examples":91,"quiz":5,"exercises":103,"published_at":5,"updated_at":111,"prev":112,"next":116},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics","\u003Ch1 id=\"html-svg-scalable-vector-graphics\">HTML SVG (Scalable Vector Graphics)\u003C\u002Fh1>\u003Cp>\u003Cstrong>SVG\u003C\u002Fstrong> (Scalable Vector Graphics) is an XML-based markup language for drawing 2D graphics that stay perfectly crisp at any zoom level or screen size — a huge advantage for responsive, high-DPI, and dark\u002Flight-theme-aware modern websites.\u003C\u002Fp>\u003Ch2 id=\"what-makes-svg-different-from-canvas\">What Makes SVG Different from Canvas?\u003C\u002Fh2>\u003Cp>Unlike Canvas (pixel-based, drawn imperatively with JavaScript), SVG is \u003Cstrong>vector-based\u003C\u002Fstrong> and lives directly in the DOM as real HTML elements. This means every shape can be styled with CSS, animated with CSS transitions, selected with \u003Ccode>document.querySelector\u003C\u002Fcode>, and given event listeners like any other HTML element — a major reason SVG is trending for icon systems, logos, and interactive data dashboards.\u003C\u002Fp>\u003Ch2 id=\"basic-svg-syntax\">Basic SVG Syntax\u003C\u002Fh2>\u003Cp>An SVG image starts with the \u003Ccode><svg>\u003C\u002Fcode> tag, which defines a coordinate system using the \u003Ccode>viewBox\u003C\u002Fcode> attribute for responsive scaling.\u003C\u002Fp>\u003Cpre>\u003Ccode><svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"dodgerblue\" \u002F>\n<\u002Fsvg>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"common-svg-shape-elements\">Common SVG Shape Elements\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode><rect>\u003C\u002Fcode> — rectangles, with optional \u003Ccode>rx\u003C\u002Fcode>\u002F\u003Ccode>ry\u003C\u002Fcode> for rounded corners\u003C\u002Fli>\u003Cli>\u003Ccode><circle>\u003C\u002Fcode> — circles using \u003Ccode>cx\u003C\u002Fcode>, \u003Ccode>cy\u003C\u002Fcode>, \u003Ccode>r\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode><ellipse>\u003C\u002Fcode> — ovals using \u003Ccode>rx\u003C\u002Fcode> and \u003Ccode>ry\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode><line>\u003C\u002Fcode> — a straight line between two points\u003C\u002Fli>\u003Cli>\u003Ccode><polygon>\u003C\u002Fcode> — a closed multi-sided shape from a list of points\u003C\u002Fli>\u003Cli>\u003Ccode><path>\u003C\u002Fcode> — the most powerful element, drawing any custom shape using path commands\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode><rect x=\"10\" y=\"10\" width=\"120\" height=\"80\" rx=\"15\" fill=\"tomato\" \u002F>\n<polygon points=\"100,10 150,190 50,190\" fill=\"gold\" \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"the-path-element-and-d-attribute\">The path Element and d Attribute\u003C\u002Fh2>\u003Cp>The \u003Ccode><path>\u003C\u002Fcode> element uses a compact mini-language in its \u003Ccode>d\u003C\u002Fcode> attribute: \u003Ccode>M\u003C\u002Fcode> (move to), \u003Ccode>L\u003C\u002Fcode> (line to), \u003Ccode>C\u003C\u002Fcode> (curve), and \u003Ccode>Z\u003C\u002Fcode> (close path) are the most common commands. This is the foundation of nearly every custom icon set used on modern websites.\u003C\u002Fp>\u003Cpre>\u003Ccode><path d=\"M10 10 L90 10 L50 90 Z\" fill=\"seagreen\" \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"gradients-and-fills-trending-modern-gradient-ui\">Gradients and Fills (Trending: Modern Gradient UI)\u003C\u002Fh2>\u003Cp>\u003Cstrong>Linear and radial gradients\u003C\u002Fstrong> are heavily trending in 2026 UI design. SVG supports rich gradients defined once and reused across shapes.\u003C\u002Fp>\u003Cpre>\u003Ccode><svg width=\"200\" height=\"100\">\n  <defs>\n    <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n      <stop offset=\"0%\" style=\"stop-color:#6a11cb\" \u002F>\n      <stop offset=\"100%\" style=\"stop-color:#2575fc\" \u002F>\n    <\u002FlinearGradient>\n  <\u002Fdefs>\n  <rect width=\"200\" height=\"100\" fill=\"url(#grad1)\" \u002F>\n<\u002Fsvg>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"styling-svg-with-css\">Styling SVG with CSS\u003C\u002Fh2>\u003Cp>Because SVG elements live in the DOM, you can style and even animate them directly with regular CSS — including hover effects, a very common pattern for interactive icon buttons.\u003C\u002Fp>\u003Cpre>\u003Ccode>svg circle:hover {\n  fill: crimson;\n  transition: fill 0.3s ease;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"svg-vs-canvas-when-to-use-svg\">SVG vs Canvas: When to Use SVG\u003C\u002Fh2>\u003Cp>Choose SVG when you need scalability (logos, icons, illustrations), accessibility (screen readers can read SVG text and titles), or easy CSS\u002FJS interactivity on a smaller number of shapes. Choose Canvas for pixel-heavy, high-object-count scenes like games or real-time visualizations.\u003C\u002Fp>\u003Ch2 id=\"live-example\">Live Example\u003C\u002Fh2>\u003Cp>Edit the shapes, colors, or gradient stops below to see SVG update instantly.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><svg width='300' height='200' viewBox='0 0 300 200' style='border:1px solid #ccc; background:#fafafa;'>\n  <defs>\n    <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>\n      <stop offset='0%' style='stop-color:#6a11cb' \u002F>\n      <stop offset='100%' style='stop-color:#2575fc' \u002F>\n    <\u002FlinearGradient>\n  <\u002Fdefs>\n  <rect x='10' y='10' width='120' height='80' rx='15' fill='url(#grad1)' \u002F>\n  <circle cx='220' cy='50' r='40' fill='orange' \u002F>\n  <polygon points='150,120 200,190 100,190' fill='seagreen' \u002F>\n  <path d='M20 150 L60 190 L20 190 Z' fill='tomato' \u002F>\n<\u002Fsvg>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  #interactiveCircle:hover {\n    fill: crimson;\n    transition: fill 0.3s ease;\n    cursor: pointer;\n  }\n<\u002Fstyle>\n<svg width='150' height='150'>\n  <circle id='interactiveCircle' cx='75' cy='75' r='60' fill='dodgerblue' \u002F>\n<\u002Fsvg>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const circle = document.getElementById('interactiveCircle');\nif (circle) {\n  circle.addEventListener('click', function() {\n    console.log('SVG circle clicked! You can change its fill, radius, or position dynamically.');\n  });\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":15,"slug":42},"html-tutorial",{"name":44,"slug":45},"Graphics & Visuals","graphics-visuals",{"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",[],[],[],3,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-svg-scalable-vector-graphics","HTML SVG Tutorial: Scalable Vector Graphics Guide 2026","Master HTML SVG tutorial: shapes, paths, gradients, CSS\u002FJS styling, and responsive scalable vector graphics with live editable examples.",[59,63,67,71,75,79,83,87],{"id":60,"text":61,"level":12,"children":62},"what-makes-svg-different-from-canvas","What Makes SVG Different from Canvas?",[],{"id":64,"text":65,"level":12,"children":66},"basic-svg-syntax","Basic SVG Syntax",[],{"id":68,"text":69,"level":12,"children":70},"common-svg-shape-elements","Common SVG Shape Elements",[],{"id":72,"text":73,"level":12,"children":74},"the-path-element-and-d-attribute","The path Element and d Attribute",[],{"id":76,"text":77,"level":12,"children":78},"gradients-and-fills-trending-modern-gradient-ui","Gradients and Fills (Trending: Modern Gradient UI)",[],{"id":80,"text":81,"level":12,"children":82},"styling-svg-with-css","Styling SVG with CSS",[],{"id":84,"text":85,"level":12,"children":86},"svg-vs-canvas-when-to-use-svg","SVG vs Canvas: When to Use SVG",[],{"id":88,"text":89,"level":12,"children":90},"live-example","Live Example",[],[92,96,99],{"id":93,"language":16,"code":94,"is_editable":95},121,"\u003Csvg width='300' height='200' viewBox='0 0 300 200' style='border:1px solid #ccc; background:#fafafa;'>\n  \u003Cdefs>\n    \u003ClinearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>\n      \u003Cstop offset='0%' style='stop-color:#6a11cb' \u002F>\n      \u003Cstop offset='100%' style='stop-color:#2575fc' \u002F>\n    \u003C\u002FlinearGradient>\n  \u003C\u002Fdefs>\n  \u003Crect x='10' y='10' width='120' height='80' rx='15' fill='url(#grad1)' \u002F>\n  \u003Ccircle cx='220' cy='50' r='40' fill='orange' \u002F>\n  \u003Cpolygon points='150,120 200,190 100,190' fill='seagreen' \u002F>\n  \u003Cpath d='M20 150 L60 190 L20 190 Z' fill='tomato' \u002F>\n\u003C\u002Fsvg>",true,{"id":97,"language":16,"code":98,"is_editable":95},122,"\u003Cstyle>\n  #interactiveCircle:hover {\n    fill: crimson;\n    transition: fill 0.3s ease;\n    cursor: pointer;\n  }\n\u003C\u002Fstyle>\n\u003Csvg width='150' height='150'>\n  \u003Ccircle id='interactiveCircle' cx='75' cy='75' r='60' fill='dodgerblue' \u002F>\n\u003C\u002Fsvg>",{"id":100,"language":101,"code":102,"is_editable":95},123,"javascript","const circle = document.getElementById('interactiveCircle');\nif (circle) {\n  circle.addEventListener('click', function() {\n    console.log('SVG circle clicked! You can change its fill, radius, or position dynamically.');\n  });\n}",[104],{"id":105,"title":106,"slug":107,"prompt":108,"starter_code":109,"expected_output":110,"language":16,"order_index":23},54,"Build an SVG Badge Icon","build-an-svg-badge-icon","Create an SVG badge icon: a circle background filled with a linear gradient, and a star-like shape (use polygon or path) centered inside it in a contrasting color.","\u003Csvg width='150' height='150' viewBox='0 0 150 150'>\n  \u003Cdefs>\n    \u003C!-- TODO: define a linearGradient -->\n  \u003C\u002Fdefs>\n  \u003C!-- TODO: circle using the gradient as fill -->\n  \u003C!-- TODO: polygon or path for a star\u002Fbadge shape on top -->\n\u003C\u002Fsvg>","An SVG containing a gradient-filled circle with a star or badge polygon\u002Fpath layered on top.","2026-09-27T18:25:08+00:00",{"id":113,"slug":114,"title":115},55,"html-canvas-2d-drawing-api","HTML Canvas (2D Drawing API) 🔥",{"id":117,"slug":118,"title":119},57,"html-media-overview","HTML Media Overview",{"data":121},[122],{"id":23,"name":15,"slug":42,"icon":5,"icon_url":5,"short_description":123,"meta_title":124,"meta_description":125,"og_image":126,"locale":127,"subcategories":128},"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",[129,154,190,214,290,323,329,354,378,394],{"id":23,"name":130,"slug":131,"order_index":23,"topics":132},"HTML Fundamentals & Setup","html-fundamentals-setup",[133,136,139,142,146,150],{"id":23,"title":134,"slug":135,"order_index":23,"cornerstone":53,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":12,"title":137,"slug":138,"order_index":23,"cornerstone":53,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":52,"title":140,"slug":141,"order_index":52,"cornerstone":53,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":143,"title":144,"slug":145,"order_index":143,"cornerstone":53,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":147,"title":148,"slug":149,"order_index":147,"cornerstone":53,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":151,"title":152,"slug":153,"order_index":151,"cornerstone":53,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":155,"slug":156,"order_index":12,"topics":157},"Text & Content Basics","text-content-basics",[158,162,166,170,174,178,182,186],{"id":159,"title":160,"slug":161,"order_index":159,"cornerstone":53,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":163,"title":164,"slug":165,"order_index":163,"cornerstone":53,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":53,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":53,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":53,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":53,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":183,"title":184,"slug":185,"order_index":183,"cornerstone":53,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":187,"title":188,"slug":189,"order_index":187,"cornerstone":53,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":52,"name":191,"slug":192,"order_index":52,"topics":193},"Links, Media & Navigation","links-media-navigation",[194,198,202,206,210],{"id":195,"title":196,"slug":197,"order_index":195,"cornerstone":53,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":199,"title":200,"slug":201,"order_index":199,"cornerstone":53,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":203,"title":204,"slug":205,"order_index":203,"cornerstone":53,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":207,"title":208,"slug":209,"order_index":207,"cornerstone":53,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":211,"title":212,"slug":213,"order_index":211,"cornerstone":53,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":143,"name":215,"slug":216,"order_index":143,"topics":217},"Structuring Content","structuring-content",[218,223,228,233,238,242,246,250,254,258,262,266,270,274,278,282,286],{"id":219,"title":220,"slug":221,"order_index":222,"cornerstone":53,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":224,"title":225,"slug":226,"order_index":227,"cornerstone":53,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":229,"title":230,"slug":231,"order_index":232,"cornerstone":53,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":234,"title":235,"slug":236,"order_index":237,"cornerstone":53,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":239,"title":240,"slug":241,"order_index":219,"cornerstone":53,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":243,"title":244,"slug":245,"order_index":224,"cornerstone":53,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":247,"title":248,"slug":249,"order_index":229,"cornerstone":53,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":251,"title":252,"slug":253,"order_index":234,"cornerstone":53,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":255,"title":256,"slug":257,"order_index":239,"cornerstone":53,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":259,"title":260,"slug":261,"order_index":243,"cornerstone":53,"reading_time_minutes":52},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":263,"title":264,"slug":265,"order_index":247,"cornerstone":53,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":267,"title":268,"slug":269,"order_index":251,"cornerstone":53,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":271,"title":272,"slug":273,"order_index":255,"cornerstone":53,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":275,"title":276,"slug":277,"order_index":275,"cornerstone":53,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":279,"title":280,"slug":281,"order_index":279,"cornerstone":53,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":283,"title":284,"slug":285,"order_index":283,"cornerstone":53,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":287,"title":288,"slug":289,"order_index":287,"cornerstone":53,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":159,"name":291,"slug":292,"order_index":147,"topics":293},"Forms & User Input","forms-user-input",[294,299,304,309,314,319],{"id":295,"title":296,"slug":297,"order_index":298,"cornerstone":53,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":300,"title":301,"slug":302,"order_index":303,"cornerstone":53,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":305,"title":306,"slug":307,"order_index":308,"cornerstone":53,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":310,"title":311,"slug":312,"order_index":313,"cornerstone":53,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":315,"title":316,"slug":317,"order_index":318,"cornerstone":53,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":105,"title":320,"slug":321,"order_index":322,"cornerstone":53,"reading_time_minutes":12},"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":163,"name":44,"slug":45,"order_index":151,"topics":324},[325,327],{"id":113,"title":115,"slug":114,"order_index":326,"cornerstone":53,"reading_time_minutes":52},43,{"id":37,"title":38,"slug":39,"order_index":328,"cornerstone":53,"reading_time_minutes":52},44,{"id":167,"name":330,"slug":331,"order_index":159,"topics":332},"Multimedia","multimedia",[333,335,340,345,350],{"id":117,"title":119,"slug":118,"order_index":334,"cornerstone":53,"reading_time_minutes":12},45,{"id":336,"title":337,"slug":338,"order_index":339,"cornerstone":53,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":341,"title":342,"slug":343,"order_index":344,"cornerstone":53,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":346,"title":347,"slug":348,"order_index":349,"cornerstone":53,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":351,"title":352,"slug":353,"order_index":295,"cornerstone":53,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":171,"name":355,"slug":356,"order_index":163,"topics":357},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[358,362,366,370,374],{"id":359,"title":360,"slug":361,"order_index":300,"cornerstone":53,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":363,"title":364,"slug":365,"order_index":305,"cornerstone":53,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":367,"title":368,"slug":369,"order_index":310,"cornerstone":53,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":371,"title":372,"slug":373,"order_index":315,"cornerstone":53,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":375,"title":376,"slug":377,"order_index":105,"cornerstone":53,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":175,"name":379,"slug":380,"order_index":167,"topics":381},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[382,386,390],{"id":383,"title":384,"slug":385,"order_index":113,"cornerstone":53,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":387,"title":388,"slug":389,"order_index":37,"cornerstone":53,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":391,"title":392,"slug":393,"order_index":117,"cornerstone":53,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":179,"name":395,"slug":396,"order_index":171,"topics":397},"Reference & Practice","reference-practice",[398,402,406,410,414,418,422,426],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":53,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":53,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":407,"title":408,"slug":409,"order_index":52,"cornerstone":53,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":411,"title":412,"slug":413,"order_index":143,"cornerstone":53,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":415,"title":416,"slug":417,"order_index":147,"cornerstone":53,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":419,"title":420,"slug":421,"order_index":151,"cornerstone":53,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":423,"title":424,"slug":425,"order_index":159,"cornerstone":53,"reading_time_minutes":52},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":427,"title":428,"slug":429,"order_index":163,"cornerstone":53,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises"]