HTML Editor in PhpStorm

Tweet
PHP development happens at the back-end, but also at the front end. In this tutorial, we'll have a quick look at the HTML editor provided by
PhpStorm.
Editing HTML using PhpStorm
Open in Browser
Working with Live Edit
Make sure to also check the CSS Editor in PhpStorm tutorial.

Editing HTML using PhpStorm

Just like when editing PHP code, PhpStorm comes with a rich editor for HTML. It comes with code completion, formatting, intentions, navigation
and so on. The IDE not only completes HTML elements, it also does this for attributes and files we may want to reference.

HTML is quite verbose. To write HTML code faster and more efficient, PhpStorm lets us use Emmet, which provides a shorthand for lots of things.
For example, we can type p>lorem and hit TAB to expand into a paragraph with Lorem Ipsum text. A more advanced example would be div#cont
ainer>div.span4*3>img.thumbnail+p>lorem which expands into a container div with a grid system in which each cell contains an image and a
paragraph.

From the Structure tool window, which can be opened by pressing Alt+7 (CMD+7 on Mac OS X), we can see the structure of the HTML file we
are working with. It lets us navigate through the file with ease, using the arrow keys on our keyboard. We can also search for a given style. All we
need to do is start typing inside the tool window. What's great is that the structure tool window shows the structure of any language we're using in
an HTML document, including CSS and JavaScript.

Check the Working with the PhpStorm Editor Actions and Navigation tutorial to learn more about common editor features like
navigation, bookmarks, code inspections and more.

Open in Browser
While working on a document, we can quickly open it in a browser to see the result of our carefully crafted HTML. All we have to do is pick our
browser of choice after hovering over our document (or press Alt+F2 and pick from the list).

From the IDE Settings | Web Browsers, we can configure the browsers that are available for showing previews as well as pick the default
browser PhpStorm uses. For example, we could add Chromium to the available browsers.

Working with Live Edit

Next to previewing the page we're working on, we can also make use of Live Edit in PhpStorm. It updates the contents of our web page in the
browser with the changes we're making in the IDE, without reloading. It also lets us inspect dynamically generated DOM elements in PhpStorm.
Find out more in this tutorial.
Tweet