PhpStorm brings powerful support for HTML that includes syntax and error highlighting, formatting according to the code style, structure validation, code completion, on-the-fly preview during a debugging session (Live Edit), and much more.
HTML specification is configurable with the Default HTML language level preference on thepage of PhpStorm settings (Ctrl+Alt+S). By default, specification HTML 5.0 from W3C is assumed.
Creating an HTML file
On the main menu, choose HTML File in the pop-up list. PhpStorm creates a stub file based on the HTML file template and opens it in the editor., and then choose
Generating references in an HTML file
PhpStorm can generate
<img> tags inside
<img> tags, PhpStorm also generates the
Previewing output of an HTML file in a browser
Select PhpStorm default browser, select Default.on the main menu and then select the desired browser from the list. To open the
Alternatively, hover your mouse pointer over the code to show the browser icons bar, and click the icon that indicates the desired browser:
If you have only one browser configured, just press Alt+F2.
Viewing HTML source code of a web page in the editor
In the Open URL dialog box that opens, type the URL address of the web page or choose a previously opened URL from the list.
Viewing embedded images
PhpStorm offers several ways to view images embedded in an HTML file. You can use navigation to source, open an image in an external graphical editor, or preview images on-the-fly.
To view an image in PhpStorm
Select the image file in the Project tool window, and choose on the context menu of the selection or press F4.
Alternatively, place the cursor at the reference to the image in the editor, and chooseon the context menu or press Ctrl+B
To view an image in an external editor
Configure the path to the external editor on the Images page ( for Windows and Linux or for macOS).
Select the image file in the Project tool window, and choose or press Ctrl+Alt+F4.
Extracting an include file
<script> tags can also be extracted.
In the editor, select the code block to be extracted and chooseon the main menu or on the context menu of the selection.
In the Extract Include File dialog that opens, specify the name of the include file and the directory to store it in. You can accept the predefined directory or select another one.
Click OK, when ready. PhpStorm extracts the selected source code into the specified file in the target directory and generates the corresponding reference in the source file.