Skip to main content

HTML Questions

HTML Questions

1.              What is HTML, and why is it important in web development?

2.              Explain the structure of an HTML document.

3.              What is the purpose of the <doctype> declaration?

4.              What are semantic elements in HTML? Provide examples.

5.              Explain the difference between <div> and <span>.

6.              How do you create a hyperlink in HTML?

7.              What are the different types of lists in HTML? Provide examples.

8.              What is the purpose of the <alt> attribute in an <img> tag?

9.              How do you embed a video in an HTML document?

10.          What is the difference between <strong> and <b> tags?

11.         

12.     Intermediate Questions

13.          How do you create a form in HTML, and what are the commonly used input types?

14.          Explain the difference between inline, block, and inline-block elements.

15.          How do you add metadata to an HTML document?

16.          What is the purpose of the <iframe> tag? Provide an example.

17.          How can you specify the language of an HTML document?

18.          What are the differences between <ol> and <ul>?

19.          Explain the purpose of the data-* attributes in HTML.

20.          How do you create a table in HTML, and what are the roles of <thead>, <tbody>, and <tfoot>?

21.          What is the <canvas> element used for? Provide an example.

22.          How does the <picture> element work for responsive images?

23.          How do you handle broken images in HTML?

24.          Explain the difference between <link> and <a> tags.

25.          What are the limitations of HTML? How do you overcome them in modern web development?

26.          What is the role of the <template> tag in HTML?

27.          How do you implement microdata in HTML for structured data?

28.          What are custom data attributes in HTML, and how are they used with JavaScript?

29.          What are the differences between server-side rendering (SSR) and client-side rendering (CSR) in HTML?

30.          How do HTML5 APIs, such as the Geolocation API and Drag-and-Drop API, enhance web applications?

31.          Write a small HTML snippet to create a responsive navigation bar using semantic elements.

32.          What is the purpose of the <head> and <body> sections in an HTML document?

33.          How do you specify a default text size and color for your entire HTML document?

34.          What is the purpose of the <title> tag?

35.          How do you create a comment in HTML?

36.          What are void elements in HTML? Provide examples.

37.          What is the purpose of the name attribute in HTML forms?

38.          How do you create an HTML button that performs a specific action using JavaScript?

39.          What are self-closing tags? Give examples.

40.          How does the <noscript> tag work, and when would you use it?

41.          How do you create an HTML form with file upload functionality?

42.          How can you include an external JavaScript file in an HTML document?

43.          What is the difference between rel="stylesheet" and rel="icon" in the <link> tag?

44.          Explain how to add custom fonts to an HTML document using web fonts.

45.          How does the placeholder attribute work in input elements?

46.          What is the purpose of the <address> tag in HTML, and when should it be used?

47.          How do you create a responsive grid layout using only HTML and CSS?

48.          What are shadow DOMs, and how are they used in web components?

49.          Explain the difference between <details> and <summary> tags.

50.          How do you define a favicon for a website?

51.          What is the difference between async and defer attributes in the <script> tag?

52.          How does the <datalist> tag enhance form inputs in HTML?

53.          What are the differences between <main>, <section>, <article>, and <aside> tags?

54.          How do you optimize an HTML document for SEO?

55.          How can you create an accordion-style dropdown using semantic HTML elements?

56.          What are progressive enhancement and graceful degradation, and how do they relate to HTML?

Form and Input Elements

57.          Write HTML code to create a login form with fields for username, password, and a "Remember Me" checkbox.

58.          Create an HTML form with a dropdown to select a country, a text field for entering the city, and a submit button.

59.          Write the code to create a form that allows file uploads, limiting the accepted file types to images only (.jpg, .png).

60.          Create a form with radio buttons to select a payment method: Credit Card, PayPal, or Net Banking.

61.          Write HTML code to create a form with an input field that accepts only a 10-digit phone number.

62.         

Tables and Lists

63.          Write the code for a table that displays the following information:

a.              Columns: Name, Age, Department

b.              Rows: John, 25, IT; Mary, 28, HR; Sam, 30, Finance.

64.          Create an unordered list of five fruits, and make the third item bold.

65.          Write the code for a table with merged cells (use colspan or rowspan) in the first row.

66.          Create an ordered list with subitems under the second item (nested lists).

67.         

Media and Embedding

68.          Write the code to embed a YouTube video into an HTML page, making it responsive.

69.          Create an HTML page that displays an image with a caption below it.

70.          Write the code to add an audio player that starts playing automatically when the page loads.

71.          Embed a Google Map of a specific location in your HTML page.

 

Navigation and Links

72.          Write HTML code to create a responsive navigation bar with three links: Home, About, and Contact.

73.          Create a hyperlink that opens in a new tab and scrolls to a specific section of another webpage.

 

Semantic and Structural Elements

74.          Write HTML code to create a webpage structure using semantic elements: <header>, <nav>, <main>, <article>, <aside>, and <footer>.

75.          Write the code to create a FAQ section using <details> and <summary> tags.

76.          Create a form that uses the <datalist> element to provide autocomplete suggestions for an input field.

77.          Write the code for a progress bar that visually displays 75% completion.

78.          Create a simple HTML structure for a webpage using the <template> tag to include reusable content.

 

 


Comments

Popular posts from this blog

User Registration Form: Purpose, Design, and Code Explanation

  Why Do We Need to Create Forms? Forms are essential in web development as they provide a way for users to interact with web applications by submitting data. They are used for various purposes, including: Collecting User Data : For registration, login, feedback, surveys, and more. Enabling Interactions : Allowing users to send information to the server. Dynamic Applications : Forms are key in creating dynamic web applications like e-commerce websites, social media platforms, etc. Improving User Experience : Forms enable tailored content and services by collecting user preferences or queries. Code Explanation HTML The HTML provides the structure of the form and its elements. Here's a detailed breakdown: html .. <div class="form-container"> A container that wraps the entire form, styled with CSS for layout and design. html .. <h1>Sign Up</h1> A heading that indicates the purpose of ...

CSS Box Model

  CSS Box Model: Comprehensive Guide Overview The CSS Box Model is a foundational concept in web design that governs the layout and spacing of elements on a webpage. It treats every HTML element as a rectangular box, defining how its content, padding, border, and margin interact. Why Do We Need the CSS Box Model? 1.      Precise Layout Control : o     Allows developers to define the exact size and space of elements, including margins, borders, and padding. 2.      Consistency : o     Ensures uniform spacing and layout across different browsers and devices. 3.      Flexibility : o     Adjusts spacing and borders without changing the core content dimensions. Where Do We Need the CSS Box Model? 1.      Website Layout Design : o     Essential for spacing headers, footers, sidebars, and content sections. 2. ...

CSS Units

CSS Units: Comprehensive Notes What Are CSS Units? CSS (Cascading Style Sheets) units are a way to define the size of elements, spacing, and positioning in a web page. These units provide flexibility to design responsive, visually appealing, and functional layouts. CSS units are used in defining properties such as width, height, margin, padding, font size, and more. Example 1: <style>   div {     width: 100px;     height: 50px;   } </style> <div>Box</div> Here, 100px and 50px define the width and height of the div . Example 2: <style>   p {     font-size: 16px;   } </style> <p>This is a paragraph.</p> The font size of the paragraph is set to 16 pixels using CSS units. Purpose of CSS Units CSS units help define scalable and fixed measurements for web elements, ensuring: Consistency in layout design. Adaptability to differ...