I am able to divide the whole page into 4 regions and they are:-

**[header]** (on the very top), **[nav]** (right below the header), **[section**] (on the bottom left) and **[main]** (on the bottom right).

In the **[nav]** portion, I have a list of hyperlinked items (like “item-A”, “item-B”, etc).

The task is to:-

When “item-A” is selected, the corresponding sub-list containing “A1”, “A2”, “A3” etc should be displayed on the **[section]** part. Similarly, if “item-B” is selected, the sub-list “B1”, “B2” should also be displayed on the **[section]** part (overwriting the previous content, of course).

“B2” again is hyperlinked to the file “B.html” which, when called, should be executed on the **[main]** portion.

How can I do all of the above?

P.S. I can finish the above if I use **[frame]** and **[frameset]**. Unfortunately, these become obsolete in HTML5.

[![enter image description here](https://i.stack.imgur.com/b9P0d.png)](https://i.stack.imgur.com/b9P0d.png)

The widths and heights of each region can be defined inside the CSS setup.