JetBrains
Available in products

HTML/XHTML/CSS Editor

HTML/XHTML/CSS Editor is available as a part of following products:

Our IDE gives you an excellent support for editing HTML, XHTML and CSS code. Navigation, completion for tag names, attributes and styles, on-the-fly code inspections, quick fixes, and even refactoring — everything you need to effectively author the code for Web development.

Read the sections below, scan the screenshots and download product that suits your needs to try it in action.




HTML/XHTML editor

DOM- and Schema-Based Code Completion

Based on its deep knowledge of HTML/XHTML and XML code, IDE is capable of completing:

  • tag names
  • closing tags
  • attributes
  • styles
  • file references

HTML completion

In CSS, code completion works for:

  • keywords
  • values
  • properties
  • classes
  • HTML IDs

Try Ctrl+Space⌃Space in any place of your code and you'll be rewarded.
CSS value completion    CSS attribute completion

Code formatting, HTML/XHTML syntax highlighting

Code formatting according to HTML-specific Code Style (defined via a dedicated Code Style settings panel)

Our HTML Editor provides advanced syntax highlighting for HTML & XHTML files, with the opportunity to customize your own color schemes and even share them with your team members.

Code Folding

By folding code, you can hide the parts that are not important at the moment and concentrate on the code structure or the current coding point.

HTML/XHTML code inspections

Code inspections to detect HTML/XHTML code browser compatibility issues. The bundled Quirks Mode plugin checks HTML/XHTML code to ensure it is rendered the same way across different browsers.

HTML/XHTML code inspections

Validation and Quick-Fixes

HTML Editor detects and suggests auto-fixes for such problems as:

  • missing closing tag
  • missing required attributes
  • invalid attributes or illegal values
  • wrong references to files in links
  • duplicate attributes
  • invalid CSS selector format
  • invalid CSS properties
  • unused CSS class definitions
  • invalid local anchors and more...

HTML inspection

HTML inspection quick-fix


Whenever you see a bulb, hit Alt+Enter⌥Enter to see what IDE suggests

CSS inspection quick-fix result

CSS inspection quick-fix


Check for correct image size with quick-fix

Image size quick-fix

Refactoring for HTML

  • Rename file, anchor, etc.
  • Move/Copy file
  • Safe Delete file

HTML5 Support

Create a new HTML document with <!DOCTYPE HTML> to enable HTML5 support for that file. Suppose we want to use a new <canvas> element. Not only will the IDE recognize your intention while you are typing <ca and suggest adding <canvas>, but even after pressing SpaceSpace it will suggest attributes supported by this HTML5 element:

Canvas attributes

IDE also understands your code and the type of each element, so it will be able to help you with a new JavaScript API and show the methods supported by the new HTML5 element:

Canvas JavaScript API

Just press Ctrl+Space⌃Space, and the IDE will suggest all possible autocompletion options.

HAML Support

Syntax highlighting and auto-indenting.

Syntax highlighting and auto-indenting

to the top

Navigation

Fast HTML/XHTML navigation

The active breadcrumbs bar allows you to fast navigate your code, displaying your way through the nodes hierarchy:

The active breadcrumbs bar

Find/highlight usages

The Find/highlight usages feature works for tags, IDs, files, images, styles, etc. It allows you to easily analyze relationships within your application. You can also perform the structural search and replace with your HTML/XHTML files.

Matching tag highlighting

This feature not only verifies the consistency of tag pairs, but also allows to quickly navigate to paired tags (Ctrl+]⌘] / Ctrl+[⌘[).

Matching tag highlighting

HTML tag tree highlighting makes it easier to work with large and complex HTML files, with a deeply nested tags structure:

Matching tag highlighting

Go to declaration

The Go to declaration feature (Ctrl+B⌘B) works even for references to images (opens the image in editor tab, via bundled plugin).

Go to declarationt Go to declaration result

Structure View

The convenient structure view, fully synchronized with the editor, allows you to analyze the structure of your HTML/XHTML file and quickly navigate to the desired place in code.

The Structure tool window provides the ability to review your CSS structure and quickly navigate to the desired places in code.

to the top

CSS editor

CSS editor that lets you quickly and easily edit CSS code, with completion, error highlighting, finding references, eliminating the need for developers to wade through CSS references all day, or to waste time debugging conflicting styles, for example.

CSS code completion

CSS code completion

Code completion works for CSS keywords, values, properties, classes, HTML IDs, etc. The editor also supports CSS parameter info display.

CSS syntax & error highlighting

CSS error highlighting

CSS Editor detects and highlights various CSS errors like invalid class references, missing or incorrect attributes, or values that are overwritten or do not match attribute specifics.
The IDE also provides instant quick fixes for most of the found errors.

CSS on-the-fly validation & intention actions

CSS on-the-fly intention actions

  • Missing or invalid closing braces
  • Invalid selector format
  • Invalid CSS properties
  • Unused CSS class definitions
  • and more...

Refactoring

This important feature is a real time-saver which additionally guarantees the consistency of the refactored code. Currently the following refactorings are available for CSS:

  • Rename (including the opportunity to rename CSS file, class or ID attribute, etc., directly from within HTML)
  • Move/Copy file
  • Safe Delete file
  • Extract inlined style block from HTML into a CSS file

Auto-comment

To automatically comment a block of CSS code, or just a single line, you can use the same shortcut that is defined for Java commenting (Ctrl+Shift+/⌘⇧/ and ⌘/⌘/, respectively).

Code formatting

A dedicated settings dialog allows you to customize your code formatting preferences or requirements for CSS code separately.

SASS & SCSS

The IDE provides SASS (Syntactically Awesome Stylesheets) support with syntax highlighting, indentation-aware folding etc.

Syntax highlighting is available for SCSS along with SCSS style imports, find usages, go to declarations and rename refactoring for variables and mixins.

to the top

Ease of use

Show content

Quick Definition Lookup(Ctrl+Shift+I⌥Space) on a CSS ID immediately shows a popup displaying the actual styles defined for this particular ID:
CSS Show content
when invoked on an image file reference, you will see an image preview.

This works both in code and in completions lists.

HTML Show content

Show Applied Styles

Puzzled to understand where the styles come from for a particular tag in your page? Right-click it and choose Show Applied Styles for Tag.
This command opens a tree-view of all styles that are applied to the tag by CSS, with all possibles overrides.

Show Applied Styles

Extract Embedded Styles

Clean your HTML code by moving styles embedded inside tags either to the current file <style> section or to a linked external .css file.

Simply invoke 'Extract Embedded CSS' quick-fix, specify CSS selector and destination for the new CSS class.

Extract Embedded Styles

Quick view of docs

Quick doc (Ctrl+Q⌃J) opens descriptions of HTML tags, attributes (with available values if defined), etc., from the official W3C standard.

Zen Coding

HTML Editor allows you to use the power and speed of Zen coding. All abbreviations are available for creating new content and for wrapping an existing structure.

Type div.feature>h4+p, press TAB and you'll get

        <div class="feature">
        <h4></h4>
        <p></p>
        </div>
        

to the top