Pro tip: HTML questions in interviews are often framed as "why" questions — "Why would you use <article> instead of a <div>?" Focus on understanding intent, not just syntax.
HTML Basics (Q1–Q6)
Section 1HTML stands for HyperText Markup Language. It is the standard language for creating web pages. HTML provides the structure of a page — it defines elements like headings, paragraphs, links, images, and forms using tags. It is not a programming language (no logic, loops, or variables) — it is a markup language that describes the meaning and structure of content.
A tag is the raw syntax — like <p> or </p>. An element is everything from the opening tag to the closing tag, including content: <p>Hello</p>. An attribute provides additional information about an element and is always written inside the opening tag: <a href="url"> — here href is the attribute. Some elements are self-closing (void elements) and have no closing tag: <img>, <input>, <br>.
<!DOCTYPE html> is the first line of every HTML document. It tells the browser which version of HTML the page uses. In HTML5, it is simply <!DOCTYPE html> — much simpler than older DOCTYPE declarations. Without a DOCTYPE, browsers enter "quirks mode" — they try to render the page like old browsers did, which can cause layout inconsistencies and unpredictable behavior. Always include it.
Block-level elements start on a new line and take up the full width available: <div>, <p>, <h1>–<h6>, <section>, <article>, <ul>. Inline elements sit within a line of text and only take as much width as their content needs: <span>, <a>, <strong>, <em>, <img>. The distinction is a default CSS display behavior — you can change any element's display with CSS.
<head> and <body>?The <head> contains metadata — information about the document that is not displayed on the page itself: <title>, <meta> tags, <link> for stylesheets, and <script> tags. The <body> contains everything visible to the user — all the actual content: headings, paragraphs, images, forms, navigation, etc.
Void elements are HTML elements that cannot have child content and do not need a closing tag. Examples: <img>, <input>, <br>, <hr>, <meta>, <link>, <area>, <base>. In HTML5, you do not need the trailing slash (<img /> vs <img>) — both are valid, but the trailing slash is from XHTML and is unnecessary in HTML5.
Semantic HTML (Q7–Q12)
Section 2Semantic HTML uses elements that describe the meaning of content rather than just its appearance. For example, using <article> instead of <div class="article">. It matters for three reasons: (1) SEO — search engines better understand the structure and purpose of your content; (2) Accessibility — screen readers use semantic elements to navigate and announce content correctly to users with disabilities; (3) Maintainability — code is more readable and self-documenting.
<article> and <section>?<article> represents a self-contained piece of content that could be distributed independently — a blog post, news article, forum post, or product card. It makes sense on its own without the surrounding page. <section> is a generic thematic grouping of content — it groups related content within a page, like the "About" section or "Features" section of a landing page. A rule of thumb: if the content could stand alone in an RSS feed, use <article>.
<h1> to <h6>)?Headings create a document outline that search engines and screen readers use to understand page structure. There should be one <h1> per page — it is the main topic. Subheadings should follow a logical hierarchy: <h2> for main sections, <h3> for subsections under an <h2>, etc. Never skip heading levels for styling purposes — if you want a smaller heading, use CSS. Skipping levels breaks the document outline and hurts accessibility.
<b> and <strong>, and <i> and <em>?<b> is purely presentational — it makes text bold with no semantic meaning. <strong> indicates that the content is of strong importance — screen readers will emphasize it, and it is bold by default. Similarly, <i> is presentational italic, while <em> means emphasis — it changes the meaning of the sentence. Use <strong> and <em> for meaningful content. Use <b> and <i> only for stylistic purposes where no semantic meaning is intended.
<header>, <main>, <footer>, and <nav> used for?<header> contains introductory content — site logo, navigation, search bar. A page can have multiple headers (one per <article> or <section>). <main> wraps the primary content of the page — there should be only one <main> per page and it should not be nested inside <header>, <footer>, or <nav>. <footer> contains supplementary content — copyright, links, contact info. <nav> wraps major navigation link groups.
<div> and <span>?<div> and <span> are generic containers with no semantic meaning. Use them only when no semantic element fits your purpose — purely for CSS styling or JavaScript targeting. <div> is block-level; <span> is inline. The rule is: always prefer a semantic element first. If you find yourself adding a class like class="article" or class="navigation" to a <div>, consider whether a semantic element like <article> or <nav> would be better.
Forms & Inputs (Q13–Q17)
Section 3GET appends form data to the URL as query parameters: ?name=john&age=30. It is visible in the browser address bar, can be bookmarked, and is cached by browsers. Use GET for search forms or non-sensitive data retrieval. POST sends form data in the HTTP request body — not visible in the URL. Use POST for login forms, file uploads, or any data that modifies server state. POST data is not cached and cannot be bookmarked.
<label> element?The <label> element associates a text description with a form control. This has two benefits: (1) Accessibility — screen readers announce the label when the user focuses the input, making forms usable for visually impaired users; (2) Usability — clicking the label focuses or toggles the associated input, giving users a larger click target. Always connect labels to inputs either by nesting the input inside the label or using the for attribute matching the input's id.
HTML5 introduced many new input types that provide built-in validation and better mobile keyboards: email (validates email format), url (validates URL format), number (allows numeric input with min/max), date/time/datetime-local (date/time pickers), range (slider), color (color picker), search (adds clear button), tel (telephone number — opens numeric keyboard on mobile), password (masks characters). Using the correct type improves both UX and built-in validation.
name and id attributes on form elements?The id attribute must be unique within the page and is used for CSS styling, JavaScript targeting, and connecting <label> elements via the for attribute. The name attribute is used for form submission — it is the key sent to the server with the input's value. An input needs a name attribute to be included in form data. A checkbox or radio button without a name will not send any data when the form is submitted.
required, disabled, and readonly attributes do?required prevents form submission if the field is empty and shows a browser validation message. disabled makes the field completely inactive — users cannot interact with it, it is visually grayed out, and its value is not submitted with the form. readonly lets users see the value and copy it but not edit it — unlike disabled, the value is submitted with the form. Use disabled for unavailable options and readonly for data that should be visible but not changed (like a calculated total).
SEO & Meta Tags (Q18–Q21)
Section 4<meta name="viewport" content="width=device-width, initial-scale=1.0"> tells the browser how to scale the page on different screen sizes. Without it, mobile browsers zoom out to show the full desktop-width page, making text tiny and unreadable. With it, the browser sets the viewport width to the device's actual width — enabling responsive design with media queries to work correctly. It is required in every responsive website and is one of the first lines recommended for all HTML documents.
Open Graph (OG) tags are <meta> tags that control how a page appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and WhatsApp. Key tags: og:title (the title shown in the share preview), og:description (the description text), og:image (thumbnail image), og:url (canonical URL). Without OG tags, social platforms may display ugly or incorrect previews when someone shares your URL. They do not affect Google rankings but significantly impact click-through rates on social media.
<link rel="canonical" href="https://example.com/page"> tells search engines which URL is the "preferred" version of a page when the same or similar content exists at multiple URLs. For example, if example.com/page and example.com/page?ref=twitter show the same content, the canonical tag prevents search engines from treating them as duplicate content and splitting ranking signals. It consolidates all SEO value to one URL.
alt text on images and the title attribute?The alt attribute provides alternative text for images that: (1) is displayed when the image fails to load; (2) is read by screen readers for visually impaired users; (3) is indexed by search engines for image SEO. It should describe what the image shows. The title attribute shows a tooltip when users hover over an element — it's purely informational and not reliably read by screen readers. For accessibility and SEO, alt is essential. Decorative images should have an empty alt="" so screen readers skip them.
Accessibility (Q22–Q25)
Section 5Web accessibility means designing and building websites that can be used by people with disabilities — visual, auditory, motor, or cognitive. The standard is WCAG (Web Content Accessibility Guidelines) published by the W3C. In many countries, accessibility is a legal requirement (ADA in the US, EN 301 549 in Europe). Good accessibility also improves SEO, usability for all users (including those on mobile or slow connections), and general code quality.
ARIA (Accessible Rich Internet Applications) attributes add semantic information to HTML elements for assistive technologies. Common ARIA attributes: aria-label (provides a name for an element), aria-hidden="true" (hides decorative elements from screen readers), aria-expanded (states if a dropdown is open/closed), role (defines the purpose of an element). The golden rule: always use native HTML semantics first. Only add ARIA when no native element exists for your use case. A <button> is always better than <div role="button">.
Keyboard accessibility means all functionality can be accessed without a mouse — using only Tab, Enter, Space, and arrow keys. This is critical for users with motor disabilities who use keyboards or switch devices. HTML handles this automatically for native interactive elements: links (<a>), buttons (<button>), and form inputs are all keyboard-accessible by default. If you build custom interactive components with <div> or <span>, you must add tabindex="0" and keyboard event handlers manually — which is why using native elements is always preferred.
display:none and visibility:hidden from an accessibility perspective?Both hide elements visually, but they differ in accessibility: display:none removes the element from the accessibility tree completely — screen readers cannot find it, and it takes up no space. visibility:hidden hides the element visually but keeps it in the accessibility tree and the DOM flow (it still takes up space). For hiding content from all users including screen readers, use display:none. To visually hide but keep accessible to screen readers (e.g., for skip links), use the "visually hidden" CSS pattern: position absolute, width 1px, height 1px, overflow hidden.
Interview tip: Interviewers love accessibility questions because many candidates skip this topic. Know the basics of ARIA, semantic HTML, keyboard navigation, and color contrast — and you'll immediately stand out from other candidates.