Code and Split page views

Article
10/10/2017

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 site 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 p 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.

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.

Code and Split page views

To resize the Design and Code panes in Split view

See also

Tasks

Concepts

Additional resources