[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:html-interview-preparation-top-qa":360},{"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,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":23,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",false,{"id":12,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"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,192,196,200,204],{"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":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"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":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"data":361},{"id":353,"title":354,"slug":355,"content":362,"course":363,"subcategory":364,"author":365,"reading_time_minutes":57,"cornerstone":52,"schema_type":371,"faq_json":5,"video_url":5,"canonical_url":372,"meta_title":373,"meta_description":374,"og_image":5,"toc_json":375,"code_examples":460,"quiz":5,"exercises":469,"published_at":5,"updated_at":476,"prev":477,"next":478},"\u003Ch1 id=\"html-interview-preparation-top-qa\">HTML Interview Preparation (Top Q&A)\u003C\u002Fh1>\u003Cp>Preparing for a front-end or web development role? This \u003Cstrong>HTML interview questions\u003C\u002Fstrong> guide covers the most commonly asked questions — from basic syntax to semantic HTML, forms, attributes, and browser compatibility — with clear answers and code examples to help you explain concepts confidently.\u003C\u002Fp>\u003Ch2 id=\"why-html-interview-prep-matters\">Why HTML Interview Prep Matters\u003C\u002Fh2>\u003Cp>Even experienced developers get asked fundamental \u003Cstrong>HTML interview questions\u003C\u002Fstrong> because interviewers want to confirm you understand the building blocks of the web, not just frameworks built on top of it. This reference organizes the most frequent questions by topic.\u003C\u002Fp>\u003Ch2 id=\"1-basic-html-questions\">1. Basic HTML Questions\u003C\u002Fh2>\u003Ch3 id=\"q-what-is-the-difference-between-html-elements-and-tags\">Q: What is the difference between HTML elements and tags?\u003C\u002Fh3>\u003Cp>A tag is the markup itself (like \u003Ccode><p>\u003C\u002Fcode>), while an element includes the opening tag, content, and closing tag together (\u003Ccode><p>Text<\u002Fp>\u003C\u002Fcode>).\u003C\u002Fp>\u003Ch3 id=\"q-what-is-the-difference-between-div-and-span\">Q: What is the difference between <div> and <span>?\u003C\u002Fh3>\u003Cp>\u003Ccode><div>\u003C\u002Fcode> is a block-level element used for larger structural groupings, while \u003Ccode><span>\u003C\u002Fcode> is an inline element used for styling small pieces of text within a line.\u003C\u002Fp>\u003Ch3 id=\"q-what-does-the-doctype-declaration-do\">Q: What does the DOCTYPE declaration do?\u003C\u002Fh3>\u003Cp>It tells the browser which HTML version to use and triggers standards mode instead of quirks mode, ensuring consistent rendering.\u003C\u002Fp>\u003Ch2 id=\"2-semantic-html-questions\">2. Semantic HTML Questions\u003C\u002Fh2>\u003Ch3 id=\"q-why-use-semantic-tags-like-article-instead-of-div\">Q: Why use semantic tags like <article> instead of <div>?\u003C\u002Fh3>\u003Cp>Semantic tags describe the meaning of content to browsers, search engines, and assistive technology, improving SEO and accessibility, while \u003Ccode><div>\u003C\u002Fcode> carries no inherent meaning.\u003C\u002Fp>\u003Ch3 id=\"q-whats-the-difference-between-section-and-article\">Q: What's the difference between <section> and <article>?\u003C\u002Fh3>\u003Cp>\u003Ccode><article>\u003C\u002Fcode> is self-contained content that could stand alone (like a blog post), while \u003Ccode><section>\u003C\u002Fcode> groups related content within a page but isn't necessarily independent.\u003C\u002Fp>\u003Ch2 id=\"3-forms-and-input-questions\">3. Forms and Input Questions\u003C\u002Fh2>\u003Ch3 id=\"q-whats-the-difference-between-get-and-post-in-a-form\">Q: What's the difference between GET and POST in a form?\u003C\u002Fh3>\u003Cp>GET appends form data to the URL and is visible\u002Fcacheable, while POST sends data in the request body, making it suitable for sensitive or large data submissions.\u003C\u002Fp>\u003Ch3 id=\"q-how-do-you-make-a-form-field-required\">Q: How do you make a form field required?\u003C\u002Fh3>\u003Cp>Add the \u003Ccode>required\u003C\u002Fcode> attribute to the input element, which triggers built-in browser validation before submission.\u003C\u002Fp>\u003Ch2 id=\"4-attributes-and-accessibility-questions\">4. Attributes and Accessibility Questions\u003C\u002Fh2>\u003Ch3 id=\"q-what-is-the-purpose-of-the-alt-attribute-on-images\">Q: What is the purpose of the alt attribute on images?\u003C\u002Fh3>\u003Cp>It provides alternative text for screen readers and displays if the image fails to load, which is essential for accessibility and SEO.\u003C\u002Fp>\u003Ch3 id=\"q-what-are-data-attributes-used-for\">Q: What are data-* attributes used for?\u003C\u002Fh3>\u003Cp>They let developers store custom data directly on HTML elements, retrievable in JavaScript via the \u003Ccode>dataset\u003C\u002Fcode> property, without polluting the DOM with non-standard attributes.\u003C\u002Fp>\u003Ch2 id=\"5-browser-compatibility-questions\">5. Browser Compatibility Questions\u003C\u002Fh2>\u003Ch3 id=\"q-how-do-you-handle-a-feature-that-isnt-supported-in-all-browsers\">Q: How do you handle a feature that isn't supported in all browsers?\u003C\u002Fh3>\u003Cp>Use feature detection in JavaScript, provide fallback content with \u003Ccode><noscript>\u003C\u002Fcode>, or include multiple \u003Ccode><source>\u003C\u002Fcode> options for media elements.\u003C\u002Fp>\u003Ch3 id=\"q-what-is-quirks-mode\">Q: What is quirks mode?\u003C\u002Fh3>\u003Cp>It's a legacy rendering mode browsers use when a valid doctype is missing, causing inconsistent CSS and layout behavior compared to standards mode.\u003C\u002Fp>\u003Ch2 id=\"6-trickyconceptual-questions\">6. Tricky\u002FConceptual Questions\u003C\u002Fh2>\u003Ch3 id=\"q-can-you-nest-a-button-inside-another-button\">Q: Can you nest a <button> inside another <button>?\u003C\u002Fh3>\u003Cp>No — nesting interactive elements like buttons or links inside each other is invalid HTML and causes unpredictable behavior.\u003C\u002Fp>\u003Ch3 id=\"q-whats-the-difference-between-id-and-class-attributes\">Q: What's the difference between id and class attributes?\u003C\u002Fh3>\u003Cp>\u003Ccode>id\u003C\u002Fcode> must be unique per page and is used for single-element targeting, while \u003Ccode>class\u003C\u002Fcode> can be reused across multiple elements for shared styling or behavior.\u003C\u002Fp>\u003Ch2 id=\"try-it-yourself\">Try It Yourself\u003C\u002Fh2>\u003Cp>Test your understanding with the live code example and practice exercise below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><!-- Semantic vs non-semantic comparison -->\n<div class='post'>\n  <div class='post-title'>Non-semantic version<\u002Fdiv>\n<\u002Fdiv>\n\n<article>\n  <h2>Semantic version<\u002Fh2>\n<\u002Farticle>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const el = document.querySelector('#username');\nconsole.log(el.dataset.role); \u002F\u002F reads data-role attribute\nel.classList.add('active'); \u002F\u002F adds a class dynamically\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":15,"slug":38},{"name":325,"slug":326},{"slug":366,"display_name":367,"job_title":5,"short_bio":5,"expertise_tags":368,"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":369,"posts":370},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-interview-preparation-top-qa","HTML Interview Questions & Answers (Top Q&A)","Top HTML interview questions and answers covering semantic tags, forms, attributes, doctypes, and browser compatibility with code examples.",[376,380,396,408,420,432,444,456],{"id":377,"text":378,"level":12,"children":379},"why-html-interview-prep-matters","Why HTML Interview Prep Matters",[],{"id":381,"text":382,"level":12,"children":383},"1-basic-html-questions","1. Basic HTML Questions",[384,388,392],{"id":385,"text":386,"level":57,"children":387},"q-what-is-the-difference-between-html-elements-and-tags","Q: What is the difference between HTML elements and tags?",[],{"id":389,"text":390,"level":57,"children":391},"q-what-is-the-difference-between-div-and-span","Q: What is the difference between \u003Cdiv> and \u003Cspan>?",[],{"id":393,"text":394,"level":57,"children":395},"q-what-does-the-doctype-declaration-do","Q: What does the DOCTYPE declaration do?",[],{"id":397,"text":398,"level":12,"children":399},"2-semantic-html-questions","2. Semantic HTML Questions",[400,404],{"id":401,"text":402,"level":57,"children":403},"q-why-use-semantic-tags-like-article-instead-of-div","Q: Why use semantic tags like \u003Carticle> instead of \u003Cdiv>?",[],{"id":405,"text":406,"level":57,"children":407},"q-whats-the-difference-between-section-and-article","Q: What's the difference between \u003Csection> and \u003Carticle>?",[],{"id":409,"text":410,"level":12,"children":411},"3-forms-and-input-questions","3. Forms and Input Questions",[412,416],{"id":413,"text":414,"level":57,"children":415},"q-whats-the-difference-between-get-and-post-in-a-form","Q: What's the difference between GET and POST in a form?",[],{"id":417,"text":418,"level":57,"children":419},"q-how-do-you-make-a-form-field-required","Q: How do you make a form field required?",[],{"id":421,"text":422,"level":12,"children":423},"4-attributes-and-accessibility-questions","4. Attributes and Accessibility Questions",[424,428],{"id":425,"text":426,"level":57,"children":427},"q-what-is-the-purpose-of-the-alt-attribute-on-images","Q: What is the purpose of the alt attribute on images?",[],{"id":429,"text":430,"level":57,"children":431},"q-what-are-data-attributes-used-for","Q: What are data-* attributes used for?",[],{"id":433,"text":434,"level":12,"children":435},"5-browser-compatibility-questions","5. Browser Compatibility Questions",[436,440],{"id":437,"text":438,"level":57,"children":439},"q-how-do-you-handle-a-feature-that-isnt-supported-in-all-browsers","Q: How do you handle a feature that isn't supported in all browsers?",[],{"id":441,"text":442,"level":57,"children":443},"q-what-is-quirks-mode","Q: What is quirks mode?",[],{"id":445,"text":446,"level":12,"children":447},"6-trickyconceptual-questions","6. Tricky\u002FConceptual Questions",[448,452],{"id":449,"text":450,"level":57,"children":451},"q-can-you-nest-a-button-inside-another-button","Q: Can you nest a \u003Cbutton> inside another \u003Cbutton>?",[],{"id":453,"text":454,"level":57,"children":455},"q-whats-the-difference-between-id-and-class-attributes","Q: What's the difference between id and class attributes?",[],{"id":457,"text":458,"level":12,"children":459},"try-it-yourself","Try It Yourself",[],[461,465],{"id":462,"language":16,"code":463,"is_editable":464},184,"\u003C!-- Semantic vs non-semantic comparison -->\n\u003Cdiv class='post'>\n  \u003Cdiv class='post-title'>Non-semantic version\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Carticle>\n  \u003Ch2>Semantic version\u003C\u002Fh2>\n\u003C\u002Farticle>",true,{"id":466,"language":467,"code":468,"is_editable":464},185,"javascript","const el = document.querySelector('#username');\nconsole.log(el.dataset.role); \u002F\u002F reads data-role attribute\nel.classList.add('active'); \u002F\u002F adds a class dynamically",[470],{"id":345,"title":471,"slug":472,"prompt":473,"starter_code":474,"expected_output":475,"language":16,"order_index":23},"Answer in Code: Semantic Refactor","answer-in-code-semantic-refactor","Refactor the given non-semantic HTML block into semantic HTML using appropriate tags like \u003Cheader>, \u003Carticle>, and \u003Cfooter>.","\u003Cdiv class='header'>My Blog\u003C\u002Fdiv>\n\u003Cdiv class='post'>\n  \u003Cdiv class='post-title'>Hello World\u003C\u002Fdiv>\n  \u003Cdiv class='post-content'>This is my first post.\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class='footer'>Copyright 2026\u003C\u002Fdiv>","The refactored version uses \u003Cheader>, \u003Carticle>, \u003Ch2> or similar heading, a paragraph, and \u003Cfooter> instead of generic divs.","2026-09-27T19:53:17+00:00",{"id":349,"slug":351,"title":350},{"id":357,"slug":359,"title":358}]