HTML Interview Questions and Answers for Freshers Part 1

HTML Interview Questions and Answers for Freshers Part 1

by

HTML Interview Questions:

Basic HTML Questions

  1. What is HTML?
    • Answer: HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using markup.
  2. What is a tag in HTML?
    • Answer: A tag is a code element that tells the browser how to structure and display content. Tags are enclosed in angle brackets, e.g., <tagname>.
  3. What are attributes in HTML?
    • Answer: Attributes provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs like name="value".
  4. What is the difference between an element and a tag?
    • Answer: A tag is the markup that defines the start or end of an HTML element. An element consists of the opening tag, content, and closing tag.
  5. What are void elements in HTML?
    • Answer: Void elements are HTML elements that do not have a closing tag. Examples include <br>, <img>, <input>, etc.
  6. What is the purpose of the <!DOCTYPE> declaration?
    • Answer: The <!DOCTYPE> declaration informs the browser about the version of HTML the page is written in, ensuring proper rendering of the document.
  7. How do you create a hyperlink in HTML?
    • Answer: You can create a hyperlink using the <a> tag with the href attribute. Example: <a href="https://www.example.com">Visit Example</a>.
  8. How do you create an ordered list in HTML?
    • Answer: You create an ordered list using the <ol> tag, and each list item is defined using the <li> tag. Example:
      <ol>
      <li>First item</li>
      <li>Second item</li>
      </ol>
  9. What is the purpose of the <head> tag in HTML?
    • Answer: The <head> tag contains meta-information about the HTML document, such as the title, character set, styles, and scripts.
  10. What is the difference between <div> and <span>?
    • Answer: <div> is a block-level element used to group larger sections of HTML. <span> is an inline element used to group small chunks of text within a block-level element.

Intermediate HTML Questions

  1. How do you embed an image in HTML?
    • Answer: You can embed an image using the <img> tag with the src attribute. Example:
      <img src="image.jpg" alt="Description of image">
  2. What is the use of the alt attribute in images?
    • Answer: The alt attribute provides alternative text for an image if it cannot be displayed. It also improves accessibility for screen readers.
  3. What is semantic HTML?
    • Answer: Semantic HTML uses tags that clearly describe their meaning in a human- and machine-readable way. Examples include <article>, <section>, <nav>, <header>, and <footer>.
  4. How do you create a table in HTML?
    • Answer: You create a table using the <table> tag, with rows defined by <tr> and cells defined by <td> (for data) or <th> (for headers). Example:
      <table>
      <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      </tr>
      <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      </tr>
      </table>
  5. What is the difference between <thead>, <tbody>, and <tfoot>?
    • Answer: These tags group header, body, and footer content in a table, respectively. This helps in organizing and styling table sections separately.
  6. How do you make a form in HTML?
    • Answer: You create a form using the <form> tag, and you can include various input elements like <input>, <textarea>, <button>, <select>, etc. Example:
      <form action="/submit" method="post">
      <input type="text" name="name">
      <button type="submit">Submit</button>
      </form>
  7. What are input types in HTML forms?
    • Answer: HTML forms support various input types like text, password, email, number, radio, checkbox, submit, button, file, and more.
  8. What is the purpose of the action attribute in a form?
    • Answer: The action attribute specifies the URL to which the form data is sent when it is submitted.
  9. How do you create a drop-down list in HTML?
    • Answer: You can create a drop-down list using the <select> tag and <option> tags for the items. Example:
      <select name="dropdown">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      </select>
  10. What is the purpose of the label tag in HTML forms?
    • Answer: The <label> tag defines a label for an <input> element. It improves accessibility and usability by associating the label with a specific input.

