Frontend / README.md

HTML

Updated 2 min read index source
On this page5
  1. The notes
  2. The three things that get asked
  3. Script loading, since it always comes up
  4. Forms
  5. Related

HTML

Nobody is interviewed on <br>. HTML questions at this level are really questions about semantics, forms and the document head — the three places where getting it wrong has consequences a framework cannot paper over.

The notes

# File Covers
01 Constraint Validation API and Senior Input Types native form validation, and why it is not enough
02 Responsive Images — srcset, sizes, <picture> srcset, sizes, <picture>, art direction
03 <head>, Meta Tags, and Document Security viewport, CSP, referrer, what belongs in <head>

Semantic elements, landmarks and heading structure live with accessibility, because that is what they are for: Semantic HTML and Landmarks.

The three things that get asked

Semantics over <div>. A <button> is focusable, keyboard-operable and announced as a button; a <div onClick> is none of those and needs role="button", tabindex="0" and handlers for Enter and Space to approximate it. The same argument runs through <nav>, <main>, <label>, <table> with <th scope>, and <dialog>.

Block versus inline is CSS, not HTML. Every element has a default display from the user-agent stylesheet, and that default is all “block-level element” means — set display: inline on a <div> and it is inline. Phrasing it as a CSS default rather than an HTML category is the more accurate answer.

The head is load-bearing. <meta charset> must be in the first 1024 bytes or the parser may restart; <meta name="viewport"> is what makes a responsive layout responsive on a phone; and a <script> in <head> without defer blocks parsing. That last one is the performance question in Core Web Vitals — LCP, INP, CLS.

Script loading, since it always comes up

html 
<script src="a.js"></script>              <!-- blocks parsing -->
<script src="a.js" defer></script>        <!-- parses in parallel, runs in order after parse -->
<script src="a.js" async></script>        <!-- parses in parallel, runs whenever it lands -->
<script src="a.js" type="module"></script><!-- deferred by default -->

defer for anything that touches the DOM or depends on another script; async only for independent third-party tags like analytics, because execution order is not guaranteed. Modules are deferred automatically, which is why type="module" in <head> is fine.

Forms

The parts worth knowing beyond the tag list:

  • <label for> or wrapping — without it, clicking the text does not focus the input and a screen reader announces nothing.
  • name is what submits. No name, no key in the payload — the most common “my field disappeared” bug.
  • type drives the mobile keyboard. type="email", inputmode="numeric", autocomplete="one-time-code" change what the phone shows, which is a real usability win for free.
  • Client validation is UX, not security. Anything enforced only by required or pattern is enforced by nobody — Constraint Validation API and Senior Input Types.

Contents 3