HTML Code tree in Code Navigator

In addition to PHP mode available in PhpED's Code Navigator NuSphere's PHP IDE also provides HTML mode for code navigation. HTML Code tree combined with HTML Preview feature provides for easy HTML editing.

HTML Code tree display

When the HTML file is loaded in the editor Code Navigator tab automatically switches to HTML mode. In this mode it displays the tree of HTML elements defined in the file. The bottom part of the Navigator displays the attributes and values of the selected HTML element. For example, the picture below shows the HTML Code Navigator for NuSphere home page:

HTML Code tree navigation

HTML Code tree allows you to navigate easily through HTML file. HTML Code Navigator Tool bar provides the means to configure the display of and navigation inside of the HTML file:

Search. Similar to the way it works in PHP Code Navigator it performs search in the elements of the HTML tree on the text typed in the input field.

Track Current position. When this option is turned on and you move the cursor in the editor, the HTML Code navigator highlights the tree element corresponding to the current position of the cursor

Select button. When you press this button, the code corresponding to the current HTML Tree element gets selected in the editor.

Go To Definition. Pressing this button positions the cursor in the editor on the HTML code corresponding to the current element of HTML tree, as it shown in the example. The same behavior happens on double clicking of the HTML tree elements

HTML View Filters.

Using this button you can set and modify filters used for the display of the elements of HTML tree, as it is shown on the example. These filters can be defined using Tools->settings->Code-Navigator->HTML

HTML Code navigator is only one of the many HTML Editor Tools available in PhpED along with PHP Editor Tools, such as HTML code folding and HTML Preview. You can see these tools in action when you Download a free trial of NuSphere's PHP IDE today!