HTML Interview Prep

Explaining Semantic HTML

Interviewers frequently ask you to explain why semantic HTML is important. Semantic tags (like header, article, and nav) clearly describe their meaning to both browsers and developers, which is crucial for SEO and accessibility.

Example: Explaining Semantic HTML

<article>
  <header>Post title</header>
  <p>Post content</p>
</article>

Explaining the CSS Box Model

The CSS Box Model is the foundation of web design. It governs how elements are sized and spaced on the screen, stacking four layers from the inside out: Content, Padding, Border, and Margin.

Example: Explaining the CSS Box Model

<div style="box-sizing: border-box; width: 200px; padding: 10px; border: 1px solid black;">
  Content
</div>

Script Placement: defer vs. async

Interviewers love to ask about page optimization. By default, browsers pause loading your webpage layout to download and run script files, which can slow down your site's load speed.

Using defer or async attributes allows the browser to download scripts in the background without blocking the layout rendering.

Example: Script Placement: defer vs. async

<script src="analytics.js" async></script>
<script src="app.js" defer></script>

Comparing Local Web Storage Options

You should be prepared to compare standard storage methods: localStorage (persists persistently across browser restarts), sessionStorage (temporary, session-bound data), and Cookies (small, server-shared variables used for session tokens).

Example: Comparing Local Web Storage Options

<script>
  localStorage.setItem('theme', 'dark');
  sessionStorage.setItem('step', '2');
  document.cookie = "session=abc123";
</script>

Handling Accessibility Best Practices

Accessible coding (A11y) is a top priority for modern companies.

Explain how you use standard, semantic HTML elements (like buttons and headers) and ARIA attributes (like aria-label) to keep your pages accessible to screen readers and keyboard-only users.

Example: Handling Accessibility Best Practices

<button aria-label="Close">X</button>