[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content:legacy:page:\u002Finterviews\u002Fhtml":3,"content:legacy:surround:\u002Finterviews\u002Fhtml":444,"content:legacy:navigation":445},{"id":4,"title":5,"body":6,"description":431,"extension":432,"icon":433,"meta":434,"modifiedAt":435,"navigation":436,"path":437,"publishedAt":438,"seo":439,"sitemap":440,"stem":441,"updatedAt":442,"__hash__":443},"interviews\u002Finterviews\u002Fhtml.md","HTML",{"type":7,"value":8,"toc":429},"minimark",[9,63,94,152,187,226,284,326,361,384],[10,11,12,23],"collapsible",{},[13,14,16],"template",{"v-slot:title":15},"",[17,18,19],"ol",{},[20,21,22],"li",{},"What are the differences between block, inline, and inline-block elements, and when would you use each?",[13,24,25],{"v-slot:content":15},[26,27,28,44,57],"ul",{},[20,29,30,34,35,39,40,43],{},[31,32,33],"strong",{},"Block",": Takes up the full width, starts on a new line. Examples: ",[36,37,38],"code",{},"\u003Cdiv>",", ",[36,41,42],{},"\u003Cp>",". Used for layout structure.",[20,45,46,49,50,39,53,56],{},[31,47,48],{},"Inline",": Flows with text, only as wide as content. Examples: ",[36,51,52],{},"\u003Cspan>",[36,54,55],{},"\u003Ca>",". Used for text styling.",[20,58,59,62],{},[31,60,61],{},"Inline-block",": Behaves inline but allows width\u002Fheight\u002Fmargins. Good for nav links, buttons, or inline layouts.",[10,64,65,77],{},[13,66,67],{"v-slot:title":15},[17,68,70],{"start":69},2,[20,71,72,73,76],{},"Explain the purpose of ",[36,74,75],{},"\u003C!DOCTYPE html>"," and what happens if it’s omitted.",[13,78,79],{"v-slot:content":15},[26,80,81,84,91],{},[20,82,83],{},"Declares HTML version (HTML5 in modern use).",[20,85,86,87,90],{},"Ensures the browser renders in ",[31,88,89],{},"standards mode"," instead of quirks mode.",[20,92,93],{},"If omitted, older browsers may switch to quirks mode, causing inconsistent rendering.",[10,95,96,117],{},[13,97,98],{"v-slot:title":15},[17,99,101],{"start":100},3,[20,102,103,104,39,107,39,110,112,113,116],{},"Describe the difference between ",[36,105,106],{},"\u003Csection>",[36,108,109],{},"\u003Carticle>",[36,111,38],{},", and ",[36,114,115],{},"\u003Cmain>",". Give examples of when to use each.",[13,118,119],{"v-slot:content":15},[26,120,121,128,135,142],{},[20,122,123,127],{},[31,124,125],{},[36,126,106],{},": Thematic grouping of content (e.g., “Features” section).",[20,129,130,134],{},[31,131,132],{},[36,133,109],{},": Self-contained content that could stand alone (e.g., blog post).",[20,136,137,141],{},[31,138,139],{},[36,140,38],{},": Generic container, no semantics. Use only for styling or grouping when semantics don’t apply.",[20,143,144,148,149,151],{},[31,145,146],{},[36,147,115],{},": Represents the dominant content of the document (only one per page).\n👉 Use semantic tags for SEO, accessibility, and structure. Reserve ",[36,150,38],{}," for when nothing else fits.",[10,153,154,169],{},[13,155,156],{"v-slot:title":15},[17,157,159],{"start":158},4,[20,160,161,162,165,166,168],{},"How do you decide between using ",[36,163,164],{},"\u003Cbutton>"," vs. ",[36,167,55],{},"?",[13,170,171],{"v-slot:content":15},[26,172,173,180],{},[20,174,175,179],{},[31,176,177],{},[36,178,164],{},": Used for actions (submitting forms, opening modals).",[20,181,182,186],{},[31,183,184],{},[36,185,55],{},": Used for navigation (linking to another page\u002Fsection).\n👉 Don’t misuse them: buttons shouldn’t navigate, links shouldn’t trigger actions.",[10,188,189,197],{},[13,190,191],{"v-slot:title":15},[17,192,194],{"start":193},5,[20,195,196],{},"What are void elements? List five examples and explain how they differ from normal elements.",[13,198,199],{"v-slot:content":15},[26,200,201,204,223],{},[20,202,203],{},"Void elements don’t have closing tags or content.",[20,205,206,207,39,210,39,213,39,216,39,219,222],{},"Examples: ",[36,208,209],{},"\u003Cimg>",[36,211,212],{},"\u003Cinput>",[36,214,215],{},"\u003Cbr>",[36,217,218],{},"\u003Chr>",[36,220,221],{},"\u003Cmeta>",".",[20,224,225],{},"They cannot contain child elements; they self-close.\n👉 Useful for standalone items (e.g., images, line breaks).",[10,227,228,236],{},[13,229,230],{"v-slot:title":15},[17,231,233],{"start":232},6,[20,234,235],{},"Explain the DOM tree creation process from HTML parsing to the final render tree.",[13,237,238],{"v-slot:content":15},[26,239,240,250,260,270,277],{},[20,241,242],{},[17,243,244],{},[20,245,246,247,222],{},"Browser parses HTML → builds ",[31,248,249],{},"DOM tree",[20,251,252],{},[17,253,254],{"start":69},[20,255,256,257,222],{},"CSS is parsed → builds ",[31,258,259],{},"CSSOM tree",[20,261,262],{},[17,263,264],{"start":100},[20,265,266,267,222],{},"DOM + CSSOM → ",[31,268,269],{},"Render Tree",[20,271,272],{},[17,273,274],{"start":158},[20,275,276],{},"Render tree → Layout (sizes, positions).",[20,278,279],{},[17,280,281],{"start":193},[20,282,283],{},"Layout → Painting → Compositing to screen.\n👉 Blocking scripts\u002Fstyles can delay tree construction.",[10,285,286,298],{},[13,287,288],{"v-slot:title":15},[17,289,291],{"start":290},7,[20,292,293,294,297],{},"What are custom data attributes (",[36,295,296],{},"data-*",")? Provide use cases and potential pitfalls.",[13,299,300],{"v-slot:content":15},[26,301,302,308,311],{},[20,303,304,305,222],{},"Allow embedding custom, non-standard data in elements: ",[36,306,307],{},"\u003Cdiv data-id=\"123\">",[20,309,310],{},"Use cases: storing metadata, JS hooks, analytics.",[20,312,313,314],{},"Pitfalls:\n",[26,315,316,319],{},[20,317,318],{},"Overusing them instead of proper APIs.",[20,320,321,322,325],{},"Security risks if used unsafely in user-controlled contexts.\n👉 They are ",[31,323,324],{},"not"," meant for styling; use classes for CSS.",[10,327,328,343],{},[13,329,330],{"v-slot:title":15},[17,331,333],{"start":332},8,[20,334,335,336,339,340,168],{},"When and why would you use ",[36,337,338],{},"\u003Ctemplate>"," and ",[36,341,342],{},"\u003Cslot>",[13,344,345],{"v-slot:content":15},[26,346,347,354],{},[20,348,349,353],{},[31,350,351],{},[36,352,338],{},": Stores inert HTML that isn’t rendered until used (e.g., cloning for dynamic components).",[20,355,356,360],{},[31,357,358],{},[36,359,342],{},": Used in Web Components for content projection (inserting user content into component layout).\n👉 They help build reusable, dynamic UI components.",[10,362,363,371],{},[13,364,365],{"v-slot:title":15},[17,366,368],{"start":367},9,[20,369,370],{},"What problems can arise from nesting interactive elements (e.g., a button inside a link)?",[13,372,373],{"v-slot:content":15},[26,374,375,378,381],{},[20,376,377],{},"It’s invalid HTML.",[20,379,380],{},"Causes accessibility and UX issues (confuses screen readers).",[20,382,383],{},"May break expected behaviors (nested clickable areas).\n👉 Keep interactive elements separate; never nest them.",[10,385,386,405],{},[13,387,388],{"v-slot:title":15},[17,389,391],{"start":390},10,[20,392,393,394,339,397,400,401,404],{},"How do ",[36,395,396],{},"defer",[36,398,399],{},"async"," attributes on ",[36,402,403],{},"\u003Cscript>"," differ? When should you use each?",[13,406,407],{"v-slot:content":15},[26,408,409,416],{},[20,410,411,415],{},[31,412,413],{},[36,414,399],{},": Script loads and executes as soon as it’s ready, without waiting for HTML parsing. Best for independent scripts (e.g., analytics).",[20,417,418,422,423,425,426,428],{},[31,419,420],{},[36,421,396],{},": Script loads in parallel but executes after HTML parsing. Best for scripts that need DOM ready.\n👉 Use ",[36,424,396],{}," for most inline scripts, ",[36,427,399],{}," for third-party or non-DOM dependent scripts.",{"title":15,"searchDepth":69,"depth":69,"links":430},[],"Interview questions and answers about HTML.","md","material-icon-theme:html",{},null,true,"\u002Finterviews\u002Fhtml","2025-08-18",{"title":5,"description":431},{"loc":437,"lastmod":438},"interviews\u002Fhtml","2026-09-16T22:28:05+07:00","MupH6mnzsdvmq9MDwWxwtP3Hp7WYefOEdWthLtjtd20",[435,435],[446,597,703,724],{"title":447,"icon":448,"path":449,"stem":450,"children":451,"page":462},"Posts","fluent-color:data-bar-vertical-ascending-24","\u002Fposts","posts",[452,463,481,507,517,531,541,551,561,587],{"title":453,"icon":454,"redirect":455,"path":456,"stem":457,"children":458,"page":462},"Database","material-icon-theme:database","\u002Fposts\u002Fdatabase\u002Freplication-strategy","\u002Fposts\u002Fdatabase","posts\u002Fdatabase",[459],{"title":460,"path":455,"stem":461,"icon":435},"Database Replication strategy in large systems","posts\u002Fdatabase\u002Freplication-strategy",false,{"title":464,"icon":465,"redirect":466,"path":467,"stem":468,"children":469,"page":462},"Docker","vscode-icons:file-type-docker2","\u002Fposts\u002Fdocker\u002Fdocker-commands","\u002Fposts\u002Fdocker","posts\u002Fdocker",[470,473,477],{"title":471,"path":466,"stem":472,"icon":435},"Docker commands essentials","posts\u002Fdocker\u002Fdocker-commands",{"title":474,"path":475,"stem":476,"icon":435},"Some useful Dockerfile templates","\u002Fposts\u002Fdocker\u002Fdockerfile-templates","posts\u002Fdocker\u002Fdockerfile-templates",{"title":478,"path":479,"stem":480,"icon":435},"Setup Docker environment on Windows","\u002Fposts\u002Fdocker\u002Fsetup-docker-on-window","posts\u002Fdocker\u002Fsetup-docker-on-window",{"title":482,"icon":483,"redirect":484,"path":485,"stem":486,"children":487,"page":462},"Git & GitHub","material-icon-theme:git","\u002Fposts\u002Fgit\u002Fbrightly-decorate-graph","\u002Fposts\u002Fgit","posts\u002Fgit",[488,491,495,499,503],{"title":489,"path":484,"stem":490,"icon":435},"Brightly decorate your GitHub Graph","posts\u002Fgit\u002Fbrightly-decorate-graph",{"title":492,"path":493,"stem":494,"icon":435},"Download a specific folder on GitHub repository","\u002Fposts\u002Fgit\u002Fdownload-specific-folder","posts\u002Fgit\u002Fdownload-specific-folder",{"title":496,"path":497,"stem":498,"icon":435},"Syncing Git Tags across to other repositories","\u002Fposts\u002Fgit\u002Fsyncing-tags-across-repositories","posts\u002Fgit\u002Fsyncing-tags-across-repositories",{"title":500,"path":501,"stem":502,"icon":435},"Unlocking GitHub Achievement badges","\u002Fposts\u002Fgit\u002Funlocking-achievement-badges","posts\u002Fgit\u002Funlocking-achievement-badges",{"title":504,"path":505,"stem":506,"icon":435},"Essential Git commands every developer should master","\u002Fposts\u002Fgit\u002Fuseful-commands-like-pro","posts\u002Fgit\u002Fuseful-commands-like-pro",{"title":508,"icon":509,"redirect":510,"path":511,"stem":512,"children":513,"page":462},"Golang","material-icon-theme:go","\u002Fposts\u002Fgolang\u002Foptimizing-performance-with-pgo","\u002Fposts\u002Fgolang","posts\u002Fgolang",[514],{"title":515,"path":510,"stem":516,"icon":435},"Optimizing Performance in Go Applications with PGO","posts\u002Fgolang\u002Foptimizing-performance-with-pgo",{"title":518,"icon":519,"redirect":520,"path":521,"stem":522,"children":523,"page":462},"JavaScript","vscode-icons:file-type-js","\u002Fposts\u002Fjavascript\u002F9-lines-of-tips","\u002Fposts\u002Fjavascript","posts\u002Fjavascript",[524,527],{"title":525,"path":520,"stem":526,"icon":435},"9 lines of JavaScript replace 50 lines of code","posts\u002Fjavascript\u002F9-lines-of-tips",{"title":528,"path":529,"stem":530,"icon":435},"Javascript Promises - Specific functions and use cases","\u002Fposts\u002Fjavascript\u002Fpromises-cheatsheet","posts\u002Fjavascript\u002Fpromises-cheatsheet",{"title":532,"icon":533,"redirect":534,"path":535,"stem":536,"children":537,"page":462},"Node","material-icon-theme:nodejs-alt","\u002Fposts\u002Fnodejs\u002Fevent-loop","\u002Fposts\u002Fnodejs","posts\u002Fnodejs",[538],{"title":539,"path":534,"stem":540,"icon":435},"Secret about Event Loop flow in Nodejs","posts\u002Fnodejs\u002Fevent-loop",{"title":542,"icon":543,"redirect":544,"path":545,"stem":546,"children":547,"page":462},"Nuxt","vscode-icons:file-type-nuxt","\u002Fposts\u002Fnuxt\u002Fenable-pwa-in-nuxt","\u002Fposts\u002Fnuxt","posts\u002Fnuxt",[548],{"title":549,"path":544,"stem":550,"icon":435},"Enable PWA and Service Worker in Nuxt","posts\u002Fnuxt\u002Fenable-pwa-in-nuxt",{"title":552,"icon":553,"redirect":554,"path":555,"stem":556,"children":557,"page":462},"Performance","emojione:rocket","\u002Fposts\u002Fperformance\u002Fbackground-image-injection-problem","\u002Fposts\u002Fperformance","posts\u002Fperformance",[558],{"title":559,"path":554,"stem":560,"icon":435},"Background-Image injection problem in UX","posts\u002Fperformance\u002Fbackground-image-injection-problem",{"title":562,"icon":563,"redirect":564,"path":565,"stem":566,"children":567,"page":462},"Tutorial","fluent-color:book-open-lightbulb-24","\u002Fposts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers","\u002Fposts\u002Ftutorial","posts\u002Ftutorial",[568,571,575,579,583],{"title":569,"path":564,"stem":570,"icon":435},"Classification and functionality of the servers","posts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers",{"title":572,"path":573,"stem":574,"icon":435},"What is the difference between localhost and 127.0.0.1?","\u002Fposts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1","posts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1",{"title":576,"path":577,"stem":578,"icon":435},"8 essential network protocols every programmer should know","\u002Fposts\u002Ftutorial\u002Fessential-network-protocols","posts\u002Ftutorial\u002Fessential-network-protocols",{"title":580,"path":581,"stem":582,"icon":435},"Pre rels in header link tag - SEO technique enhancement","\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag","posts\u002Ftutorial\u002Fpre-rels-in-header-link-tag",{"title":584,"path":585,"stem":586,"icon":435},"Better code with SOLID principles","\u002Fposts\u002Ftutorial\u002Fwhat-is-solid","posts\u002Ftutorial\u002Fwhat-is-solid",{"title":588,"icon":589,"redirect":590,"path":591,"stem":592,"children":593,"page":462},"UI\u002FUX","devicon:figma","\u002Fposts\u002Fuiux\u002Fcommon-button-mistake","\u002Fposts\u002Fuiux","posts\u002Fuiux",[594],{"title":595,"path":590,"stem":596,"icon":435},"Common Button Mistake in UI\u002FUX","posts\u002Fuiux\u002Fcommon-button-mistake",{"title":598,"icon":599,"path":600,"stem":601,"children":602,"page":462},"Cheatsheets","fluent-color:paw-16","\u002Fcheatsheets","cheatsheets",[603,608,613,616,621,624,627,631,636,641,646,651,656,661,665,669,674,679,683,688,693,698],{"title":604,"path":605,"stem":606,"icon":607},"Bash","\u002Fcheatsheets\u002Fbash","cheatsheets\u002Fbash","material-icon-theme:powershell",{"title":609,"path":610,"stem":611,"icon":612},"CSS","\u002Fcheatsheets\u002Fcss","cheatsheets\u002Fcss","vscode-icons:file-type-css2",{"title":464,"path":614,"stem":615,"icon":465},"\u002Fcheatsheets\u002Fdocker","cheatsheets\u002Fdocker",{"title":617,"path":618,"stem":619,"icon":620},"Git","\u002Fcheatsheets\u002Fgit","cheatsheets\u002Fgit","devicon:git",{"title":508,"path":622,"stem":623,"icon":509},"\u002Fcheatsheets\u002Fgo","cheatsheets\u002Fgo",{"title":5,"path":625,"stem":626,"icon":433},"\u002Fcheatsheets\u002Fhtml","cheatsheets\u002Fhtml",{"title":518,"path":628,"stem":629,"icon":630},"\u002Fcheatsheets\u002Fjavascript","cheatsheets\u002Fjavascript","material-icon-theme:javascript",{"title":632,"path":633,"stem":634,"icon":635},"Latex","\u002Fcheatsheets\u002Flatex","cheatsheets\u002Flatex","material-icon-theme:latexmk",{"title":637,"path":638,"stem":639,"icon":640},"Linux","\u002Fcheatsheets\u002Flinux","cheatsheets\u002Flinux","devicon:linux",{"title":642,"path":643,"stem":644,"icon":645},"Markdown","\u002Fcheatsheets\u002Fmarkdown","cheatsheets\u002Fmarkdown","material-icon-theme:markdown",{"title":647,"path":648,"stem":649,"icon":650},"Mongo","\u002Fcheatsheets\u002Fmongo","cheatsheets\u002Fmongo","devicon:mongodb",{"title":652,"path":653,"stem":654,"icon":655},"Nest","\u002Fcheatsheets\u002Fnest","cheatsheets\u002Fnest","material-icon-theme:nest",{"title":657,"path":658,"stem":659,"icon":660},"Next","\u002Fcheatsheets\u002Fnext","cheatsheets\u002Fnext","logos:nextjs-icon",{"title":532,"path":662,"stem":663,"icon":664},"\u002Fcheatsheets\u002Fnode","cheatsheets\u002Fnode","material-icon-theme:nodejs",{"title":542,"path":666,"stem":667,"icon":668},"\u002Fcheatsheets\u002Fnuxt","cheatsheets\u002Fnuxt","material-icon-theme:nuxt",{"title":670,"path":671,"stem":672,"icon":673},"React","\u002Fcheatsheets\u002Freact","cheatsheets\u002Freact","material-icon-theme:react",{"title":675,"path":676,"stem":677,"icon":678},"Redis","\u002Fcheatsheets\u002Fredis","cheatsheets\u002Fredis","vscode-icons:folder-type-redis-opened",{"title":680,"path":681,"stem":682,"icon":454},"SQL","\u002Fcheatsheets\u002Fsql","cheatsheets\u002Fsql",{"title":684,"path":685,"stem":686,"icon":687},"Typescript","\u002Fcheatsheets\u002Ftypescript","cheatsheets\u002Ftypescript","material-icon-theme:typescript",{"title":689,"path":690,"stem":691,"icon":692},"Vercel","\u002Fcheatsheets\u002Fvercel","cheatsheets\u002Fvercel","vscode-icons:file-type-light-vercel",{"title":694,"path":695,"stem":696,"icon":697},"Vue","\u002Fcheatsheets\u002Fvue","cheatsheets\u002Fvue","material-icon-theme:vue",{"title":699,"path":700,"stem":701,"icon":702},"Windows","\u002Fcheatsheets\u002Fwindow","cheatsheets\u002Fwindow","material-icon-theme:folder-windows",{"title":704,"icon":705,"path":706,"stem":707,"children":708,"page":462},"Templates","fluent-color:data-pie-24","\u002Ftemplates","templates",[709,712,715,718,721],{"title":508,"path":710,"stem":711,"icon":509},"\u002Ftemplates\u002Fgo","templates\u002Fgo",{"title":657,"path":713,"stem":714,"icon":660},"\u002Ftemplates\u002Fnext","templates\u002Fnext",{"title":542,"path":716,"stem":717,"icon":668},"\u002Ftemplates\u002Fnuxt","templates\u002Fnuxt",{"title":670,"path":719,"stem":720,"icon":673},"\u002Ftemplates\u002Freact","templates\u002Freact",{"title":694,"path":722,"stem":723,"icon":697},"\u002Ftemplates\u002Fvue","templates\u002Fvue",{"title":725,"icon":599,"path":726,"stem":727,"children":728,"page":462},"Interviews","\u002Finterviews","interviews",[729],{"title":5,"path":437,"stem":441,"icon":433}]