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, go to HTML File from the list. PhpStorm creates a stub file based on the HTML file template and opens it in the editor., and then select
Creating references in an HTML file
<img> tag, PhpStorm suggests completion for the path to the file you are referencing.
<img> tags inside
<img> tags, PhpStorm also generates the
For most HTML tags and attributes PhpStorm can show you a summary from the corresponding MDN article. This summary is displayed in the Documentation popup which also shows the deprecation status of a tag or an attribute and information on its compatibility with various browsers.
To view documentation for a tag or an attribute at caret
Press Ctrl+Q or select Documentation popup with a brief description of the tag or the attribute.from the main menu. PhpStorm opens a
If the tag or the attribute is available in all versions of browsers, PhpStorm does not show any information about its compatibility.
Otherwise, the Documentation popup also lists the browsers and their versions that support the tag or the attribute.
If the tag or the attribute is deprecated, the popup also informs you about this status.
To open the MDN documentation for a tag or an attribute in the browser
In the Documentation popup (Ctrl+Q), click the link at the bottom.
Press Shift+F1 or selectfrom the main menu.
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 that opens, type the URL address of the web page or choose a previously opened URL from the list.
Viewing embedded images
To view an image in PhpStorm
Select the image file in the Project tool window, and choose from the context menu of the selection or press F4.
Alternatively, position the caret at the reference to the image in the editor, and choosefrom 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 from the context menu of the selection.
In the Extract Include File dialog that opens, specify the name of the include file without the extension 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.
Configuring syntax highlighting
You can configure HTML-aware syntax highlighting according to your preferences and habits.
In the Settings/Preferences dialog (Ctrl+Alt+S), go to .
Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.