Code and Split page views
The Design view of a web page enables you to visually design web pages while the HTML code is automatically created for you behind the scenes. However, there might be times when you need to work with the code of the page. For example, you might have inherited a website project from someone else, and you'd like to know which tags they used.
Code view shows the code that makes up the page. Split view gives you simultaneous complete control over both the design and the code of your web pages. As you select items in one pane, the other pane scrolls and identifies the item in that pane. For example, if you select a PARAGRAPH element in the Design pane, the Code pane will scroll to the corresponding <p> tag and vice versa. This is a great way to monitor the code as you go and is also useful as a learning tool because you can work in the Design pane and see the code as it updates automatically in the Code pane.
Note
To move between the Code and Design views while a page is in Split view, press ALT+PAGE DOWN or ALT+PAGE UP.
As you work in the Design pane in Split view, you can see the code automatically updated in the Code pane — there's no need to refresh the page. If you edit in the Code pane in Split view, the Design pane reflects your changes after you click anywhere in the Design view, save the page, or point to the View menu and click Refresh.
Tip
If you need more room for both the Design and Code panes than the Split view provides, consider opening your page in a new window (on the Window menu click Open in New Window) and using the Design view of the page in one window and the Code view of the page in the other window. If you have a second monitor installed on your computer, you can display the window that contains the Design view of your page on one monitor, and the other window that contains the Code view of the page on the other monitor.
To resize the Design and Code panes in Split view
In Split view, do one of the following:
Drag the line that is between the Design and Code panes.
In the Design pane, right-click, and click Move Split. Press either the UP ARROW or DOWN ARROW key to move the dividing line up or down. When you are done moving the line, press ENTER.