Advanced HTML Questions

  1. What is the data- attribute used for in HTML?
    • Answer: The data- attribute is used to store custom data private to the page or application. Example: <div data-role="admin">.
  2. What are meta tags, and why are they used?
    • Answer: Meta tags provide metadata about the HTML document, such as descriptions, keywords, author, and viewport settings. They are used to improve SEO and control the web page’s behavior.
  3. What is the purpose of the viewport meta tag?
    • Answer: The viewport meta tag controls the layout on mobile browsers. It helps in making the web page responsive. Example:
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. What is the difference between id and class attributes?
    • Answer: The id attribute is unique and can be used to identify a single element. The class attribute can be used to group multiple elements for styling and scripting.
  5. How do you include an external CSS file in an HTML document?
    • Answer: You can include an external CSS file using the <link> tag within the <head> section. Example:
      <link rel="stylesheet" href="styles.css">
  6. How do you include an external JavaScript file in an HTML document?
    • Answer: You can include an external JavaScript file using the <script> tag. Example:
      <script src="script.js"></script>
  7. What is the purpose of the defer attribute in the <script> tag?
    • Answer: The defer attribute makes the script execute after the HTML document has been parsed, without blocking the document loading.
  8. How do you create a comment in HTML?
    • Answer: You can create a comment using <!-- to start and --> to end the comment. Example:
      <!-- This is a comment -->
  9. What is the iframe tag used for?
    • Answer: The iframe tag is used to embed another HTML page within the current page. Example:
      <iframe src="page.html"></iframe>
  10. How do you specify the character encoding for an HTML document?
    • Answer: You specify the character encoding using the <meta> tag with the charset attribute. Example:
      <meta charset="UTF-8">

HTML5 Specific Questions

  1. What are the new form elements introduced in HTML5?
    • Answer: HTML5 introduced new form elements like <datalist>, <keygen>, and <output>.
  2. What are the new input types introduced in HTML5?
    • Answer: HTML5 introduced new input types such as email, date, datetime-local, month, number, range, search, tel, time, url, and week.
  3. What is the placeholder attribute in HTML5?
    • Answer: The placeholder attribute provides a hint to the user of what can be entered in the input field. Example:
      <input type="text" placeholder="Enter your name">
  4. What is the purpose of the required attribute in HTML5?
    • Answer: The required attribute specifies that an input field must be filled out before submitting the form.
  5. How do you make a field read-only in HTML?
    • Answer: You can make a field read-only by adding the readonly attribute to the input element. Example:
      <input type="text" readonly>
  6. What is the difference between localStorage and sessionStorage in HTML5?
    • Answer: localStorage stores data with no expiration time, while sessionStorage stores data for the duration of the page session.
  7. What is the canvas element in HTML5?
    • Answer: The canvas element is used to draw graphics on the web page via JavaScript.
  8. What is the audio element in HTML5?
    • Answer: The audio element is used to embed sound content in documents. Example:
      <audio controls>
      <source src="audio.mp3" type="audio/mpeg">
      </audio>
  9. What is the video element in HTML5?
    • Answer: The video element is used to embed video content in documents. Example:
      <video controls>
      <source src="video.mp4" type="video/mp4">
      </video>
  10. What are the article, section, and aside elements in HTML5?
    • Answer: The article element represents independent content, the section element represents a section of a document, and the aside element contains content indirectly related to the main content.

Miscellaneous Questions

  1. How do you create a responsive web design?
    • Answer: You create a responsive web design using CSS media queries, flexible grid layouts, and flexible images. Example of a media query:
      @media (max-width: 600px) {
      .container {
      width: 100%;
      }
      }
  2. What is ARIA in HTML?
    • Answer: ARIA (Accessible Rich Internet Applications) defines ways to make web content and applications more accessible to people with disabilities.
  3. What is the role attribute in HTML?
    • Answer: The role attribute defines the role of an element for accessibility purposes. Example:
      <div role="button">Click me</div>
  4. How do you embed a YouTube video in HTML?
    • Answer: You can embed a YouTube video using the <iframe> tag. Example:
      <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
  5. What is the purpose of the noscript tag?
    • Answer: The noscript tag defines an alternate content for users who have disabled JavaScript in their browser or have browsers that do not support JavaScript.
  6. How do you use the progress element in HTML?
    • Answer: The progress element represents the completion progress of a task. Example:
      <progress value="70" max="100">70%</progress>
  7. What is the difference between the b and strong tags?
    • Answer: The b tag bolds text without indicating any extra importance, while the strong tag indicates that the text is of strong importance.
  8. What is the difference between the i and em tags?
    • Answer: The i tag italicizes text without indicating any extra emphasis, while the em tag emphasizes text, indicating its importance.
  9. What is a favicon, and how do you add it to an HTML document?
    • Answer: A favicon is a small icon that represents a website, displayed in the browser tab. You add it using the <link> tag in the <head>. Example:
      <link rel="icon" href="favicon.ico" type="image/x-icon">
  10. What is a CSS preprocessor, and can you name a few?
    • Answer: A CSS preprocessor is a scripting language that extends CSS and compiles it into regular CSS. Examples include Sass, LESS, and Stylus.