🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

📖 INDEX

# helloworld
# comments-html
# html-tag
# head-tag
# body-tag
# p-tag
# b-tag
# i-tag
# strong-tag
# em-tag
# s-tag
# cite-tag
# blockquote-tag
# sub-tag
# sup-tag
# u-tag
# big-tag
# tt-tag
# pre-tag
# q-tag
# code-tag
# samp-tag
# var-tag
# abbr-tag
# acronym-tag
# address-tag
# ins-tag
# strike-tag
# span-tag
# hr-tag
# title-tag
# meta-tag
# base-tag
# link-tag
# a-tag
# script-tag
# noscript-tag
# style-tag
# div-tag
# h1-tag
# h2-tag
# h3-tag
# h4-tag
# h5-tag
# h6-tag
# ul-tag
# ol-tag
# li-tag
# dl-tag
# dt-tag
# dd-tag
# menu-tag
# dir-tag
# table-tag
# tr-tag
# th-tag
# td-tag
# thead-tag
# tbody-tag
# tfoot-tag
# caption-tag
# col-tag
# colgroup-tag
# form-tag
# input-tag
# textarea-tag
# select-tag
# option-tag
# button-tag
# label-tag
# fieldset-tag
# legend-tag
# datalist-tag
# optgroup-tag
# radio-buttons
# checkboxes
# submit
# reset
# input-types
# input-attributes
# meta-tags
# open-graph
# twitter-cards
# geotagging
# img-tag
# video-tag
# audio-tag
# iframe-tag
# map-tag
# area-tag
# object-tag
# param-tag
# applet-tag
# controls
# autoplay
# loop
# muted
# poster
# src
# type
# javascript-in-html
# basefont-tag
# bdo-tag
# font-tag
# frame-tag
# frameset-tag
# noframes-tag
LOADING ENGINE...

<frame>

AI & DATA SCIENCE // frame-tag

The deprecated <frame> element defined a single pane within a <frameset>-based page layout, splitting the browser window into multiple independently-scrollable documents.

Syntax

<!-- Deprecated: -->
<frameset cols="25%,75%">
  <frame src="nav.html">
  <frame src="content.html">
</frameset>

Deep Dive Course

**`<frame>`** only made sense nested inside a `<frameset>` (which replaced the normal `<body>` entirely) — each `<frame>` loaded its own separate HTML document into one section of a grid layout, letting a navigation menu stay fixed in one frame while content changed in another, all without a full page reload. This entire approach was removed from HTML5 due to serious, well-documented problems: broken browser back/forward behavior, un-bookmarkable URLs (the address bar showed the frameset's URL, not the actual visible content), poor accessibility, and bad SEO (search engines struggled to index frame-based content coherently). Modern layouts achieve the same visual effect with CSS layout (flexbox/grid) and `<iframe>` only for genuinely separate embedded documents.

1Understanding <frame>

`<frame>` only made sense nested inside a <frameset> (which replaced the normal <body> entirely) — each <frame> loaded its own separate HTML document into one section of a grid layout, letting a navigation menu stay fixed in one frame while content changed in another, all without a full page reload. This entire approach was removed from HTML5 due to serious, well-documented problems: broken browser back/forward behavior, un-bookmarkable URLs (the address bar showed the frameset's URL, not the actual visible content), poor accessibility, and bad SEO (search engines struggled to index frame-based content coherently). Modern layouts achieve the same visual effect with CSS layout (flexbox/grid) and <iframe> only for genuinely separate embedded documents.

💡

If you ever need to maintain an ancient frameset-based site, know that <frame>/<frameset> render blank in every current browser — there's no legacy compatibility mode left to fall back on.

editor.html
<!-- Historical frameset layout — non-functional in any modern browser -->
<frameset rows="20%,80%">
  <frame src="header.html">
  <frame src="main.html">
</frameset>
localhost:3000

2Practical Example

Here is a real-world application of <frame> showing how it is used in production HTML.

Header content
Main content
localhost:3000
Header content Main content (both rendered as one normal, bookmarkable, indexable page)

3Best Practices

Follow these guidelines when working with <frame>:

1. Never use <frame>/<frameset> — completely unsupported by every modern browser

2. Use CSS Grid or Flexbox for multi-panel page layouts instead

3. Use a single <iframe> only for the rare case of embedding one genuinely separate external document, not for overall page structure

⚠️

Tip: If you ever need to maintain an ancient frameset-based site, know that <frame>/<frameset> render blank in every current browser — there's no legacy compatibility mode left to fall back on.

editor.html
<!-- Historical frameset layout — non-functional in any modern browser -->
<frameset rows="20%,80%">
  <frame src="header.html">
  <frame src="main.html">
</frameset>
localhost:3000

Examples

Example 01Basic Usage
<!-- Historical frameset layout — non-functional in any modern browser -->
<frameset rows="20%,80%">
  <frame src="header.html">
  <frame src="main.html">
</frameset>
Example 02Advanced Example
<!-- Modern equivalent: CSS Grid layout within a single document -->
<div style="display: grid; grid-template-rows: 20% 80%;">
  <header>Header content</header>
  <main>Main content</main>
</div>

Best Practices

  • Never use / — completely unsupported by every modern browser
  • Use CSS Grid or Flexbox for multi-panel page layouts instead
  • Use a single