HTML Interview Questions and Answers (Latest 2024)

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

    • Question: What are inline, internal, and external CSS?

    Answer:

    In CSS (Cascading Style Sheets), there are three main ways to apply styles to HTML elements: inline, internal, and external CSS. Each method has its own use case, advantages, and limitations.

    1. Inline CSS

    • Definition: Inline CSS refers to adding CSS rules directly within an HTML element using the style attribute.

    • Syntax: The CSS properties are written as part of the element’s style attribute.

      Example:

      <p style="color: red; font-size: 16px;">This is a red paragraph.</p>

    • Advantages:

      • Quick and easy for applying styles to individual elements.
      • Does not require external or internal CSS files.

    • Disadvantages:

      • Not reusable. The same styles have to be repeated for every element.
      • Makes the HTML code less clean and harder to maintain.
      • Inline styles override both internal and external styles, leading to potential style conflicts.

    2. Internal CSS

    • Definition: Internal CSS refers to adding CSS rules within the <style> tag in the <head> section of the HTML document.

    • Syntax: The <style> tag contains CSS code that affects all elements on the page. It is placed within the <head> of the HTML document.

      Example:

      <html>
  <head>
    <style>
      p {
        color: blue;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <p>This is a blue paragraph.</p>
  </body>
</html>

    • Advantages:

      • Centralizes styles for the entire page in one location.
      • Styles can be applied to multiple elements within the page.
      • Easier to manage than inline CSS for a single document.

    • Disadvantages:

      • The styles are only applied to the current HTML document.
      • If multiple pages use the same styles, they need to be duplicated in each page.

    3. External CSS

    • Definition: External CSS refers to writing CSS rules in a separate .css file and linking it to the HTML document using the <link> tag.

    • Syntax: The <link> tag is placed in the <head> section, and it points to the external CSS file.

      Example:

      <html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This is a paragraph styled with external CSS.</p>
  </body>
</html>

      styles.css:

      p {
  color: green;
  font-size: 20px;
}

    • Advantages:

      • Allows for separation of concerns (HTML structure and CSS styling are kept separate).
      • Styles can be applied across multiple pages by linking the same external stylesheet, making it easy to maintain.
      • Reduces the size of HTML files by offloading the styling to an external file.

    • Disadvantages:

      • Requires an additional HTTP request to fetch the external file, which can slightly increase page load time (though this is generally offset by browser caching).

    Comparison of Inline, Internal, and External CSS

    FeatureInline CSSInternal CSSExternal CSS
    LocationInside HTML element (style attribute)Inside <style> tag in the <head> sectionIn a separate .css file
    ScopeAffects only the element with the styleAffects all elements in the documentAffects all linked documents
    ReusabilityNot reusableNot reusable across pagesReusable across pages
    MaintainabilityHard to maintainEasier to maintain than inlineBest for maintenance and scalability
    Performance ImpactMinimal (but adds extra code to HTML)Can increase page sizeSlight delay in initial page load (due to additional HTTP request), but benefits from caching
    Use CaseQuick styling for individual elementsStyling specific to a single documentConsistent styles across multiple pages

    Best Practices:

    • Inline CSS is useful for quick, temporary styling or for small projects where you don’t need to reuse styles.
    • Internal CSS is suitable for documents where the styles are unique to that page and are not reused elsewhere.
    • External CSS is the best practice for larger projects or websites, as it allows for consistent styling across multiple pages and provides better maintainability.

    In Summary:

    • Inline CSS: CSS rules applied directly to HTML elements using the style attribute.
    • Internal CSS: CSS rules written within a <style> tag inside the HTML document’s <head>.
    • External CSS: CSS rules stored in a separate .css file, linked to the HTML document.

    Each of these methods has its own advantages and disadvantages, and the choice of which one to use depends on the size and complexity of the project.

    Question: What are the <figure> and <figcaption> elements in HTML5?

    Answer:

    In HTML5, the <figure> and <figcaption> elements are used to group content, typically media content (like images, videos, charts, or diagrams), and provide a description or caption for that content.

    1. <figure> Element

    • Definition: The <figure> element is used to encapsulate content like images, diagrams, charts, or any other media. This element is typically used to represent content that is self-contained and can be understood independently of the surrounding content.

    • Purpose: The <figure> element is meant to contain content that requires a caption or description, and it’s often used in combination with the <figcaption> element to provide additional information about the media content.

    • Example:

      <figure>
  <img src="image.jpg" alt="A beautiful sunset">
  <figcaption>A stunning sunset over the ocean.</figcaption>
</figure>

    • Usage:

      • Commonly used to wrap images, videos, illustrations, or other media content along with their captions.
      • It can also be used for other types of content, such as tables, when you need to provide a description for the content.

    2. <figcaption> Element

    • Definition: The <figcaption> element is used to define a caption or description for the content inside a <figure> element. It is typically placed as the first or last child of the <figure> element.

    • Purpose: The <figcaption> provides a textual description of the content inside the <figure>. It helps in providing context, clarifying the meaning, or adding extra information about the media or figure.

    • Example:

      <figure>
  <img src="image.jpg" alt="A beautiful sunset">
  <figcaption>A stunning sunset over the ocean.</figcaption>
</figure>

    • Usage:

      • The <figcaption> element is used to describe an image, video, or other media types within a <figure>.
      • It can be placed before or after the media content inside the <figure>.

    Key Points:

    • The <figure> element is used to group media content and its description, often used with images, videos, charts, and other media types.
    • The <figcaption> element is used to provide a caption or description for the content inside the <figure>. This description is often relevant for users to understand the context of the media.

    Advantages of Using <figure> and <figcaption>:

    • Semantic HTML: These elements improve the semantic structure of the page, making it easier for search engines and accessibility tools to understand the content.
    • Better Accessibility: Screen readers and other assistive technologies can better interpret the relationship between the media content and its description.
    • SEO Benefit: Proper use of these elements can enhance search engine optimization by providing meaningful context to media elements.

    Example of a Complete Use Case:

    <figure>
  <img src="dog.jpg" alt="A cute dog in the park">
  <figcaption>The dog enjoying a sunny day in the park.</figcaption>
</figure>

    In Summary:

    • <figure>: Used to encapsulate content like images, videos, or other media that is self-contained.
    • <figcaption>: Provides a caption or description for the content inside the <figure> element.

    Together, they enhance the structure of HTML documents, providing both visual and semantic meaning to media content.

    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