Website Development
Interview Question For (HTML)
1. What is HTML?
Show Answer
Ans. HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It defines the content and layout of a webpage using elements like headings, paragraphs, images, links, tables, and forms. HTML works alongside CSS (for styling) and JavaScript (for interactivity) to build modern websites.
2. What is the difference between HTML and XHTML?
Show Answer
Ans. HTML (HyperText Markup Language) is a flexible and forgiving markup language used to create web pages, while XHTML (Extensible HyperText Markup Language) is a stricter, XML-based version of HTML that enforces proper syntax and structure. XHTML requires all tags to be properly closed, attributes to be quoted, and elements to be nested correctly, making it more consistent but less forgiving than HTML.
3. What are HTML tags?
Show Answer
Ans. HTML tags are the building blocks of an HTML document, used to define elements and structure web content. They are enclosed in angle brackets (<>) and usually come in pairs: an opening tag <tag> and a closing tag </tag>. Some tags, like <img> and <br>, are self-closing. Tags help format text, insert images, create links, build tables, and more. Examples include <h1> for headings, <p> for paragraphs, and <a> for links.
4. What is the purpose of the <head> tag in HTML?
Show Answer
Ans. The <head> tag in HTML contains metadata and essential information about the webpage that is not displayed on the page itself. It includes elements like <title> for the page title, <meta> for metadata (such as character encoding and SEO descriptions), <link> for external stylesheets, <style> for internal CSS, and <script> for JavaScript. The <head> tag helps configure the webpage for better performance, styling, and functionality.
5. What is the difference between <div> and <span>?
Show Answer
Ans. The <div> tag is a block-level element used to group larger sections of content and structure layouts, occupying the full width of its parent container. The <span> tag is an inline element used to style or modify specific parts of text without breaking the flow. <div> is typically used for layout purposes, while <span> is used for styling inline text.
6. What is the use of the <meta> tag in HTML?
Show Answer
Ans. The <meta> tag provides metadata about the HTML document, such as character encoding, author, description, keywords, and viewport settings. It is placed inside the <head> tag and helps with SEO and proper display on different devices.
7. What is semantic HTML?
Show Answer
Ans. Semantic HTML refers to the use of HTML tags that convey meaning about the content they contain, such as <article>, <section>, <header>, and <footer>. These elements improve accessibility, SEO, and code readability.
8. What is the difference between inline, block, and inline-block elements?
Show Answer
Ans.
- Inline: Takes up only as much width as needed, does not start on a new line (e.g.,
<span>). - Block: Takes up the full width and starts on a new line (e.g.,
<div>). - Inline-block: Behaves like inline but allows setting width and height.
9. What is the difference between id and class attributes in HTML?
Show Answer
Ans.
- id: Uniquely identifies an element; can be used only once per page.
- class: Can be assigned to multiple elements to group and style them together.
10. What is the use of the <a> tag in HTML?
Show Answer
Ans. The <a> tag defines a hyperlink, which is used to link from one page to another. It uses the href attribute to specify the destination URL. Example: <a href="https://example.com">Visit</a>.
11. What is the difference between id and class in HTML?
Show Answer
Ans. The id attribute uniquely identifies an HTML element and can only be used once per page. The class attribute, however, can be used to define a group of elements with the same styling or behavior, and can appear multiple times on a page.
12. What is semantic HTML?
Show Answer
Ans. Semantic HTML refers to HTML that uses tags to convey the meaning of the content within them. Examples include <article>, <section>, <nav>, and <footer>. These tags help with accessibility and SEO.
13. What is the use of the <a> tag in HTML?
Show Answer
Ans. The <a> (anchor) tag is used to create hyperlinks in HTML. It allows users to navigate from one page to another or to a specific part of the same page using the href attribute.
14. What is the difference between inline and block elements?
Show Answer
Ans. Inline elements do not start on a new line and only take up as much width as necessary (e.g., <span>, <a>). Block-level elements start on a new line and take up the full width available (e.g., <div>, <p>).
15. What are empty elements in HTML?
Show Answer
Ans. Empty elements are HTML elements that do not have any content or closing tag. Examples include <br>, <hr>, and <img>.
16. What is the purpose of the <form> tag in HTML?
Show Answer
Ans. The <form> tag is used to collect user input. It can contain elements like <input>, <textarea>, <button>, and more, which users interact with to submit data to a server.
17. How do you insert an image in HTML?
Show Answer
Ans. Use the <img> tag with the src attribute to define the image source and alt for alternate text. Example: <img src="image.jpg" alt="description">.
18. What is the purpose of the <meta> tag?
Show Answer
Ans. The <meta> tag provides metadata about the HTML document, such as character encoding, author, description, and keywords. It is placed inside the <head> section and helps search engines and browsers understand the content.
19. What is the difference between <ul> and <ol>?
Show Answer
Ans. <ul> creates an unordered (bulleted) list, while <ol> creates an ordered (numbered) list. Both use <li> for list items.
20. What is the purpose of the <iframe> tag?
Show Answer
Ans. The <iframe> tag is used to embed another HTML document within the current page, allowing you to include content like videos, maps, or external websites.
21. What are HTML attributes?
Show Answer
Ans. HTML attributes provide additional information about elements. They are always specified in the start tag. Examples include href in <a> and src in <img>.
22. What does the "alt" attribute do in the <img> tag?
Show Answer
Ans. The alt attribute provides alternative text for an image if it cannot be displayed. It also improves accessibility for screen readers.
23. What is the difference between the <section> and <article> tags?
Show Answer
Ans. <section> defines a section of related content, usually with a heading. <article> represents a self-contained piece of content that can be independently distributed, like blog posts or news articles.
24. What is the role of the <script> tag in HTML?
Show Answer
Ans. The <script> tag is used to include or reference JavaScript code in an HTML document, enabling interactivity and dynamic content.
25. What is the difference between internal, external, and inline CSS?
Show Answer
Ans. Inline CSS is added directly in an element's style attribute. Internal CSS is placed within a <style> tag in the <head>. External CSS links to a separate file via a <link> tag.
26. What is the purpose of the <label> tag in forms?
Show Answer
Ans. The <label> tag defines a label for form elements, improving accessibility and user experience. It can be associated with an input by using the for attribute.
27. What is the use of the <button> tag in HTML?
Show Answer
Ans. The <button> tag defines a clickable button. It can be used to submit forms, reset them, or trigger JavaScript functions.
28. What does the "action" attribute do in an HTML form?
Show Answer
Ans. The action attribute in the <form> tag specifies the URL to which the form data will be sent when submitted.
29. What is HTML5?
Show Answer
Ans. HTML5 is the latest version of HTML that introduces new elements, attributes, and behaviors. It supports multimedia (audio and video), modern APIs (like geolocation and canvas), and semantic elements (like <article>, <section>).
30. How do you comment in HTML?
Show Answer
Ans. Comments in HTML are written using <!-- comment goes here -->. Comments are not displayed in the browser and are used to explain the code.
31. What is the difference between HTML and XHTML?
Show Answer
Ans. HTML is more lenient with syntax, while XHTML is stricter and must follow XML rules. For example, in XHTML, all tags must be properly closed, and attribute names must be in lowercase.
32. What is the purpose of the <meta> tag in HTML?
Show Answer
Ans. The <meta> tag provides metadata about the HTML document, such as character encoding, author, and viewport settings. It is placed inside the <head> section.
33. What is the DOM in web development?
Show Answer
Ans. The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of nodes, allowing developers to manipulate content dynamically.
34. What is the difference between id and class in HTML?
Show Answer
Ans. An id is a unique identifier for a single HTML element, whereas a class can be used for multiple elements. id is used for specific targeting, while class is for grouping elements.
35. What are semantic HTML elements?
Show Answer
Ans. Semantic HTML elements clearly describe their meaning in a human- and machine-readable way. Examples include <header>, <footer>, <article>, and <section>.
36. What is the difference between inline, block, and inline-block elements?
Show Answer
Ans. Inline elements do not start on a new line and only take up as much width as necessary. Block elements start on a new line and take up full width. Inline-block elements behave like inline elements but allow setting width and height.
37. What is the purpose of the <canvas> element in HTML5?
Show Answer
Ans. The <canvas> element is used to draw graphics on the web page using JavaScript. It is commonly used for rendering graphs, game visuals, or other graphical content.
38. What is the difference between == and === in JavaScript?
Show Answer
Ans. == checks for value equality with type coercion, while === checks for both value and type equality. === is more strict and preferred in modern code.
39. What is the difference between localStorage and sessionStorage?
Show Answer
Ans. localStorage stores data with no expiration date, while sessionStorage stores data for the duration of the page session. Both are used for client-side storage in the browser.
40. What are cookies in web development?
Show Answer
Ans. Cookies are small pieces of data stored by the browser that can be used to remember information about the user. They are commonly used for session management and personalization.
41. What is responsive web design?
Show Answer
Ans. Responsive web design ensures that web pages render well on a variety of devices and window or screen sizes. It is achieved using flexible layouts, media queries, and responsive images.
42. What is a media query in CSS?
Show Answer
Ans. A media query is a CSS technique used to apply styles based on the device's characteristics, such as width, height, orientation, and resolution. It helps create responsive designs.
43. What is the box model in CSS?
Show Answer
Ans. The CSS box model describes the rectangular boxes that are generated for elements. It includes the content, padding, border, and margin.
44. What is the difference between relative and absolute positioning in CSS?
Show Answer
Ans. Relative positioning moves the element relative to its normal position, while absolute positioning moves the element relative to its nearest positioned ancestor.
45. What is JavaScript used for in web development?
Show Answer
Ans. JavaScript is used to create interactive and dynamic web pages. It allows manipulation of the DOM, handling of events, validation of forms, and communication with servers via AJAX.
46. What is AJAX?
Show Answer
Ans. AJAX (Asynchronous JavaScript and XML) allows web pages to update asynchronously by exchanging small amounts of data with the server in the background, without reloading the whole page.
47. What is a REST API?
Show Answer
Ans. A REST API is a web service that conforms to REST architecture principles. It allows interaction with web services using standard HTTP methods like GET, POST, PUT, and DELETE.
48. What is JSON and how is it used?
Show Answer
Ans. JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is used to transmit data between a server and a web application in a human-readable format.
49. What is a framework in web development?
Show Answer
Ans. A framework is a pre-written set of tools and libraries that provide structure and reusable code for web development. Examples include React, Angular, and Django.
50. What is the role of a web server?
Show Answer
Ans. A web server handles HTTP requests from clients (browsers), serves web pages and content, and can run server-side scripts. Examples include Apache, Nginx, and IIS.
51. What is the difference between GET and POST methods in forms?
Show Answer
Ans. GET appends form data into the URL and is visible, making it suitable for non-sensitive data. POST sends data in the request body and is used for secure or large data submissions.
52. What is Cross-Origin Resource Sharing (CORS)?
Show Answer
Ans. CORS is a security feature that allows or restricts resources on a web page to be requested from another domain outside the domain from which the resource originated.
53. What is a favicon?
Show Answer
Ans. A favicon is a small icon displayed in the browser tab next to the page title. It is linked using the <link rel="icon"> tag in the HTML head section.
54. What is progressive enhancement in web design?
Show Answer
Ans. Progressive enhancement is a strategy for web design that emphasizes core webpage content first, then adds more advanced features for users with better browsers or capabilities.
55. What is graceful degradation?
Show Answer
Ans. Graceful degradation is a strategy where a website is designed to work with the most advanced browsers but still provides basic functionality for older browsers.
56. What is the difference between synchronous and asynchronous code?
Show Answer
Ans. Synchronous code executes line-by-line, blocking further execution until the current operation completes. Asynchronous code allows operations to run in the background, not blocking the main thread.
57. What is a CDN?
Show Answer
Ans. A CDN (Content Delivery Network) is a network of servers distributed globally to deliver content faster by serving users from the nearest location.
58. What is minification in web development?
Show Answer
Ans. Minification is the process of removing unnecessary characters (like whitespace and comments) from code without changing its functionality, to reduce file size and improve load times.
59. What is the difference between a library and a framework?
Show Answer
Ans. A library is a collection of reusable code that you call when needed, whereas a framework dictates the structure and flow of your code, often calling your code at certain points.
60. What is version control and why is it important?
Show Answer
Ans. Version control is a system that records changes to a file or set of files over time. It allows developers to track, revert, and collaborate on code efficiently. Git is a popular version control system.
61. What is Git?
Show Answer
Ans. Git is a distributed version control system that allows multiple developers to work on a project simultaneously while keeping track of every change made to the codebase.
62. What is the difference between Git and GitHub?
Show Answer
Ans. Git is a version control system, while GitHub is a web-based hosting service for Git repositories that provides collaboration tools such as issue tracking and pull requests.
63. What are pseudo-classes in CSS?
Show Answer
Ans. Pseudo-classes in CSS define the special state of an element, like :hover, :focus, and :nth-child, allowing styles to be applied dynamically based on user interaction.
64. What is the difference between visibility: hidden and display: none in CSS?
Show Answer
Ans. visibility: hidden hides the element but it still occupies space. display: none hides the element and removes it from the layout flow entirely.
65. What is a preprocessor in CSS?
Show Answer
Ans. A CSS preprocessor like SASS or LESS allows the use of variables, nesting, functions, and more to make CSS more maintainable and modular. The code is compiled into regular CSS.
66. What is the role of the viewport meta tag?
Show Answer
Ans. The viewport meta tag controls how a web page is displayed on mobile devices. It ensures responsive behavior by setting the viewport's width and scale.
67. What are web components?
Show Answer
Ans. Web components are a set of web platform APIs that allow the creation of custom, reusable, encapsulated HTML tags. It includes Shadow DOM, Custom Elements, and HTML Templates.
68. What is the difference between innerHTML and textContent in JavaScript?
Show Answer
Ans. innerHTML returns or sets the HTML content inside an element, while textContent gets or sets the text content only, ignoring HTML tags.
69. What is the role of HTTPS in web development?
Show Answer
Ans. HTTPS (HyperText Transfer Protocol Secure) encrypts data transferred between the browser and the server, providing security and protecting against eavesdropping and tampering.
70. What are accessibility best practices in web development?
Show Answer
Ans. Accessibility best practices include using semantic HTML, providing alternative text for images, ensuring keyboard navigation, using sufficient contrast, and following WCAG guidelines to make websites usable by all users, including those with disabilities.
71. What is lazy loading in web development?
Show Answer
Ans. Lazy loading is a performance optimization technique where content (like images or videos) is only loaded when it’s needed, such as when it enters the viewport.
72. What is the difference between localStorage and sessionStorage?
Show Answer
Ans. localStorage stores data with no expiration time, whereas sessionStorage stores data for the duration of the page session. Both store data in key-value pairs on the client-side.
73. What is the purpose of ARIA in HTML?
Show Answer
Ans. ARIA (Accessible Rich Internet Applications) attributes enhance accessibility by helping assistive technologies understand dynamic content and user interface elements.
74. What is semantic HTML?
Show Answer
Ans. Semantic HTML uses meaningful tags like <article>, <header>, <footer> to describe content, improving readability and accessibility.
75. What is the difference between <div> and <span>?
Show Answer
Ans. <div> is a block-level element used for layout purposes, while <span> is an inline element used to style parts of text or content inline.
76. What are media queries in CSS?
Show Answer
Ans. Media queries allow content rendering to adapt to different screen sizes and resolutions by applying specific CSS rules based on device characteristics.
77. What is the difference between em, rem, and px units in CSS?
Show Answer
Ans. px is an absolute unit. em is relative to the font-size of the parent, and rem is relative to the root font-size (typically the <html> element).
78. What is a responsive website?
Show Answer
Ans. A responsive website adapts its layout and elements to look good on various screen sizes and devices using techniques like fluid grids, flexible images, and media queries.
79. What is AJAX?
Show Answer
Ans. AJAX (Asynchronous JavaScript and XML) allows web pages to be updated asynchronously by exchanging small amounts of data with the server without reloading the whole page.
80. What is a RESTful API?
Show Answer
Ans. A RESTful API follows REST principles and allows communication between client and server using HTTP methods like GET, POST, PUT, DELETE, etc.
81. What is a single-page application (SPA)?
Show Answer
Ans. An SPA is a web application that loads a single HTML page and dynamically updates content as the user interacts, without refreshing the entire page.
82. What are cookies in web development?
Show Answer
Ans. Cookies are small pieces of data stored on the user's browser to remember information about the user between sessions or page loads.
83. What is the box model in CSS?
Show Answer
Ans. The CSS box model includes margins, borders, padding, and the content area. It determines how elements are displayed and spaced on the page.
84. What is z-index in CSS?
Show Answer
Ans. The z-index property specifies the stack order of elements. Higher values are displayed in front of lower ones. It only works on positioned elements.
85. What is a pseudo-element in CSS?
Show Answer
Ans. Pseudo-elements like ::before and ::after allow you to style specific parts of elements or insert content without modifying the HTML.
86. What is the purpose of the <meta charset="UTF-8"> tag?
Show Answer
Ans. This tag specifies the character encoding for the HTML document, ensuring proper display of all characters, including symbols and non-English letters.
87. What are web sockets?
Show Answer
Ans. Web sockets provide a persistent connection between client and server, enabling real-time, two-way communication with less overhead than HTTP requests.
88. What is the difference between client-side and server-side scripting?
Show Answer
Ans. Client-side scripting (e.g., JavaScript) runs in the browser, while server-side scripting (e.g., PHP, Node.js) runs on the server and processes backend logic.
89. What is the purpose of a build tool in web development?
Show Answer
Ans. Build tools like Webpack, Gulp, or Vite automate tasks such as minification, bundling, transpiling, and improving development workflow and performance.
90. What is a content management system (CMS)?
Show Answer
Ans. A CMS is software that allows users to create, manage, and modify digital content without needing to write code. Examples include WordPress, Joomla, and Drupal.
91. What is the Document Object Model (DOM)?
Show Answer
Ans. The DOM is a programming interface for HTML and XML documents. It represents the page structure as a tree, allowing scripts to dynamically access and update content.
92. What is the difference between null and undefined in JavaScript?
Show Answer
Ans. undefined means a variable has been declared but not assigned. null is an assignment value representing no value or object.
93. What are template literals in JavaScript?
Show Answer
Ans. Template literals use backticks (`) to allow embedded expressions, multi-line strings, and string interpolation using ${expression}.
94. What is event delegation in JavaScript?
Show Answer
Ans. Event delegation is a technique where a parent element handles events for its child elements, improving performance and managing dynamically added elements.
95. What is the difference between == and === in JavaScript?
Show Answer
Ans. == checks for equality with type coercion, while === checks for strict equality without type conversion.
96. What is a promise in JavaScript?
Show Answer
Ans. A promise represents the eventual result of an asynchronous operation. It can be pending, fulfilled, or rejected, and helps avoid callback hell.
97. What is async/await in JavaScript?
Show Answer
Ans. async functions return promises, and await pauses execution until a promise resolves. It simplifies working with asynchronous code.
98. What are modules in JavaScript?
Show Answer
Ans. Modules are files that export code (functions, objects, classes) and import them where needed. They help structure large applications and maintain scope.
99. What is the virtual DOM?
Show Answer
Ans. The virtual DOM is a lightweight in-memory representation of the real DOM. Frameworks like React use it to optimize DOM updates by updating only what’s changed.
100. What is the difference between SSR and CSR?
Show Answer
Ans. SSR (Server-Side Rendering) generates HTML on the server and sends it to the client. CSR (Client-Side Rendering) renders content in the browser using JavaScript. SSR improves SEO and load times for initial content.
.webp)
.webp)