Skip to end of metadata
Go to start of metadata

Redirection Notice

Icon
This page will redirect to https://www.jetbrains.com/help/phpstorm/editing-html-files.html in about 2 seconds.

 

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.

Icon

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#container>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.

Icon

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.

  • No labels