110 HTML Interview Questions and Answers (2026)

"}},{"@type":"Question","name":"What is the hidden attribute, and how does its behavior differ from CSS display: none?","acceptedAnswer":{"@type":"Answer","text":"hidden is a boolean global attribute meaning the element is not currently relevant, so the browser doesn't render it. It's semantically richer than display: none but is implemented as a weak CSS default that styling can override. What hidden does: Removes the element from rendering and the accessibility tree, signaling intent (\"not relevant right now\"). The HTML5 hidden=\"until-found\" value keeps content findable via in-page search and reveals it. How it differs from display: none: hidden only applies the UA default display: none; any explicit display rule in CSS overrides it, leaving the element visible despite the attribute. It carries semantic meaning; display: none is purely presentational. Practical note: prefer hidden for relevance-based visibility, but be aware CSS can silently defeat it."}},{"@type":"Question","name":"What does the contenteditable global attribute do?","acceptedAnswer":{"@type":"Answer","text":"contenteditable is a global attribute that makes an element's content directly editable by the user in the browser, turning ordinary markup into an editable region. Values: true (or empty) makes it editable; false makes it non-editable; inherit follows the parent. How it behaves: Users can type, delete, and format text; the browser maintains the editing caret and selection. It's the foundation of rich-text editors (the WYSIWYG building block). Caveats: Edits change the live DOM, not a form value, so you read content via JS, not a name/form submission. Cross-browser behavior (generated markup, paste handling) is inconsistent, so production editors add heavy normalization."}},{"@type":"Question","name":"What does the translate global attribute do, and when would you use it?","acceptedAnswer":{"@type":"Answer","text":"translate is a global attribute that tells translation tools (browser translators, machine translation) whether an element's text content should be translated or left as-is. Values: yes (default, translatable) or no (leave untranslated); the setting is inherited by descendants. When to use translate=\"no\": Proper nouns: brand names, product names, and people's names that shouldn't change. Technical strings: code samples, commands, or literal values that must stay exact. It's a hint to translation engines, not enforced rendering, but well-behaved tools (including Google Translate) honor it.

The error was thrown by JSON.parse().

\n"}},{"@type":"Question","name":"What is the purpose of the and elements, and how do they differ?","acceptedAnswer":{"@type":"Answer","text":"Both render a bar, but shows completion toward a goal (a task in motion), while shows a scalar measurement within a known range (a static gauge). : task completion: Uses value and max; represents how far along something is (file upload, loading). Omitting value gives an indeterminate state (unknown duration). : a measurement on a scale: Uses min, max, value, plus low, high, and optimum to color zones (good/warning). For a known fixed range: disk usage, score, temperature. Key distinction: progress changes over time toward 100%; a meter just reports a current reading. Don't use for progress or vice versa."}},{"@type":"Question","name":"What is the purpose of rel=\"noopener noreferrer\" when using target=\"_blank\" on a link?","acceptedAnswer":{"@type":"Answer","text":"These rel values protect security and privacy when a link opens a new tab with target=\"_blank\": noopener prevents the new page from controlling your page, and noreferrer withholds the referrer. noopener: closes a security hole: Without it, the opened page can access window.opener and redirect your original tab (a phishing vector called tabnabbing). It severs that reference so window.opener is null. noreferrer: privacy plus the same protection: Stops the browser sending the Referer header, hiding where the user came from. It also implies noopener behavior in modern browsers. Modern note: most current browsers now default target=\"_blank\" links to noopener automatically, but stating it explicitly is still best practice for older browsers and clarity."}},{"@type":"Question","name":"What is a 'skip link,' and why is it important for keyboard users?","acceptedAnswer":{"@type":"Answer","text":"A skip link is a hidden-until-focused link at the top of a page that jumps keyboard and screen reader users straight to the main content, letting them bypass repetitive navigation. What it is: Typically the first focusable element, e.g. Skip to content, pointing to the main content container. Why it matters: Keyboard users tab through the page in order; without it they must tab past every nav link on every page load. Required to meet WCAG 2.4.1 (Bypass Blocks). Implementation detail: Usually visually hidden but revealed :focus so sighted keyboard users can see it; the target should be focusable (add tabindex=\"-1\" if needed)."}},{"@type":"Question","name":"What is the rel='nofollow' attribute on a link, and when would you use it?","acceptedAnswer":{"@type":"Answer","text":"rel=\"nofollow\" tells search engines not to pass ranking credit (link equity) through a link and generally not to follow it for ranking purposes. What it signals: You don't endorse the target or don't want to vouch for it for SEO purposes. When to use it: User-generated content like comments and forums, where you can't vouch for posted links. Paid or sponsored links, to comply with search engine guidelines. Untrusted or low-quality links you must include. Related values: Google introduced more specific hints: rel=\"sponsored\" for paid links and rel=\"ugc\" for user-generated content."}},{"@type":"Question","name":"What does the novalidate attribute do on a form?","acceptedAnswer":{"@type":"Answer","text":"The novalidate attribute on a

tells the browser to skip native HTML5 constraint validation when the form is submitted, allowing it to submit even if fields fail rules like required or pattern. What it suppresses: The browser's automatic checks and built-in error bubbles on submit. When to use it: When you implement custom JavaScript validation and want full control over messaging. During testing/debugging to bypass validation quickly. Related: the formnovalidate attribute on a submit button skips validation for that one submit action only. Note: it does not disable the Constraint Validation API, so you can still call checkValidity() manually."}},{"@type":"Question","name":"Explain how native HTML5 validation works using attributes like required, pattern, and type=\"email\".","acceptedAnswer":{"@type":"Answer","text":"Native HTML5 validation uses declarative constraint attributes on inputs; on submit the browser checks each field against its constraints, blocks submission if any are invalid, and shows a built-in error message, all without JavaScript. Key constraint attributes: required: field must not be empty. type=\"email\"/type=\"url\": value must match the expected format. pattern: value must match a regular expression. min, max, minlength, maxlength, step: numeric and length bounds. How it surfaces: CSS pseudo-classes :valid, :invalid, :required style fields by state. The Constraint Validation API (checkValidity(), setCustomValidity(), validity) lets you read state and set custom messages. Limits: client validation is for UX only and can be bypassed, so always re-validate on the server. \n"}},{"@type":"Question","name":"What is the purpose of the datalist element, and how does it differ from a standard select dropdown?","acceptedAnswer":{"@type":"Answer","text":"The element provides a list of suggested values for a free-text , combining autocomplete hints with the ability to type any value, whereas a \n\n "}},{"@type":"Question","name":"What do the placeholder, autocomplete, and maxlength attributes do on form inputs, and why isn't placeholder a substitute for a label?","acceptedAnswer":{"@type":"Answer","text":"These attributes guide input but serve different jobs: placeholder shows hint text, autocomplete controls browser autofill, and maxlength caps the number of characters. A placeholder cannot replace a label because it disappears on input and is unreliable for accessibility. placeholder: Faint example/hint text shown only while the field is empty. autocomplete: Tells the browser whether/how to autofill; use tokens like email, name, off for better autofill or to disable it. maxlength: Hard limit on character count entered; pair with minlength for a floor. Why placeholder ≠ label: It vanishes once typing starts, removing context and hurting users with memory or cognitive needs. Screen-reader support is inconsistent, and low contrast fails readability. A real stays visible, is announced, and expands the clickable target. Email\n"}},{"@type":"Question","name":"What does the multiple attribute do, and how does the accept attribute work on a file input?","acceptedAnswer":{"@type":"Answer","text":"On a file input, multiple lets the user pick more than one file at once, and accept hints which file types the picker should offer. Both are conveniences, not security controls. multiple: Allows selecting several files; on it enables multi-file upload. Submit each file under the same name (often as an array on the server). accept: Takes a comma-separated list of MIME types (image/png), wildcards (image/*), or extensions (.pdf). Filters/suggests in the OS file dialog but does not enforce it: validate type and size on the server. "}},{"@type":"Question","name":"What is the enctype attribute on a form, and when must you use multipart/form-data?","acceptedAnswer":{"@type":"Answer","text":"enctype specifies how form data is encoded before being sent in a POST request. You must use multipart/form-data whenever the form uploads files, because binary data can't be safely URL-encoded. application/x-www-form-urlencoded (default): Fields are sent as key=value pairs, percent-encoded; fine for plain text fields. multipart/form-data: Splits the body into parts with boundaries, each carrying its own headers; required for . Sends raw bytes without encoding overhead, so large/binary files transfer intact. text/plain: Minimal encoding, used for debugging only: avoid in production. Only applies with method=\"post\"; GET always appends data to the URL as a query string. \n \n \n"}},{"@type":"Question","name":"What is the element used for in a form?","acceptedAnswer":{"@type":"Answer","text":"The element displays the result of a calculation or user action, such as the live total from other form fields. It is a semantic, accessible container that screen readers treat as a live region. Purpose: Represents computed output, distinct from user-entered input. Key attributes: for lists the IDs of the elements the result depends on (a relationship hint). name lets it participate in the form's element collection (though it isn't submitted). Accessibility: It is an implicit aria-live region, so updates are announced without extra code. "}},{"@type":"Question","name":"Explain the difference between the

, and

elements. When is one more appropriate than the others?","acceptedAnswer":{"@type":"Answer","text":"All three are semantic sectioning elements, but they differ in self-containment:

is independently distributable content,

is a thematic grouping within a document, and

is tangential content related to its surroundings.

stands alone: Makes sense on its own and could be syndicated: a blog post, news story, comment, or product card. Test: would it still be meaningful if pulled out and shown elsewhere? If yes, use

groups a theme: A thematic chunk of a larger whole, normally with a heading: chapters, tabbed panels, or grouped settings. Not a generic styling box: reach for

when there is no semantic grouping.

is tangential: Related but not essential to the main flow: sidebars, pull quotes, related links, ads. Choosing between them: Self-contained and reusable, use

; part of this document's outline, use

; supplementary to nearby content, use

. They nest: an

can contain

s, and a

can contain

s."}},{"@type":"Question","name":"When should you use a

instead of just an with a paragraph below it?","acceptedAnswer":{"@type":"Answer","text":"Use
with
when an image (or code, chart, table) and its caption form a single self-contained unit that is referenced by the main content but could move elsewhere without breaking the flow. The caption is programmatically tied to the content:
semantically associates the text with the figure, unlike a loose
that just happens to sit below the image. The unit is self-contained and relocatable: A figure can move to a sidebar or appendix and still make sense, because content is referenced (\"see figure 2\"), not depended on by position. Use a plain plus text when: The image is purely decorative or the surrounding paragraph is regular prose, not a caption. alt vs caption: alt describes the image for users who can't see it;
is a visible caption for everyone. They serve different purposes, so don't treat one as a replacement for the other.
\n $\"Sales$ \n
Figure 2: Quarterly sales growth.
\n
"}},{"@type":"Question","name":"What are the rules for using heading tags (
through
)? Can you have multiple
tags on a single page?","acceptedAnswer":{"@type":"Answer","text":"Headings rank content from
(most important) to
(least), and you should descend in order without skipping levels. In HTML5 you may have multiple
tags, but it's usually better to keep one per page. Use headings to convey structure, not styling: They create the document outline that screen readers and search engines navigate. Don't skip levels going down: Jumping from
to
breaks the hierarchy for assistive tech. Going back up (
then a new
) is fine. Multiple
is technically allowed: The HTML5 outline spec envisioned each sectioning element (
,
) restarting heading levels. But browsers never implemented that outline algorithm, so a single
as the page title remains the safe, recommended practice."}},{"@type":"Question","name":"Why should a document ideally have only one
element?","acceptedAnswer":{"@type":"Answer","text":"The
element marks the one block of content unique to a page, so having a single one gives assistive technology an unambiguous \"skip to content\" target. It identifies the primary content: Excludes repeated content like the site header, nav, and footer. Multiple
elements would make \"the main content\" ambiguous. Accessibility relies on it: Screen readers expose
as the main landmark, letting users jump straight to it. Spec rule: At most one
may be visible per document; any others must be hidden with hidden. Having two visible is invalid HTML."}},{"@type":"Question","name":"What is the purpose of the
element, and what are the common misconceptions about its usage?","acceptedAnswer":{"@type":"Answer","text":"The
element provides contact information for its nearest
or for the document as a whole (its author/owner), such as an email, phone, or physical address of the person responsible. Intended use: Contact details for the author of an article or the maintainer of a page, often placed inside a
. Misconception: it's for any postal address: It is NOT for arbitrary addresses (e.g. a mailing address in body text or a shipping address); those are just plain text. Misconception: it implies italic styling: Browsers render it italic by default, but that's presentation; its meaning is contact info, not emphasis. Content restriction: It must not contain headings, sectioning elements like
, or things unrelated to contact info such as publication dates."}},{"@type":"Question","name":"What is the purpose of the element introduced in recent HTML standards?","acceptedAnswer":{"@type":"Answer","text":"The element is a semantic container that groups the controls used to perform a search or filtering operation, giving that region an explicit search landmark role. What it replaces: The old pattern of
; provides that landmark natively. It's not a form itself: It's a grouping/landmark wrapper. You still put an actual , inputs, and a button inside (or use it for in-page filtering with no submission). Accessibility benefit: Screen readers expose it as a search landmark users can jump to. \n \n Find: \n \n \n"}},{"@type":"Question","name":"When would you use an
tag versus a
for supplementary information?","acceptedAnswer":{"@type":"Answer","text":"Use
for content tangentially related to the main content (it could be removed without hurting the core), and
for closing/meta information about a section or the page (authorship, copyright, related links).
: parenthetical, side content: Pull quotes, related-article callouts, sidebars, ad units, glossary notes. Test: does it complement but stand apart from the main flow? If yes,
.
: end matter about its section: Author info, publication date, copyright, contact (
), back-to-top or related links. Can apply to the whole page or to a single
. They can coexist: They aren't alternatives: a page may have a sidebar
and a site
serving different roles."}},{"@type":"Question","name":"What are breadcrumbs in navigation, and how should they be marked up semantically?","acceptedAnswer":{"@type":"Answer","text":"Breadcrumbs are a navigation trail showing the current page's position within the site hierarchy (e.g. Home > Products > Shoes), helping users understand where they are and move up levels. Mark them up as an ordered list inside a labeled
. Wrap in a labeled
: Use aria-label=\"Breadcrumb\" so screen readers distinguish it from other navigation. Use an ordered list:
because the sequence (depth order) is meaningful, not arbitrary. Mark the current page: Give the last item aria-current=\"page\" and typically no link. Separators are presentation: Add \">\" or \"/\" via CSS (::before), not as text content, so they aren't read aloud. Optional structured data: Add BreadcrumbList schema for richer search engine results.
\n
\n
Home
\n
Products
\n
Shoes
\n
\n
"}},{"@type":"Question","name":"How do you handle alt text for an image that is purely decorative versus an image that conveys information?","acceptedAnswer":{"@type":"Answer","text":"Give an informative image an alt that conveys its meaning or function; give a purely decorative image an empty alt=\"\" so screen readers skip it. The rule is to describe purpose, not pixels. Decorative images: empty alt: Use alt=\"\" (present but empty) so assistive tech ignores it. Omitting alt entirely is wrong: some readers will announce the filename instead. Truly background decoration belongs in CSS, not an at all. Informative images: meaningful alt: Describe the information conveyed, concisely, without \"image of\". If the image is a link or button, the alt should describe the action/destination. \n $\"\"$ \n\n\n $\"Sales$ "}},{"@type":"Question","name":"Explain the difference between the srcset attribute and the element. When would you use one over the other?","acceptedAnswer":{"@type":"Answer","text":"Both serve responsive images, but they solve different problems: srcset lets the browser pick among versions of the same image (resolution switching), while lets you explicitly choose different sources via conditions (art direction or format fallback). srcset: browser decides: You supply the same image at different widths/densities; the browser chooses the best fit for the viewport and DPR. Use for resolution switching when the image content stays the same. : author decides: Each has a media or type condition; the first match wins. Use for art direction (different crops per screen) or format fallback (serve AVIF/WebP with a JPEG fallback). Rule of thumb: Same picture, different size: use srcset. Different picture or format per condition: use . \n \n \n $\"Mountain$ \n"}},{"@type":"Question","name":"Explain the srcset and sizes attributes in an tag. How do they help the browser choose the right image?","acceptedAnswer":{"@type":"Answer","text":"srcset lists candidate image files with descriptors, and sizes tells the browser how wide the image will render at different breakpoints. Together they let the browser pick the smallest file that still looks sharp, before layout is even computed. srcset with width descriptors: Each entry ends in a w value (the file's intrinsic pixel width), e.g. img-800.jpg 800w. You can also use x descriptors (2x) for simple density switching without sizes. sizes: rendered width hints: A list of (media-condition) width pairs telling the browser how big the image box will be. The browser multiplies that width by the device pixel ratio to know how many real pixels it needs. How the choice happens: Browser computes required pixels (slot width x DPR), then picks the smallest srcset candidate that meets or exceeds it: saves bandwidth, stays sharp. "}},{"@type":"Question","name":"How do you provide fallback content for browsers that do not support the

through

)? Can you have multiple

tags on a single page?","acceptedAnswer":{"@type":"Answer","text":"Headings rank content from

(most important) to

(least), and you should descend in order without skipping levels. In HTML5 you may have multiple

tags, but it's usually better to keep one per page. Use headings to convey structure, not styling: They create the document outline that screen readers and search engines navigate. Don't skip levels going down: Jumping from

to

breaks the hierarchy for assistive tech. Going back up (

then a new

) is fine. Multiple

110 HTML Interview Questions and Answers (2026)

Q1.What is the purpose of the <!DOCTYPE html> declaration, and what happens if you omit it?

Q2.Explain the difference between the <head> and <body> sections of an HTML document.

Q3.Why is the lang attribute on the <html> tag considered a best practice for both SEO and accessibility?

Q4.Explain the difference between the <title> tag and the meta description tag in terms of document metadata.

Q5.What is the purpose of the <meta charset> declaration, and why is UTF-8 the recommended encoding?

Q6.What is the purpose of <link rel='icon'> and how do you provide favicons for a site?

Q7.What is 'Semantic HTML' and why is it preferred over using generic <div> tags?

Q8.What is the difference between <b> and <strong>, or <i> and <em>?

Q9.What are character entities (like &nbsp; or &lt;), and why are they necessary?

Q10.What is the difference between block-level and inline elements in HTML?

Q11.What is the difference between <blockquote>, <q>, and <cite>?

Q12.What is the purpose of the <abbr> element and its title attribute?

Q13.What is the difference between the <code>, <kbd>, <samp>, and <pre> elements?

Q14.What does the <mark> element represent semantically?

Q15.What is the difference between an ID and a Class in HTML, and can an element have multiple of both?

Q16.What is the difference between an absolute URL and a relative URL in an href attribute?

Q17.What do the mailto: and tel: schemes do in an anchor's href, and how are fragment identifiers (#) used?

Q18.What does the download attribute do on an anchor element?

Q19.What is the difference between the GET and POST methods in an HTML <form> tag?

Q20.What is the purpose of the <fieldset> and <legend> tags?

Q21.How do you programmatically associate a <label> with an <input>, and why is this critical for accessibility?

Q22.What is the difference between the readonly and disabled attributes on a form input?

Q23.What are some of the new input types introduced in HTML5 (e.g., email, tel, date), and what are their benefits?

Q24.What are the different type values for a <button> (submit, reset, button) and what is the default behavior if the type is omitted?

Q25.Explain the difference between the name and id attributes on a form input.

Q26.What is the role of the <textarea> element, and how does it differ from a text <input>?

Q27.What is the purpose of the <select>, <optgroup>, and <option> elements?

Q28.What is the purpose of the action and method attributes on a <form>?

Q29.Explain the correct hierarchy for heading tags (h1 through h6). Why shouldn't you pick a heading level based on its default font size?

Q30.What is the role of the <nav> element, and should every group of links be wrapped in one?

Q31.What is the purpose of the <header> and <footer> elements, and can a page have more than one of each?

Q32.What are the alt, width, and height attributes on an <img>, and why does specifying dimensions help prevent layout shift?

Q33.What is the purpose of the <noscript> element?

Q34.Explain the difference between <thead>, <tbody>, and <tfoot>.

Q35.How do colspan and rowspan affect the structure of a table?

Q36.What is the difference between a <ul>, <ol>, and <dl>? When is a description list the correct choice?

Q37.How do the start, reversed, and value attributes work on ordered lists?

Q38.What is the difference between <link rel="stylesheet"> and <style>?

Q39.Explain the use case for the <details> and <summary> elements.

Q40.Explain the significance of the <meta name="viewport"> tag. What specific problem does content="width=device-width, initial-scale=1" solve?

Q41.What is the base element used for, and what are the risks of using it in a large application?

Q42.When would you use a <link rel="canonical"> tag?

Q43.What are Open Graph meta tags, and how do they affect how a webpage is perceived by external platforms?

Q44.What are Void Elements in HTML, and how do they differ from normal elements?

Q45.What is the conceptual difference between <b> and <strong>, and how do they differ in terms of accessibility?

Q46.Explain the difference between <i> and <em>. When should you use one over the other?

Q47.What is the purpose of the <time> element, and how does the datetime attribute help machines?

Q48.What is the difference between the dir attribute and the <bdi>/<bdo> elements for handling text direction?

Q49.What are data-* attributes, and what is the 'contract' they create between HTML and JavaScript?

Q50.What is the hidden attribute, and how does its behavior differ from CSS display: none?

Q51.What does the contenteditable global attribute do?

Q52.What does the translate global attribute do, and when would you use it?

Q53.What is the purpose of the <progress> and <meter> elements, and how do they differ?

Q54.What is the purpose of rel="noopener noreferrer" when using target="_blank" on a link?

Q55.What is a 'skip link,' and why is it important for keyboard users?

Q56.What is the rel='nofollow' attribute on a link, and when would you use it?

Q57.What does the novalidate attribute do on a form?

Q58.Explain how native HTML5 validation works using attributes like required, pattern, and type="email".

Q59.What is the purpose of the datalist element, and how does it differ from a standard select dropdown?

Q60.What do the placeholder, autocomplete, and maxlength attributes do on form inputs, and why isn't placeholder a substitute for a label?

Q61.What does the multiple attribute do, and how does the accept attribute work on a file input?

Q62.What is the enctype attribute on a form, and when must you use multipart/form-data?

Q63.What is the <output> element used for in a form?

Q64.Explain the difference between the <article>, <section>, and <aside> elements. When is one more appropriate than the others?

Q65.When should you use a <figure> and <figcaption> instead of just an <img> with a paragraph below it?

Q66.What are the rules for using heading tags (<h1> through <h6>)? Can you have multiple <h1> tags on a single page?

Q67.Why should a document ideally have only one <main> element?

Q68.What is the purpose of the <address> element, and what are the common misconceptions about its usage?

Q69.What is the purpose of the <search> element introduced in recent HTML standards?

Q1.
What is the purpose of the `<!DOCTYPE html>` declaration, and what happens if you omit it?

Q2.
Explain the difference between the `<head>` and `<body>` sections of an HTML document.

Q3.
Why is the `lang` attribute on the `<html>` tag considered a best practice for both SEO and accessibility?

Q4.
Explain the difference between the `<title>` tag and the meta description tag in terms of document metadata.

Q5.
What is the purpose of the `<meta charset>` declaration, and why is `UTF-8` the recommended encoding?

Q6.
What is the purpose of `<link rel='icon'>` and how do you provide favicons for a site?

Q7.
What is 'Semantic HTML' and why is it preferred over using generic `<div>` tags?

Q8.
What is the difference between `<b>` and `<strong>`, or `<i>` and `<em>`?

Q9.
What are character entities (like ` ` or `<`), and why are they necessary?

Q10.
What is the difference between block-level and inline elements in HTML?

Q11.
What is the difference between `<blockquote>`, `<q>`, and `<cite>`?

Q12.
What is the purpose of the `<abbr>` element and its `title` attribute?

Q13.
What is the difference between the `<code>`, `<kbd>`, `<samp>`, and `<pre>` elements?

Q14.
What does the `<mark>` element represent semantically?

Q15.
What is the difference between an ID and a Class in HTML, and can an element have multiple of both?

Q16.
What is the difference between an absolute URL and a relative URL in an `href` attribute?

Q17.
What do the `mailto:` and `tel:` schemes do in an anchor's `href`, and how are fragment identifiers (`#`) used?

Q18.
What does the `download` attribute do on an anchor element?

Q19.
What is the difference between the GET and POST methods in an HTML `<form>` tag?

Q20.
What is the purpose of the `<fieldset>` and `<legend>` tags?

Q21.
How do you programmatically associate a `<label>` with an `<input>`, and why is this critical for accessibility?

Q22.
What is the difference between the `readonly` and `disabled` attributes on a form input?

Q23.
What are some of the new input types introduced in `HTML5` (e.g., `email`, `tel`, `date`), and what are their benefits?

Q24.
What are the different type values for a `<button>` (`submit`, `reset`, `button`) and what is the default behavior if the type is omitted?

Q25.
Explain the difference between the `name` and `id` attributes on a form input.

Q26.
What is the role of the `<textarea>` element, and how does it differ from a text `<input>`?

Q27.
What is the purpose of the `<select>`, `<optgroup>`, and `<option>` elements?

Q28.
What is the purpose of the `action` and `method` attributes on a `<form>`?

Q29.
Explain the correct hierarchy for heading tags (`h1` through `h6`). Why shouldn't you pick a heading level based on its default font size?

Q30.
What is the role of the `<nav>` element, and should every group of links be wrapped in one?

Q31.
What is the purpose of the `<header>` and `<footer>` elements, and can a page have more than one of each?

Q32.
What are the `alt`, `width`, and `height` attributes on an `<img>`, and why does specifying dimensions help prevent layout shift?

Q33.
What is the purpose of the `<noscript>` element?

Q34.
Explain the difference between `<thead>`, `<tbody>`, and `<tfoot>`.

Q35.
How do `colspan` and `rowspan` affect the structure of a table?

Q36.
What is the difference between a `<ul>`, `<ol>`, and `<dl>`? When is a description list the correct choice?

Q37.
How do the `start`, `reversed`, and `value` attributes work on ordered lists?

Q38.
What is the difference between `<link rel="stylesheet">` and `<style>`?

Q39.
Explain the use case for the `<details>` and `<summary>` elements.

Q40.
Explain the significance of the `<meta name="viewport">` tag. What specific problem does `content="width=device-width, initial-scale=1"` solve?

Q41.
What is the `base` element used for, and what are the risks of using it in a large application?

Q42.
When would you use a `<link rel="canonical">` tag?

Q43.
What are Open Graph meta tags, and how do they affect how a webpage is perceived by external platforms?

Q44.
What are Void Elements in HTML, and how do they differ from normal elements?

Q45.
What is the conceptual difference between `<b>` and `<strong>`, and how do they differ in terms of accessibility?

Q46.
Explain the difference between `<i>` and `<em>`. When should you use one over the other?

Q47.
What is the purpose of the `<time>` element, and how does the `datetime` attribute help machines?

Q48.
What is the difference between the `dir` attribute and the `<bdi>`/`<bdo>` elements for handling text direction?

Q49.
What are `data-*` attributes, and what is the 'contract' they create between HTML and JavaScript?

Q50.
What is the `hidden` attribute, and how does its behavior differ from CSS `display: none`?

Q51.
What does the `contenteditable` global attribute do?

Q52.
What does the `translate` global attribute do, and when would you use it?

Q53.
What is the purpose of the `<progress>` and `<meter>` elements, and how do they differ?

Q54.
What is the purpose of `rel="noopener noreferrer"` when using `target="_blank"` on a link?

Q55.
What is a 'skip link,' and why is it important for keyboard users?

Q56.
What is the `rel='nofollow'` attribute on a link, and when would you use it?

Q57.
What does the `novalidate` attribute do on a form?

Q58.
Explain how native HTML5 validation works using attributes like `required`, `pattern`, and `type="email"`.

Q59.
What is the purpose of the `datalist` element, and how does it differ from a standard `select` dropdown?

Q60.
What do the `placeholder`, `autocomplete`, and `maxlength` attributes do on form inputs, and why isn't `placeholder` a substitute for a label?

Q61.
What does the `multiple` attribute do, and how does the `accept` attribute work on a file input?

Q62.
What is the `enctype` attribute on a form, and when must you use `multipart/form-data`?

Q63.
What is the `<output>` element used for in a form?

Q64.
Explain the difference between the `<article>`, `<section>`, and `<aside>` elements. When is one more appropriate than the others?

Q65.
When should you use a `<figure>` and `<figcaption>` instead of just an `<img>` with a paragraph below it?

Q66.
What are the rules for using heading tags (`<h1>` through `<h6>`)? Can you have multiple `<h1>` tags on a single page?

Q67.
Why should a document ideally have only one `<main>` element?

Q68.
What is the purpose of the `<address>` element, and what are the common misconceptions about its usage?

Q69.
What is the purpose of the `<search>` element introduced in recent HTML standards?

Q70.
When would you use an `<aside>` tag versus a `<footer>` for supplementary information?

Q71.
What are breadcrumbs in navigation, and how should they be marked up semantically?

Q72.
How do you handle `alt` text for an image that is purely decorative versus an image that conveys information?

Q73.
Explain the difference between the srcset attribute and the `<picture>` element. When would you use one over the other?

Q74.
Explain the `srcset` and `sizes` attributes in an `<img>` tag. How do they help the browser choose the right image?

Q75.
How do you provide fallback content for browsers that do not support the `<video>` or `<audio>` tags?

Q76.
Explain the purpose of the `<track>` element within a `<video>` tag.

Q77.
What is an `<iframe>`, and why are the `title` and `sandbox` attributes important?

Q78.
How do you embed inline SVG accessibly using the `title` and `role` attributes?

Q79.
What is the `<canvas>` element, and what role does it play purely as markup?

Q80.
What does the `draggable` attribute do as markup?