logo

Frames in HTML – Long Answer Questions

Medium Level (Application & Explanation)

Q1. Explain the purpose of frames in HTML with suitable examples. How do they enhance the structure of a web page?

Answer:

  • Frames in HTML help divide a web page into multiple independent sections.
  • This allows each section or "frame" to display a different HTML document at the same time.
  • For example, a website can have a menu bar on the left frame and content pages loading on the right frame.
  • This setup helps in creating fixed navigation menus or headers which do not reload when the main content changes.
  • Frames make it easy to organize and access large websites by keeping common components (like menus) visible at all times.
  • They let the user navigate without reloading the entire webpage, saving both time and bandwidth.

Q2. Describe the use of <frameset> and <frame> tags in creating a frames-based webpage. Illustrate your answer with sample code and explanation.

Answer:

  • The <frameset> tag is used to define the layout—how the browser window is split into rows or columns.
  • Inside <frameset>, the <frame> tag specifies which HTML file or content appears in each section.
  • For example: 
    <frameset cols="25%,75%">
  <frame src="navigation.html">
  <frame src="content.html">
</frameset>
  • Here, the browser window is split into two vertical sections: 25% for navigation, 75% for main content.
  • Each <frame> loads a different HTML document, making the web page interactive and organized.
  • Remember, when using <frameset>, the usual <body> tag is not used.

Q3. Explain any four important attributes of the <frame> tag. State their practical uses in designing frames.

Answer:

  • src: Sets which HTML document will appear inside the frame. For example, src="menu.html" shows the menu page.
  • name: Assigns a name to the frame, allowing other links to target this frame. Example, name="rightFrame".
  • scrolling: Controls scrollbars. scrolling="yes" shows scrollbars, no hides them, and auto adds as needed.
  • noresize: Prevents the user from changing the frame size by dragging the border.
  • These attributes make navigation smoother and help design user-friendly web layouts.

Q4. How does the use of frames benefit the navigation and usability of large websites? Give real-life examples.

Answer:

  • Frames separate web elements like menus, headers, and content.
  • In large websites, the navigator menu can stay fixed in one frame, while the rest of the page updates.
  • For example, in an e-learning portal, the syllabus/filter panel can stay visible, and only the lesson content changes.
  • Users do not have to scroll back up to find the menu or wait for the whole page to reload.
  • This makes complex sites easier to use, reduces loading time, and avoids repeated downloads of menus or sidebars.
  • Such a structure is especially helpful for
    reference
    sites, documentation portals, and admin dashboards    .

Q5. Describe what is meant by “linking between frames” in HTML. How does the target attribute work? Give an example.

Answer:

  • Linking between frames means opening a web page in a specific frame when a user clicks a link, rather than replacing the whole webpage.
  • This is done using the target attribute in <a> (anchor) tags inside one frame.
  • The target attribute should match the name attribute of the frame that will show the new content.
  • For example, if the right frame has name="rightFrame", use: 
    <a href="about.html" target="rightFrame">About Us</a>
  • When clicked, "about.html" opens only in "rightFrame" and the rest of the page remains unchanged.
  • This makes navigation fast and smooth for visitors, as common elements (like menus) remain visible.

High Complexity (Analysis & Scenario-Based)

Q6. Analyze the following scenario and write the HTML code: You want the top 20% of your webpage to always show a fixed header (header.html), and the rest of the page to display two frames side-by-side: a left menu (menu.html) and right content area (home.html). How would you achieve this using frames?

Answer:

  • First, use a <frameset> tag to split the page horizontally: top 20% for header, bottom 80% for content.
  • Next, for the bottom 80%, nest another <frameset> to split vertically into left (menu) and right (content).
  • Here is the code: 
    <frameset rows="20%,80%">
  <frame src="header.html" name="header" noresize>
  <frameset cols="30%,70%">
    <frame src="menu.html" name="leftMenu">
    <frame src="home.html" name="mainContent">
  </frameset>
</frameset>
  • This layout keeps the header fixed and menu/content side by side.
  • The nested frameset allows for complex web page designs.
  • Each section can be navigated and updated independently.

Q7. Suppose a user complains that scrollbars appear even when the content fits inside the frame. Which attribute of the <frame> tag addresses this issue? Explain how to prevent unnecessary scrollbars.

Answer:

  • The <frame> tag's scrolling attribute controls the appearance of scrollbars.
  • Using scrolling="no" hides scrollbars, while scrolling="yes" forces them to appear.
  • scrolling="auto" (the default) shows scrollbars only when needed.
  • If unnecessary scrollbars appear, check that the attribute is set to "auto" and not "yes".
  • Also, ensure the marginwidth and marginheight are not too big, which could shrink the visible area and add scrollbars.
  • Proper use of this attribute helps make frames look neat and user-friendly.

Q8. Evaluate the use of frames in modern web design. Why are <frameset> and <frame> tags considered outdated, and what can be used instead?

Answer:

  • <frameset> and <frame> tags are deprecated in HTML5; they're no longer recommended for modern websites.
  • Frames cause issues with bookmarks, printing, navigation, and search engines (SEO).
  • They also make websites less responsive for different screen sizes and devices.
  • Instead, designers use CSS-based layouts and the <iframe> tag for embedding content.
  • CSS layouts provide flexibility, improve accessibility, and work better with modern browsers and devices.
  • As a result, learning frames is mostly for historical understanding or legacy systems.

Q9. Consider this code:

<frameset cols="40%,*">
  <frame src="nav.html" name="nav">
  <frameset rows="50%,50%">
    <frame src="welcome.html">
    <frame src="footer.html">
  </frameset>
</frameset>

Describe the appearance and structure of the resulting web page.

Answer:

  • The main window is divided vertically into two parts: left (40%) and right (remaining, marked by *).
  • The left frame shows "nav.html" and covers 40% of the width—usually used for a navigation menu.
  • The right side is further divided horizontally into two equal parts using a nested frameset:
    • Top right half (50%) displays "welcome.html" (perhaps a main page or intro).
    • Bottom right half (remaining 50%) displays "footer.html".
  • Thus, the layout has three sections: a left pane and two stacked right panes.
  • The design allows independent loading of navigation, main info, and footer.
  • This complex division is managed using nesting of framesets.

Q10. Discuss the advantages and disadvantages of using frames in HTML. In which situations might frames still be useful despite their drawbacks?

Answer:

  • Advantages:
    • Allow independent sections (menus, content, headers) to stay visible.
    • Enable changes in one part (like content) without reloading the whole page.
    • Reduce redundant loading of repeated elements (e.g., menu/header).
  • Disadvantages:
    • Not supported in HTML5; deprecated in modern web standards.
    • Difficult for search engines to index content properly.
    • Can cause confusion with printing, bookmarking, and back/forward navigation.
    • Poor compatibility with mobile devices and responsiveness.
  • Usefulness:
    • Still seen in some legacy projects or older applications where structure is complex and updating site is not possible.
    • Useful for admin dashboards or software tools used in closed business environments.
    • For most users, alternatives like CSS layouts and <iframe> are better choices.

Back to Topics

Take the test