DEV Community

Cover image for HTML Interview Preparation Topics
Abhishek singh
Abhishek singh

Posted on

HTML Interview Preparation Topics

1. What is HTML?

HTML stands for Hypertext Markup Language, used to create web pages and provide structure to the content on the web.

  • <!DOCTYPE html>: Defines the document as an HTML5 document.
  • <html>: The root element wrapping all content.
  • <head>: Contains meta-information like character encoding, viewport settings, and page title.
  • <title>: Sets the title of the webpage.
  • <body>: Contains the visible content of the webpage.

2. Difference Between Tag and Element?

  • Tags are enclosed within angle brackets (< >). For example, <p> is a start tag for a paragraph, and </p> is an end tag.
  • Element: Includes both the start tag, content (if any), and the end tag.

3. Types of Lists

There are three types of lists in HTML:

  1. Ordered List (<ol>)
  2. Unordered List (<ul>)
  3. Description List (<dl>)

Example:

<dl>
  <dt>HTML</dt> <!--description term-->
  <dd>HyperText Markup Language</dd> <!--description definition-->
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

4. Basic Structure of Tables 

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

5. Difference Between Link and Anchor?

  • <a> (anchor): Creates hyperlinks to other pages.

    • href: Specifies the URL.
    • target: Specifies where to open the link (e.g., new tab).
    • download: Allows file download.

  • <link>: Defines relationships between the current document and external resources (e.g., stylesheets).

    • rel: Specifies the relationship (e.g., stylesheet).
    • href: Specifies the URL of the external resource.

6. What are Attributes?

Attributes provide additional information about HTML elements and are written in the opening tag.

7. Difference Between Inline and Block Elements?

  • Block Level Element: Takes up the full width available.
  • Inline Element: Takes only the necessary width.

8. Forms

HTML forms allow users to submit data. Forms typically include input elements like text fields, checkboxes, radio buttons, and submit buttons.

  • <form>: Contains action URL and method (GET/POST).
  • <input>: Fields for user data.
  • <label>: Associates text with input elements.
  • <button>: Triggers form submission.

9. <article>

The <article> element is a semantic tag used to represent self-contained and independent content, introduced in HTML5.

10. <aside>

The <aside> element is used for content related to the main content but separate from it (e.g., sidebars).

11. Audio and Video 

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

12. <canvas>

The <canvas> element allows for dynamic, scriptable rendering of 2D and 3D graphics.

13. Semantic HTML

Focuses on using tags that describe the meaning of the content, making web pages more accessible and SEO-friendly.

14. Accessibility

Ensures people with disabilities can navigate your website by using semantic tags, alt text for images, and proper form labeling.

15. Best Practices

  • Use proper indentation for readability.
  • Write meaningful content, like <title> and alt attributes.
  • Ensure valid HTML by using W3C Markup Validation Service.

16. CSS Performance Optimization Techniques

When a browser loads a page, it pauses HTML parsing to fetch and apply CSS.

Key Concepts:

  • CSS is render-blocking by default, meaning the browser won't render the page until all CSS is loaded.

Optimization Techniques:

  1. Critical CSS: Inline the minimum CSS needed for above-the-fold content. 
   <style>
     body { margin: 0; }
     h1 { color: blue; }
   </style>
Enter fullscreen mode Exit fullscreen mode
  1. CSS Media Attributes: Load CSS conditionally based on device characteristics. 
   <link rel="stylesheet" href="styles.css" media="screen and (min-width: 600px)">
Enter fullscreen mode Exit fullscreen mode
  1. Defer Non-Critical CSS: Load non-essential CSS asynchronously. 
   <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
Enter fullscreen mode Exit fullscreen mode
  1. Minify CSS: Remove unnecessary spaces and comments to reduce file size using tools like CSS-Nano.

17. Loading and Parsing JavaScript

JavaScript can significantly impact page load times, so optimizing how you load and execute JS is crucial.

Key Concepts:

  • JavaScript is render-blocking by default.
  • Scripts are parsed and executed in the order they appear.

Optimization Techniques:

  1. Defer and Async Attributes:

    • defer: Downloads scripts during HTML parsing but executes them after the document is parsed. 
     <script src="script.js" defer></script>

  • async: Downloads and executes scripts as soon as they're available (order not guaranteed).

     <script src="script.js" async></script>

  1. Place scripts at the end of <body>: Ensures HTML is parsed before JavaScript executes.

  2. Minify and Bundle JS: Use tools like UglifyJS or Terser to reduce file size and improve performance.

18. Preloading vs Prefetching

  • Preload: Loads critical assets early. 
  <link rel="preload" href="critical-styles.css" as="style">
Enter fullscreen mode Exit fullscreen mode
  • Prefetch: Downloads resources for future navigation. 
  <link rel="prefetch" href="next-page.html">
Enter fullscreen mode Exit fullscreen mode

19. Lazy Loading

Delays loading of certain resources until they are needed.

  • Lazy Load Images: 
  <img src="image.jpg" alt="Image" loading="lazy">
Enter fullscreen mode Exit fullscreen mode
  • Lazy Load JavaScript: 
  document.getElementById('load-script').addEventListener('click', () => {
    import('./heavy-script.js').then(module => {
      // Use the module
    });
  });
Enter fullscreen mode Exit fullscreen mode

Summary

To optimize CSS and JavaScript loading and parsing:

  • Inline critical CSS and defer non-essential styles.
  • Use defer or async to prevent render-blocking JS.
  • Minify and bundle CSS and JavaScript for better performance.

Top comments (0)

Read next

imranshaik012 profile image

Reverse a string in JavaScript without using reverse()

Imran Shaik -

ibrahemahmad profile image

# Key New Features in React Router 7: Embracing the Remix Future

Ibrahem ahmad -

thaiduong2003 profile image

Toán tử trong Javascript

thai-duong2003 -

rijultp profile image

LiveAPI Devlogs Part 3: Transforming User Onboarding with 3 Industry-Inspired Methods

Rijul Rajesh -