1. What is HTML?
HTML stands for HyperText Markup Language. And it is the standard markup language used for creating web pages and web applications.
2. What are the basic components of an HTML document?
The basic components of an HTML document include the doctype declaration, HTML tags, head section, and body section.
3. What is the purpose of the doctype declaration in HTML?
The doctype declaration identifies the HTML version used in the document and aids in proper page rendering by the browser.
4. What is the difference between HTML and HTML5?
HTML is the traditional markup language used for creating web pages. It has a standard syntax and basic structure. On the other hand, HTML5 is the latest version of HTML and introduces new elements, attributes, and APIs. HTML5 provides more advanced features and improved functionality compared to HTML.
5. What are the different heading tags in HTML?
HTML provides six heading tags: <h1> to <h6>. <h1> represents the highest level of heading, and <h6> represents the lowest.
6. How do you create a hyperlink in HTML?
You can create a hyperlink using the <a> (anchor) tag.
Example:
7. What is the purpose of the alt attribute in the <img> tag?
An image's alternate text is provided by the alt attribute. If the image cannot be loaded or for accessibility reasons, it is displayed.
8. What is the difference between the <div> and <span> tags?
While the <span> tag is an inline element used to design tiny bits of text or material within a line, the <div> tag is a block-level element used for grouping and applying styles to a portion of content.
9. How do you create a table in HTML?
The tags <table>, <tr>, and <td> are used to make a table in HTML. Table, rows, and cells are all defined by the tags "table," "tr," and "td."
10. What is the purpose of the colspan and rowspan attributes in HTML tables?
A cell's colspan and rowspan attributes provide the number of columns and rows, respectively, that the cell should span.
11. What are the different types of lists in HTML?
Unordered lists <ul>, ordered lists <ol>, and definition lists <dl> are the three forms of lists that HTML supports.
12. How do you add comments in HTML?
You can add comments in HTML using the <!-- Comment --> syntax.
13. What is the difference between the <script> tag's "async" and "defer" attributes?
The "async" tag instructs the browser to carry on parsing the HTML while asynchronously fetching and running the script. The "defer" element permits continued HTML parsing while postponing script execution until all HTML has been parsed.
14. What is the purpose of the <iframe> tag?
The <iframe> tag is used to incorporate another HTML document into the one that is now open. It is frequently used to display external web pages, videos, or maps.
15. How do you create a form in HTML?
Using the <form> tag, a form can be created. You can put a variety of form components inside the form, such as text fields, checkboxes, radio buttons, etc.
16. What is the difference between the GET and POST methods in HTML forms?
In contrast to the POST method, which delivers form data in the HTTP request body and conceals it from view in the URL, the GET method includes form data in the URL, making it visible in the browser's address bar.
17. How do you disable a button in HTML?
You can disable a button by adding the "disabled" attribute.
Example:
18. What is the purpose of the <meta> tag in HTML?
The <meta> tag is used to provide metadata about the HTML document, such as character encoding, viewport settings, and keywords.
19. How do you include CSS styles in an HTML document?
You can include CSS styles in an HTML document by using the <style> tag within the <head> section or by linking an external CSS file using the <link> tag.
20. What is the purpose of the z-index property in CSS?
The z-index property determines the stacking order of elements on a webpage. It specifies which element should appear in front or behind other elements.
21. What is the box model in CSS?
The box model is a concept in CSS that defines how elements are rendered on a webpage. It consists of content, padding, border, and margin.
22. What are the different types of CSS selectors?
CSS provides several selectors to target specific elements: element selectors, class selectors (.class), ID selectors (#id), attribute selectors, and pseudo-classes (:hover, :nth-child, etc.).
23. How do you center an element horizontally and vertically in CSS?
To center an element horizontally, you can set its left and right margins to "auto" and give it a defined width. To center an element vertically, you can use the "flexbox" or "grid" layout techniques.
24. What is the difference between inline and block elements in CSS?
Inline elements do not start on a new line and only occupy the space required by their content, while block elements start on a new line and occupy the entire width available.
25. What is the purpose of the display: none; property in CSS?
The display: none; property hides an element from the webpage. It does not occupy any space and is not rendered by the browser.
26. How do you create a responsive webpage in HTML and CSS?
You can create a responsive webpage by using CSSMedia Queries, which allows you to apply different styles based on the device's screen size or resolution.
27. What is the purpose of the <canvas> tag in HTML?
The <canvas> tag is used to draw graphics, animations, and other visual elements dynamically using JavaScript.
28. How do you include external JavaScript files in an HTML document?
You can include external JavaScript files using the <script> tag with the "src" attribute, pointing to the URL or file path of the JavaScript file.
Example:
29. What is the purpose of the localStorage in JavaScript?
The localStorage object allows you to store data in the browser's local storage, which persists even after the user closes the browser.
30. What is the difference between null and undefined in JavaScript?
null is an assignment value that represents the intentional absence of any object value, while undefined represents the absence of a value or an uninitialized variable.
31. How do you add an event listener to an element in JavaScript?
You can add an event listener to an element using the addEventListener() method.
Example:
32. What is the purpose of the "this" keyword in JavaScript?
The "this" keyword refers to the object that is currently executing the code or the object that a method belongs to.
33. How do you make an AJAX request in JavaScript?
You can make an AJAX request using the XMLHttpRequest object or the newer fetch() function to communicate with a server and retrieve data without reloading the entire page.
34. What is the purpose of the <audio> and <video> tags in HTML?
The <audio> and <video> tags are used to embed audio and video content, respectively, into an HTML document. They provide a built-in player to control playback and support various multimedia formats.
35. How do you play audio or video programmatically using JavaScript?
You can use the play() method of the <audio> or <video> element to start playback, and the pause() method to pause it.
Example:
36. What is the purpose of the <form> attribute in the <label> tag?
The for attribute in the <label> tag is used to associate a label with a specific form element. It improves accessibility by allowing users to click on the label to focus or activate the associated input field.
37. How do you validate an HTML form before submitting it to the server?
JavaScript can be used to validate HTML forms by accessing the form's elements, listening to the submit event, and comparing the values of the elements to predefined standards. You can stop the form from being submitted if the validation is unsuccessful by calling event.preventDefault().
38. What is the purpose of the required attribute in an HTML form input?
The required attribute is used to specify that a form input field must be filled out before submitting the form. If a required field is left empty, the browser will display an error message and prevent form submission.
39. How do you set and retrieve cookies using JavaScript?
You can set a cookie using the document.cookie property, and retrieve its value by reading the same property. However, manipulating cookies directly can be cumbersome, so using JavaScript libraries like js-cookie is often preferred.
40. What is the purpose of the contenteditable attribute in HTML?
The contenteditable attribute is used to make an element editable, allowing users to modify the content within it.
41. How do you embed custom fonts in an HTML document?
You can embed custom fonts in an HTML document using the @font-face rule in CSS. It allows you to specify a font file (e.g., .ttf, .woff) and assign it a name that can be used in the font-family property.
42. What is the difference between <script> tags with "async" and "defer" attributes?
The "async" attribute allows the browser to download and execute the script asynchronously while not blocking the HTML parsing. The script will be executed as soon as it is downloaded, possibly before the entire document is parsed.
On the other hand, the "defer" attribute also allows asynchronous downloading but ensures that the script is executed only after the HTML document has been parsed.
43. How do you specify multiple CSS classes for an HTML element?
You can specify multiple CSS classes for an HTML element by adding space-separated class names within the class attribute. For example: <div class="class1 class2 class3">.
44. What is the purpose of the <fieldset> and <legend> tags in HTML?
The <fieldset> tag is used to group related form elements together, and the <legend> tag is used to provide a caption or title for the <fieldset>. It helps in organizing and structuring complex forms.
45. How do you disable caching of a webpage in HTML?
You can disable caching by adding the appropriate HTTP headers to the server's response. In HTML, you can include a meta tag within the <head> section:
This instructs the browser to always fetch the latest version of the page from the server.
46. What is the purpose of the autocomplete attribute in an HTML input field?
The autocomplete attribute defines whether autocomplete should be enabled or disabled for a form input field. To regulate whether the browser should remember and propose previously typed values, it can take values such as on or off.
47. How do you embed an SVG (Scalable Vector Graphics) image in HTML?
You can embed an SVG image in HTML using the <svg> tag and placing the SVG markup directly within the tag. And you, can also use the <img> tag and specify the source file with the .svg extension.
48. What is the purpose of the disabled attribute in an HTML form input field?
The disabled attribute is used to disable an input field, making it unresponsive to user interactions. Disabled fields are not submitted with the form data and typically appear grayed out.
49. How do you create a dropdown/select list in HTML?
You can create a dropdown/select list using the <select> tag and populate it with <option> tags.
Example:
50. What is the purpose of the target attribute in the <a> tag?
The target attribute specifies where the linked document should open when the user clicks on the link. It can take values like _blank (opens in a new tab/window), _self (opens in the same tab/window), _parent, or _top.
