Top HTML Interview Questions and Answers

author image Hirely
at 06 Jan, 2025
  • Software Development
  • Questions

    • Question: What is the difference between HTML and XHTML?

    Answer:

    HTML (HyperText Markup Language) and XHTML (Extensible Hypertext Markup Language) are both markup languages used for creating web pages, but they have key differences related to their syntax, structure, and how they are processed by browsers. Here’s a breakdown of the key differences:

    1. Syntax and Strictness:

    • HTML:

      • HTML has a relaxed syntax where certain rules can be ignored, such as missing closing tags or unquoted attribute values. Browsers will attempt to correct errors and still display the page as intended.
      • Examples:
        • Tags like <li> and <p> can be left unclosed, and browsers will fix them.
        • Attribute values can be written without quotes, e.g., <input type=button>.

    • XHTML:

      • XHTML is more strict than HTML and follows XML (eXtensible Markup Language) syntax rules. It requires that all tags must be properly closed, attribute values must be quoted, and the document must be well-formed.
      • Examples:
        • Every tag must be properly closed, e.g., <br /> instead of <br>.
        • Attribute values must always be enclosed in quotes, e.g., <input type="button" />.

    2. Case Sensitivity:

    • HTML:

      • HTML is case-insensitive. Tag names and attributes can be written in any case, though the convention is to use lowercase.
      • Example: <div>, <DIV>, and <DiV> are all valid in HTML.

    • XHTML:

      • XHTML is case-sensitive. All tag names and attributes must be written in lowercase letters.
      • Example: <div>, but <DIV> is invalid in XHTML.

    3. Document Structure:

    • HTML:

      • HTML documents can be less strict about structure. Certain tags like <html>, <head>, and <body> can be optional in some cases, though their usage is highly recommended.

    • XHTML:

      • XHTML documents must have a well-defined structure. For instance, all HTML elements must be properly nested and closed.
      • The <!DOCTYPE> declaration in XHTML specifies the XML version and schema.

    4. Error Handling:

    • HTML:

      • HTML is lenient when it comes to errors. Browsers will attempt to display the page even if there are errors or missing tags. This is called “quirks mode.”
      • Browsers generally attempt to fix small issues on the fly.

    • XHTML:

      • XHTML is strict in error handling. If an error occurs in the document, the entire page may fail to load or render correctly, and a browser will often not display the content at all. This is because XHTML documents need to be well-formed XML.

    5. Doctype Declaration:

    • HTML:

      • The DOCTYPE declaration in HTML is simple and specifies the version of HTML being used, e.g., <!DOCTYPE html> for HTML5.

    • XHTML:

      • XHTML requires a more detailed DOCTYPE declaration, often including references to XML schemas. For example, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.

    6. MIME Type:

    • HTML:

      • HTML files are served with the MIME type text/html.

    • XHTML:

      • XHTML files should ideally be served with the MIME type application/xhtml+xml. However, older browsers may not support this MIME type and may default to text/html, causing potential issues with rendering.

    7. Self-closing Tags:

    • HTML:

      • In HTML, self-closing tags (like <br>, <img>, and <input>) do not require a closing slash.

    • XHTML:

      • In XHTML, self-closing tags must always end with a closing slash, e.g., <br />, <img />, and <input />.

    8. Compatibility:

    • HTML:

      • HTML is compatible with almost all browsers, including older ones, since it is more lenient in handling errors and inconsistencies.

    • XHTML:

      • XHTML requires modern browsers that can handle XML properly. Older browsers may not support the strict parsing rules of XHTML, leading to rendering issues if served with application/xhtml+xml.

    Summary of Differences:

    FeatureHTMLXHTML
    SyntaxRelaxed, forgivingStrict, follows XML syntax
    Case SensitivityCase-insensitiveCase-sensitive (all lowercase)
    Document StructureFlexibleWell-formed structure required
    Error HandlingLenient (quirks mode)Strict (fails on errors)
    Doctype DeclarationSimple (e.g., <!DOCTYPE html>)Detailed and strict (XML-based)
    MIME Typetext/htmlapplication/xhtml+xml
    Self-closing TagsNot required (<br>)Required (<br />)
    CompatibilityWorks in all browsersRequires modern browsers

    Conclusion:

    • HTML is more lenient, flexible, and widely supported, while XHTML is stricter, more consistent with XML rules, and aims for well-formed documents but requires more effort and is less forgiving with errors.
    • XHTML was intended to replace HTML by offering more stringent rules, but with the advent of HTML5, many of XHTML’s advantages have been incorporated into HTML5, making XHTML less commonly used today.

    Question: What is the difference between id and class attributes in HTML?

    Answer:

    The id and class attributes are both used to identify and apply styles to HTML elements, but they have distinct characteristics and use cases.

    1. Uniqueness:

    • id:

      • An id is unique within a page. Each id value must be used only once in an HTML document.
      • This makes the id suitable for targeting a specific element on the page, such as for styling, JavaScript manipulation, or anchor linking.
      • Example: 
        <div id="header">This is a unique header</div>

    • class:

      • A class is not unique. Multiple elements can share the same class value.
      • This makes the class useful for applying the same styles or behavior to multiple elements.
      • Example: 
        <div class="box">First box</div>
