HTML interview questions covering forms, validation, metadata, SEO-related markup, media, responsive images, iframes and accessibility.
Open a question for the full answer, code and interview guidance.
The id attribute identifies an element with a document-wide identifier, while class assigns one or more reusable class names. CSS and JavaScript can use both, but classes are normally preferred for reusable styling.
Custom data attributes let developers store application-specific data on HTML elements using names beginning with data-. JavaScript can access them through the element's dataset property.
The lang attribute declares the primary language of the document. It helps screen readers select appropriate pronunciation rules and helps browsers, translation systems, search engines, and other tools interpret the content correctly.
The charset metadata declares the character encoding used by the HTML document. UTF-8 is the standard choice for modern web pages because it supports a very large range of characters and languages.
The viewport meta tag controls how a page is sized and scaled on mobile devices. A common responsive configuration sets the viewport width equal to the device width and establishes an initial scale of 1.
A meta description is metadata that provides a concise description of a page. Search engines may use it when generating a search-result snippet, although they can choose different text based on the query.
A canonical link identifies the preferred URL for a page when substantially similar content may be accessible through multiple URLs. Search engines can use this signal when consolidating indexing and ranking signals.
The link element describes a relationship between the current document and an external resource or related document, usually from the head. It is commonly used for stylesheets, icons, canonical URLs, and resource hints.
preload tells the browser that a specific resource will be needed soon for the current page and should be fetched with appropriate priority. preconnect asks the browser to establish an early connection to another origin before a resource request is made.
required participates in constraint validation and indicates that a value must be provided before normal form submission. readonly prevents the user from editing certain supported controls while their value can still be submitted.
value represents the current value of a form control and can be submitted with the form. placeholder provides a short hint displayed when an applicable input is empty.
These attributes add browser-side constraints to supported form controls. min and max define allowed numeric or date ranges, minlength and maxlength constrain text length, and pattern supplies a regular expression that a value must match.
Checkboxes represent independent on/off choices and can allow multiple selections. Radio buttons represent mutually exclusive choices within a group; radio controls with the same name belong to the same selection group.
fieldset groups related form controls, while legend provides a caption for that group. They are especially useful for groups of radio buttons, checkboxes, or logically related fields.
select presents a defined list of options from which the user selects. datalist provides suggested values for a compatible input while still allowing the user to enter another value.
autocomplete tells the browser what kind of information a form field represents and whether automatic completion is appropriate. Standard tokens include name, email, tel, current-password, new-password, street-address, and many others.
Native form validation is the browser's built-in constraint validation system. Attributes such as required, type="email", min, max, minlength, maxlength, and pattern can make a control invalid until its value satisfies the declared constraints.
The novalidate attribute on a form disables the browser's normal constraint validation when that form is submitted. formnovalidate can disable validation for a particular submit button.
multipart/form-data is a form encoding type designed to send multiple parts in one request, including binary file content. It is required for a traditional HTML form that uploads files through an input with type="file".
The audio and video elements provide native browser playback for supported media formats. The controls attribute asks the browser to display its standard playback controls, while source elements can provide alternative media files.
track provides timed text associated with audio or video. It can supply captions, subtitles, descriptions, chapters, or metadata, commonly using WebVTT files.
picture lets developers provide different image sources based on media conditions or supported image formats. The browser evaluates source elements and falls back to the nested img element when necessary.
srcset lets an img element provide multiple image candidates, while sizes describes the expected rendered width under different viewport conditions. The browser can then choose an appropriate resource based on layout, device pixel density, and other factors.
An iframe embeds another browsing context inside the current page. It can be used for content such as maps, videos, documents, or isolated applications.
Start with semantic HTML and native interactive elements. Provide meaningful document headings, descriptive links, labels for form controls, text alternatives for informative images, table headers for tabular data, and language information for the document.