PyCharm 2019.3 Help

HTML

PyCharm 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 the Languages and Frameworks | Schemas and DTDs page of PyCharm settings Ctrl+Alt+S. By default, specification HTML 5.0 from W3C is assumed.

Creating an HTML file

  • From the main menu, select File | New, and then select HTML File from the list. PyCharm creates a stub file based on the HTML file template and opens it in the editor.

Creating references in an HTML file

Inside a <script>, <link>, or <img> tag, PyCharm suggests completion for the path to the file you are referencing.

Alternatively, in the Project tool window, select the JavaScript, CSS, or image file you want to reference and drag it into the HTML file. PyCharm generates the <script>, <link>, or <img> tags inside <head>. For <img> tags, PyCharm also generates the width and height attributes.

Documentation look-up

For most HTML tags and attributes PyCharm 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 View | Quick Documentation Lookup from the main menu. PyCharm opens a Documentation popup with a brief description of the tag or the attribute.

    • If the tag or the attribute is available in all versions of browsers, PyCharm does not show any information about its compatibility.

      HTML quick documentation: attribute is available in all versions of browsers
    • Otherwise, the Documentation popup also lists the browsers and their versions that support the tag or the attribute.

      HTML quick documentation: compatible browsers are listed
    • If the tag or the attribute is deprecated, the popup also informs you about this status.

      HTML quick documentation: status Deprecated for <big> tag

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 select View | External Documentation from the main menu.

Previewing output of an HTML file in a browser

  • Select View | Open in Browser from the main menu and then select the desired browser from the list. To open the default PyCharm browser, select Default.

  • Alternatively, hover your mouse pointer over the code to show the browser icons bar, and click the icon that indicates the desired browser: Firefox Chrome Safari Internet Explorer Opera

  • If you have only one browser configured, just press Alt+F2.

Viewing HTML source code of a web page in the editor

  1. Choose File | Open URL.

  2. 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

PyCharm 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.

Check and configure the appearance of the preview on the Images page.

To view an image in PyCharm

  • Select the image file in the Project tool window and press F4.

  • Alternatively, position the caret at the reference to the image in the editor and press Ctrl+B

  • To preview an image in a popup instead of in a separate tab, select the reference to it and press Ctrl+Shift+I

To view an image in an external editor

  1. Configure the path to the external editor on the Images page (File | Settings | Editor | Images for Windows and Linux or PyCharm | Preferences | Editor | Images for macOS).

  2. Select the image file in the Project tool window, and choose Open in external editor or press Ctrl+Alt+F4.

Extracting an include file

You can extract a fragment of HTML code into a separate include file. Entire JavaScript code blocks inside a <script> tags can be extracted as well. PyCharm also suggests adding references instead of duplicates of the selected fragment.

  1. In the editor, select the code block to be extracted and choose Refactor | Extract | Extract Include File from the main menu or from the context menu of the selection.

  2. 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.

  3. Click OK, when ready. PyCharm 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.

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Color Scheme | HTML.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.

Last modified: 10 December 2019