HTML Questions You Should Know
1. What does H, T, M, L stand for in HTML and explain each word in detail.
HyperText Markup Language.
- HyperText: Text that contains links to other texts (hyperlinks), allowing users to navigate between pages.
- Markup: Special symbols or codes (tags) inserted into a document to indicate structure and formatting.
- Language: The syntax and semantics used to write the code that browsers understand.
2. Is HTML case sensitive or case insensitive?
HTML tags are inherently case insensitive (e.g., <html>, <HTML>, and <HtMl> are all valid and treated the same by browsers). However, it is a strict best practice (inherited from XHTML conventions) to write all tags in lowercase.
3. Explain `<head>` tag.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is not displayed directly on the document viewport but contains critical information like the document title, character set, CSS styles, scripts, and other meta information required by browsers and search engines.
4. How can I refresh my page every 60 seconds using HTML?
You can automatically refresh the page by placing a <meta> tag inside the <head> section:
<meta http-equiv="refresh" content="60">
5. What are inline and block elements?
- Block elements start on a new line and take up the full width available (e.g.,
<div>,<p>,<h1>,<ul>). - Inline elements do not start on a new line and only take up as much width as necessary (e.g.,
<span>,<a>,<img>,<strong>).
6. What is a table tag? And what is the importance of table tag.
The <table> tag is used to display data in a two-dimensional tabular format (rows and columns). Its importance lies in organizing complex, multi-dimensional structured data so that it is easily readable, semantically correct, and accessible to screen readers.
7. What are different ways to take input from users?
User input is primarily captured using the <form> element containing various input controls:
- The
<input>tag with different type attributes (e.g., text, password, radio, checkbox, date, email). <textarea>for multi-line text input.<select>and<option>for dropdown menus.
8. How can you make an upload file button?
Using the <input> tag with the type set to file:
<input type="file" id="myFile" name="myFile">
9. How can you restrict users to only select a .jpg file when a file upload picker is opened?
By using the accept attribute on the file input:
<input type="file" accept=".jpg, image/jpeg">
10. What does rowspan and colspan do?
- rowspan: An attribute used on
<td>or<th>that specifies the number of rows a table cell should span vertically. - colspan: Specifies the number of columns a table cell should span horizontally.
11. Explain Marquee tag and its usage.
The <marquee> tag was traditionally used to create scrolling text or images across the webpage.
Note: It is now obsolete and strictly deprecated. Modern alternatives use CSS animations (@keyframes) for scrolling effects.
12. Semantic vs Non Semantic Elements.
- Semantic elements clearly describe their meaning and the type of content they hold to both the browser and the developer (e.g.,
<article>,<footer>,<header>,<form>). - Non-semantic elements tell nothing about their content (e.g.,
<div>and<span>).
13. What is the significance of the `<noscript>` tag?
The <noscript> tag defines alternate content to be displayed to users who have disabled JavaScript in their browser or are using a browser that does not support client-side scripting.
14. Describe the importance of the `<!DOCTYPE>` declaration in HTML.
The <!DOCTYPE html> declaration is not an HTML tag, but an instruction to the web browser about what version of HTML the page is written in. It ensures the browser renders the page in Standards Mode rather than falling back to Quirks Mode, preventing layout breaking and visual inconsistencies.
15. What is a picture tag and its advantages?
The <picture> tag gives developers flexibility in specifying multiple image resources for different contexts.
Advantages:
- Art Direction: It allows you to serve different image crops based on viewport width (using
<source media="...">). - Format Support: It lets you serve modern formats (like WebP or AVIF) with graceful degradation to JPEG/PNG for older browsers.
16. What is srcset attribute?
The srcset attribute (used on <img> or <source>) allows you to define a list of differently-sized versions of the same image. It gives the browser the ability to choose and download the most appropriate file size based on the user's device resolution and viewport size, optimizing performance.
17. Explain loading="lazy" and loading="eager"
- loading="lazy": Defers the loading of the image until it comes into the viewport (or near it). This saves bandwidth and drastically improves initial page load time.
- loading="eager": Loads the image immediately as the HTML is parsed, regardless of where it is on the page. This is the default behavior.
18. How can you change the image in the title bar?
By adding a favicon link tag inside the <head> section of your HTML document:
<link rel="icon" type="image/x-icon" href="/favicon.ico">