[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:html-attributes-global-standard":320},{"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},[37],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","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",[45,72,108,132,192,226,240,268,292,308],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":177,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":181,"title":182,"slug":183,"order_index":181,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":185,"title":186,"slug":187,"order_index":185,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":189,"title":190,"slug":191,"order_index":189,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":193,"slug":194,"order_index":65,"topics":195},"Forms & User Input","forms-user-input",[196,201,206,211,216,221],{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":212,"title":213,"slug":214,"order_index":215,"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":217,"title":218,"slug":219,"order_index":220,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":222,"title":223,"slug":224,"order_index":225,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":227,"slug":228,"order_index":69,"topics":229},"Graphics & Visuals","graphics-visuals",[230,235],{"id":231,"title":232,"slug":233,"order_index":234,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":236,"title":237,"slug":238,"order_index":239,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":241,"slug":242,"order_index":77,"topics":243},"Multimedia","multimedia",[244,249,254,259,264],{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":255,"title":256,"slug":257,"order_index":258,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":260,"title":261,"slug":262,"order_index":263,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":265,"title":266,"slug":267,"order_index":197,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":269,"slug":270,"order_index":81,"topics":271},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[272,276,280,284,288],{"id":273,"title":274,"slug":275,"order_index":202,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":277,"title":278,"slug":279,"order_index":207,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":281,"title":282,"slug":283,"order_index":212,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":285,"title":286,"slug":287,"order_index":217,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":289,"title":290,"slug":291,"order_index":222,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":293,"slug":294,"order_index":85,"topics":295},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[296,300,304],{"id":297,"title":298,"slug":299,"order_index":231,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":301,"title":302,"slug":303,"order_index":236,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":305,"title":306,"slug":307,"order_index":245,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":309,"slug":310,"order_index":89,"topics":311},"Reference & Practice","reference-practice",[312,316],{"id":313,"title":314,"slug":315,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":317,"title":318,"slug":319,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"data":321},{"id":65,"title":66,"slug":67,"content":322,"course":323,"subcategory":324,"author":325,"reading_time_minutes":12,"cornerstone":52,"schema_type":331,"faq_json":5,"video_url":5,"canonical_url":332,"meta_title":333,"meta_description":334,"og_image":5,"toc_json":335,"code_examples":370,"quiz":5,"exercises":376,"published_at":5,"updated_at":383,"prev":384,"next":385},"\u003Ch2 id=\"html-attributes-global-standard\">HTML Attributes (Global & Standard)\u003C\u002Fh2>\u003Cp>\u003Cstrong>HTML attributes\u003C\u002Fstrong> provide additional information about an element and control its behavior, styling, or accessibility. Attributes are always specified inside the opening tag and typically follow a \u003Ccode>name=\"value\"\u003C\u002Fcode> pattern.\u003C\u002Fp>\u003Ch3 id=\"basic-attribute-syntax\">Basic Attribute Syntax\u003C\u002Fh3>\u003Cpre>\u003Ccode><tagname attribute=\"value\">Content<\u002Ftagname>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Example:\u003C\u002Fp>\u003Cpre>\u003Ccode><a href=\"https:\u002F\u002Fwww.example.com\" target=\"_blank\">Visit Site<\u002Fa>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Here, \u003Ccode>href\u003C\u002Fcode> and \u003Ccode>target\u003C\u002Fcode> are both attributes of the \u003Ccode><a>\u003C\u002Fcode> element.\u003C\u002Fp>\u003Ch3 id=\"global-attributes\">Global Attributes\u003C\u002Fh3>\u003Cp>\u003Cstrong>Global attributes\u003C\u002Fstrong> can be applied to almost any HTML element, regardless of its type. These are essential for styling, scripting, and accessibility:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>class\u003C\u002Fcode> — assigns one or more CSS class names\u003C\u002Fli>\u003Cli>\u003Ccode>id\u003C\u002Fcode> — assigns a unique identifier\u003C\u002Fli>\u003Cli>\u003Ccode>style\u003C\u002Fcode> — applies inline CSS\u003C\u002Fli>\u003Cli>\u003Ccode>title\u003C\u002Fcode> — adds a tooltip on hover\u003C\u002Fli>\u003Cli>\u003Ccode>lang\u003C\u002Fcode> — specifies the language of the content\u003C\u002Fli>\u003Cli>\u003Ccode>hidden\u003C\u002Fcode> — hides the element from view\u003C\u002Fli>\u003Cli>\u003Ccode>tabindex\u003C\u002Fcode> — controls keyboard focus order\u003C\u002Fli>\u003Cli>\u003Ccode>contenteditable\u003C\u002Fcode> — allows users to edit content directly in the browser\u003C\u002Fli>\u003Cli>\u003Ccode>draggable\u003C\u002Fcode> — enables drag-and-drop functionality\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"standard-element-specific-attributes\">Standard (Element-Specific) Attributes\u003C\u002Fh3>\u003Cp>Unlike global attributes, standard attributes only work on specific elements:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>href\u003C\u002Fcode> — used only on \u003Ccode><a>\u003C\u002Fcode> and \u003Ccode><link>\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>src\u003C\u002Fcode> — used on \u003Ccode><img>\u003C\u002Fcode>, \u003Ccode><script>\u003C\u002Fcode>, \u003Ccode><video>\u003C\u002Fcode>, \u003Ccode><iframe>\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>alt\u003C\u002Fcode> — used on \u003Ccode><img>\u003C\u002Fcode> for accessibility and SEO\u003C\u002Fli>\u003Cli>\u003Ccode>type\u003C\u002Fcode> — used on \u003Ccode><input>\u003C\u002Fcode>, \u003Ccode><button>\u003C\u002Fcode>, \u003Ccode><script>\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>placeholder\u003C\u002Fcode> — used on form fields like \u003Ccode><input>\u003C\u002Fcode> and \u003Ccode><textarea>\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"data-attributes-trending-in-modern-javascript-development\">data-* Attributes (Trending in Modern JavaScript Development)\u003C\u002Fh3>\u003Cp>Custom \u003Cstrong>data-* attributes\u003C\u002Fstrong> let you store extra information directly on HTML elements, which is heavily used in modern JavaScript frameworks and vanilla JS DOM manipulation:\u003C\u002Fp>\u003Cpre>\u003Ccode><button data-user-id=\"482\" data-role=\"admin\">Edit User<\u002Fbutton>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode>\u002F\u002F Accessing data attributes in JavaScript\nconst btn = document.querySelector('button');\nconsole.log(btn.dataset.userId); \u002F\u002F \"482\"\nconsole.log(btn.dataset.role);   \u002F\u002F \"admin\"\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"aria-attributes-for-accessibility\">ARIA Attributes for Accessibility\u003C\u002Fh3>\u003Cp>As web accessibility (a11y) becomes a legal and ethical priority in 2026, \u003Cstrong>ARIA attributes\u003C\u002Fstrong> are increasingly essential:\u003C\u002Fp>\u003Cpre>\u003Ccode><button aria-label=\"Close menu\" aria-expanded=\"false\">X<\u002Fbutton>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"boolean-attributes\">Boolean Attributes\u003C\u002Fh3>\u003Cp>Some attributes don't need a value at all — their mere presence enables the behavior:\u003C\u002Fp>\u003Cpre>\u003Ccode><input type=\"text\" disabled>\n<input type=\"checkbox\" checked>\n<video controls autoplay muted><\u002Fvideo>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"best-practices-for-writing-attributes\">Best Practices for Writing Attributes\u003C\u002Fh3>\u003Cul>\u003Cli>Always use double quotes around attribute values for consistency.\u003C\u002Fli>\u003Cli>Never skip the \u003Ccode>alt\u003C\u002Fcode> attribute on images — it's critical for SEO and screen readers.\u003C\u002Fli>\u003Cli>Use \u003Ccode>data-*\u003C\u002Fcode> attributes instead of storing custom data in class names.\u003C\u002Fli>\u003Cli>Combine \u003Ccode>class\u003C\u002Fcode> and \u003Ccode>id\u003C\u002Fcode> thoughtfully: \u003Ccode>class\u003C\u002Fcode> for reusable styles, \u003Ccode>id\u003C\u002Fcode> for unique JS hooks.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>Attributes add extra information or behavior to HTML elements.\u003C\u002Fli>\u003Cli>Global attributes work on almost any element; standard attributes are element-specific.\u003C\u002Fli>\u003Cli>\u003Ccode>data-*\u003C\u002Fcode> attributes are widely used for JavaScript interactivity.\u003C\u002Fli>\u003Cli>ARIA attributes are essential for building accessible, modern websites.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><a href='https:\u002F\u002Fwww.w3schools.com' target='_blank' title='Visit W3Schools'>Learn More<\u002Fa>\n<img src='logo.png' alt='Company Logo' width='150'>\n<input type='email' placeholder='Enter your email' required>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><button id='editBtn' data-user-id='482' data-role='admin'>Edit User<\u002Fbutton>\n\n<script>\n  const btn = document.getElementById('editBtn');\n  btn.addEventListener('click', function() {\n    console.log('User ID:', btn.dataset.userId);\n    console.log('Role:', btn.dataset.role);\n  });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":15,"slug":38},{"name":46,"slug":47},{"slug":326,"display_name":327,"job_title":5,"short_bio":5,"expertise_tags":328,"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":329,"posts":330},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-attributes-global-standard","HTML Attributes Explained: Global, Standard & data-*","Learn HTML attributes including global attributes, standard attributes, and modern data-* and ARIA attributes with practical, executable code examples.",[336],{"id":67,"text":66,"level":12,"children":337},[338,342,346,350,354,358,362,366],{"id":339,"text":340,"level":57,"children":341},"basic-attribute-syntax","Basic Attribute Syntax",[],{"id":343,"text":344,"level":57,"children":345},"global-attributes","Global Attributes",[],{"id":347,"text":348,"level":57,"children":349},"standard-element-specific-attributes","Standard (Element-Specific) Attributes",[],{"id":351,"text":352,"level":57,"children":353},"data-attributes-trending-in-modern-javascript-development","data-* Attributes (Trending in Modern JavaScript Development)",[],{"id":355,"text":356,"level":57,"children":357},"aria-attributes-for-accessibility","ARIA Attributes for Accessibility",[],{"id":359,"text":360,"level":57,"children":361},"boolean-attributes","Boolean Attributes",[],{"id":363,"text":364,"level":57,"children":365},"best-practices-for-writing-attributes","Best Practices for Writing Attributes",[],{"id":367,"text":368,"level":57,"children":369},"key-takeaways","Key Takeaways",[],[371,374],{"id":97,"language":16,"code":372,"is_editable":373},"\u003Ca href='https:\u002F\u002Fwww.w3schools.com' target='_blank' title='Visit W3Schools'>Learn More\u003C\u002Fa>\n\u003Cimg src='logo.png' alt='Company Logo' width='150'>\n\u003Cinput type='email' placeholder='Enter your email' required>",true,{"id":101,"language":16,"code":375,"is_editable":373},"\u003Cbutton id='editBtn' data-user-id='482' data-role='admin'>Edit User\u003C\u002Fbutton>\n\n\u003Cscript>\n  const btn = document.getElementById('editBtn');\n  btn.addEventListener('click', function() {\n    console.log('User ID:', btn.dataset.userId);\n    console.log('Role:', btn.dataset.role);\n  });\n\u003C\u002Fscript>",[377],{"id":57,"title":378,"slug":379,"prompt":380,"starter_code":381,"expected_output":382,"language":16,"order_index":23},"Add Attributes to Make This Page Accessible","add-accessible-attributes","Add an alt attribute to the image, a data-id attribute to the button, and an aria-label attribute to the close icon.","\u003Cimg src='product.jpg'>\n\u003Cbutton>Add to Cart\u003C\u002Fbutton>\n\u003Cspan>X\u003C\u002Fspan>","","2026-09-27T16:49:46+00:00",{"id":61,"slug":63,"title":62},{"id":69,"slug":71,"title":70}]