<div class="box">Second box</div>

    2. Use Cases:

    • id:
      • Unique identification: Ideal for identifying a specific element (like a particular section or form) that needs individual styling or JavaScript manipulation.
      • Anchor targeting: It can be used in URLs (with the # symbol) to link to a specific section within a page.
      • JavaScript: In JavaScript, you can use document.getElementById() to target a single element by its id.
    • class:
      • Shared styling: Useful when you want to apply the same styles to multiple elements.
      • Reusability: Since multiple elements can have the same class, it’s ideal for grouping elements that share the same design or behavior.
      • JavaScript: In JavaScript, you can select elements by class using methods like document.getElementsByClassName() or document.querySelectorAll().

    3. CSS Styling:

    • id:

      • In CSS, an id is referenced with a hash symbol (#).
      • Example: To style an element with the id="header": 
        #header {
  font-size: 24px;
  color: blue;
}

    • class:

      • A class is referenced with a dot (.).
      • Example: To style elements with the class="box": 
        .box {
  border: 1px solid #000;
  padding: 10px;
}

    4. Specificity in CSS:

    • id:

      • In CSS, id selectors are more specific than class selectors. This means that if there are conflicting styles, the style applied using an id will take precedence over the style applied using a class.
      • Example: 
        #header {
  color: red;
}
.header {
  color: blue;
}
        In this case, an element with the id="header" will have red color, even if it also has the class="header", because the id selector is more specific.

    • class:

      • class selectors have lower specificity than id selectors. When both are applied to the same element, the id style will override the class style if there’s a conflict.

    5. Accessibility and Semantics:

    • id:

      • Single-purpose: Since id values are unique, they can help with accessibility, such as providing an accessible name for screen readers.
      • JavaScript and URL targeting: id can be used in JavaScript to select specific elements and is also used in anchor links (#idName) to navigate to specific sections of a page.

    • class:

      • Multipurpose: The class attribute is generally used for styling purposes and grouping elements with similar styles or behaviors.
      • Less specific for accessibility: class doesn’t provide unique identification, so it’s less useful for direct accessibility or specific navigation.

    6. Example Usage:

    Using id:

    <!-- Unique element, can be targeted individually -->
<div id="header">Welcome to My Website</div>
<p>This is some text.</p>

    Using class:

    <!-- Multiple elements with the same class, sharing common styling -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<p class="box">Box styled paragraph</p>

    Summary of Differences:

    Featureidclass
    UniquenessUnique within a page (one use)Can be used on multiple elements
    CSS Reference#id.class
    JavaScript SelectiongetElementById()getElementsByClassName()
    ReusabilityNo, it’s specific to one elementYes, can be shared across multiple elements
    Specificity in CSSMore specificLess specific than id

    Conclusion:

    • Use id when you need to target a specific element uniquely in your page.
    • Use class when you want to apply the same styles or behaviors to multiple elements across your page.

    Read More

    If you can’t get enough from this article, Aihirely has plenty more related information, such as HTML interview questions, HTML interview experiences, and details about various HTML job positions. Click here to check it out.

    Tags
    Share

    Related Posts

    Trace Job opportunities

    Hirely, your exclusive interview companion, empowers your competence and facilitates your interviews.

    Get Started Now