Top Interview Questions and Answers for HTML (2024)

Explain the difference between `

` and `` tags.

• Answer:
• `

  `: Represents a division or section of the document. It's a block-level element, meaning it takes up the full width of its container and breaks to a new line.

• ``: Represents a small inline section of the document. It's an inline element, meaning it doesn't break to a new line and takes up only the space needed for its content.

• What is an HTML attribute? Give examples.

  • Answer:
  • An HTML attribute provides additional information about an HTML element. They are written within the opening tag of the element and come in name-value pairs. For example, in the tag ``, "src" and "alt" are attributes, and "image.jpg" and "My image" are their corresponding values.
  • Examples of attributes include:
  • `src` (for images): Specifies the source URL of an image.
  • `alt` (for images): Provides alternative text for images, used by screen readers and displayed if the image fails to load.
  • `href` (for links): Specifies the URL of the linked page.
  • `style` (for elements): Defines inline CSS styles for the element.

• Explain the purpose of the `` section of an HTML document.

  • Answer:
  • The `` section contains metadata about the HTML document. This metadata is not displayed on the webpage itself but is used by browsers and search engines.
  • It includes elements like:
  • ` Defines the title that appears in the browser tab and search engine results.
  • ``: Provides additional information about the document, like character encoding, keywords, description, etc.
  • ``: Links external resources, like CSS stylesheets.
  • ` Includes JavaScript code.

• What is the difference between HTML5 and HTML4?

  • Answer:
  • HTML5 is the latest version of HTML, replacing HTML4. Key differences include:
  • New HTML elements: HTML5 introduces new elements for video, audio, canvas, semantic markup (like `
    `, `
  • Improved multimedia support: HTML5 provides native support for audio and video playback, reducing reliance on plugins like Flash.
  • Better accessibility: HTML5 focuses on improving accessibility with elements like `
  • Removal of deprecated elements: Certain elements deemed outdated in HTML4 are removed in HTML5.

• What is the `` declaration?

  • Answer:
  • The `` declaration is the first line of an HTML document. It tells the browser which version of HTML the document is written in. This allows the browser to render the page correctly. For example, "" indicates an HTML5 document.

• Explain the use of `

  • Answer:
  • The `

• What are the different types of input elements in HTML?

  • Answer:
  • Common input elements include:
  • `text`: For entering single-line text.
  • `password`: For entering passwords, masking the input characters.
  • `email`: For entering email addresses.
  • `number`: For entering numerical values.
  • `checkbox`: For selecting one or more options from a set.
  • `radio`: For selecting a single option from a set.
  • `file`: For uploading files.
  • `submit`: To submit the form data.

• How can you create a hyperlink in HTML?

  • Answer:
  • You can create a hyperlink using the `` tag. The `href` attribute specifies the URL to link to. For example, `Visit our website` creates a link that says "Visit our website" and points to "https://www.example.com".

• What is the role of the `alt` attribute in an `` tag?

  • Answer:
  • The `alt` attribute provides alternative text for an image. This text is displayed if the image fails to load, and it's also used by screen readers to describe the image to visually impaired users. It's important to provide meaningful and descriptive alt text for accessibility purposes.

• What is the difference between HTML and CSS?

  • Answer:
  • HTML (Hyper Text Markup Language): Defines the structure and content of a webpage. It uses tags to create elements like headings, paragraphs, images, links, etc.
  • CSS (Cascading Style Sheets): Controls the presentation and style of the elements defined by HTML. It defines things like colors, fonts, spacing, layout, etc. You can use CSS to make your webpage visually appealing and responsive.

• How can you create a table in HTML?

  • Answer:
  • You create a table using the following tags:
    • ``: Defines the table itself.
      `
      `: Defines a table row.
      `

      `: Defines a table cell or data cell. `

      `: Defines a table header cell. Example: Name Age John Doe 30 Jane Doe 25 What is the purpose of the `id` and `class` attributes in HTML? Answer: `id`: Assigns a unique identifier to an HTML element. It should be used only once per page to allow for easy targeting with CSS and JavaScript. `class`: Assigns one or more class names to an element. It allows you to group elements with similar styles or behaviors. You can apply the same CSS rule to multiple elements with the same class. Explain the use of the `` tag in HTML. Answer: The `` tag provides metadata about the HTML document, not displayed on the page itself. Some common uses include: `charset`: Specifies the character encoding of the document (e.g., UTF-8 for supporting international characters). `name`: Used for defining metadata like the website's description, keywords for search engines, and author information. `http-equiv`: Used for setting HTTP-related headers, like setting the content type or refreshing the page. `viewport`: Defines the viewport for mobile devices, controlling how the page is scaled and displayed. What is the role of the ` Answer: The ` How can you use comments in HTML? Answer: You use the following syntax for comments in HTML: <!-- This is a comment --> Comments are ignored by browsers and are useful for adding explanatory notes to your code, temporarily disabling sections of code, or marking portions for future reference. What are the different levels of HTML headings? Answer: HTML provides six levels of headings, from ` What is semantic HTML? Give examples. Answer: Semantic HTML uses elements that convey meaning and purpose in addition to their structure. It makes your HTML more readable and understandable, both for browsers and for search engine crawlers. Examples include: ` `: Represents a self-contained piece of content like a blog post or a news article. ` Represents a sidebar or a related content that is separate from the main content. ` Represents a section of the page that contains navigation links. ` Represents the footer section of the page, often containing copyright information, contact details, etc. How can you include an external CSS stylesheet in your HTML document? Answer: You use the `` tag within the `` section of your HTML document. The `rel` attribute should be set to "stylesheet" and the `href` attribute should point to the URL of your external CSS file. For example: <link rel="stylesheet" href="styles.css"> What is the purpose of the ` Answer: The ` Explain the difference between inline, embedded, and external stylesheets in CSS. Answer: Inline Styles: CSS styles are applied directly within the HTML element using the `style` attribute. This is specific to that particular element. For example: <h1 style="color: blue; font-size: 24px;">Heading</h1> Embedded Styles: CSS rules are placed within the ` External Stylesheets: CSS rules are written in a separate file (e.g., "styles.css") and linked to the HTML document using the `` tag. This keeps the HTML and CSS code separate and allows for easier maintenance and reuse of styles across multiple pages. For example: <link rel="stylesheet" href="styles.css"> What is the role of the `` section in an HTML document? Answer: The `` section contains the visible content of your webpage, including all the text, images, videos, forms, and other elements that users will interact with. It's the primary section where you build the structure and content of your web page. What is the purpose of the ` ` tag in HTML? Answer: The ` ` tag inserts a line break within the text. It forces the following text to appear on a new line. For example: This is the first line. <br>This is the second line. This will display:This is the first line.This is the second line. How can you create an unordered list in HTML? Answer: You use the ` ` tag for an unordered list. Each list item is defined with the ` ` tag. For example: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul> This will display a bullet point list. How can you create an ordered list in HTML? Answer: You use the ` ` tag for an ordered list. Each list item is defined with the ` ` tag. For example: <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ol> This will display a numbered list. Explain the difference between block-level and inline elements in HTML. Answer: Block-level Elements: These elements take up the full width of their container and always start on a new line. For example, ` `, `