HTML/XHTML/CSS Editor
HTML and XHTML editor
CSS editor
HTML and XHTML editor
The support for coding HTML and XHTML in IntelliJ IDEA in many cases surpasses even dedicated HTML editors. IntelliJ IDEA intelligence really shines, helping developers quickly navigate and do HTML coding in ways that are simply not possible with other tools. IntelliJ IDEA also includes the XHTML editor and CSS editor that together make up the best Web page editing toolbox.
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.
Fast HTML/XHTML navigation with the active breadcrumbs bar
HTML/XHTML code completion
IntelliJ IDEA is capable of completing tags (including auto-insertion of closing tags), attributes, styles, and even file references in hyperlinks, etc.
Find/highlight usages
The Find/highlight usages feature now works for tags, IDs, files, images, styles, etc. It allows you to easily analyze relationships within your application. Since version 6.0 you can also perform the structural search and replace with your HTML/XHTML files.
HTML/XHTML code formatting
Code formatting according to HTML-specific Code Style (defined via a dedicated Code Style settings panel)
Matching tag highlighting
This feature, analogous to Matching brace highlighting in Java not only verifies the consistency of tag pairs, but also allows to quickly navigate to paired tags (Ctrl + ] / Ctrl + [).
HTML validation & quick-fixes
- Wrong closing tag
- Missing closing tag
- Missing required attributes
- Check for correct image size with quick-fix
- Invalid attributes or illegal attribute values
- Invalid local anchor
- Wrong references to files in hyperlinks (e.g., values of attributes href and src)
- Duplicate attributes
HTML/XHTML syntax highlighting
IntelliJ IDEA provides advanced syntax highlighting for HTML & XHTML files, with opportunity to customize your own color schemes and even share them with your team members.
Go to declation
The Go to declaration feature (Ctrl + B) works even for references to images (opens the image in editor tab, via bundled plugin).
Show Applied Styles for Tag
This command, available from the context menu when called on a tag, opens a tree-view of all styles that are applied to the tag by CSS, so that you can immediately see all defined style attributes, with possible overridings.
Quick view of docs
Quick doc (Ctrl + Q and Shift + F1) opens descriptions of HTML tags, attributes (with available values if defined), etc., from the official W3C standard.
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.
Show content
(Ctrl + Shift + I) shows the popup with the underlying content:
- on a tag — shows schema
- on a file — shows file content
- on an image — shows image
Open in browser
The View | Open in Browser command is provided for quick view of the current HTML file.
CSS editor
IntelliJ IDEA CSS editor enables developers to quickly and easily edit HTML styles with CSS code completion, error highlighting, finding references, and more. IntelliJ IDEA proves its efficiency once again, eliminating the need for developers to wade through CSS references all day, or to waste time debugging conflicting styles, for example.
CSS code completion
Code completion works for CSS keywords, values, properties, classes, HTML IDs, etc. Since version 6.0 IntelliJ IDEA also supports the CSS parameter info display.
CSS syntax & error highlighting
IntelliJ IDEA detects and highlights various CSS errors like invalid class references, missing or incorrect attributes, values that are overwritten or do not match attribute specifics.
IntelliJ IDEA also provides instant quick fixes for the most of errors found.
CSS on-the-fly validation & intention actions
- Missing or invalid closing braces
- Invalid selector format
- Invalid CSS properties
- Unused CSS class definitions
- and more...
Find/highlight usages
Finding and highlighting usages of CSS ID's, selectors, etc., works now in CSS files as it formerly worked for Java only.
Quick doc
The Ctrl + Q and Shift + F1 shortcut positioned on a selector, or ID, opens description from the official W3C standard.
CSS Code Folding
Ability to fold CSS code gives you an opportunity to hide currently non-important parts of it and concentrate on code structure, or current coding point.
CSS Code formatting
A dedicated settings dialog allows you to customize your code formatting preferences or requirements for CSS code separately.
CSS Structure view
The Structure tool window now works for CSS files as well, providing you the ability to review your CSS structure and quickly navigate to the desired places in code, via synchronization with editor enabled.
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 Ctrl + /, respectively).
Goto declaration
Advanced navigation features like Goto Declaration command (Ctrl + B) can save your time when you need to switch to the underlying code of a selector or ID.
Show Content
This feature is a replacement of the Goto Declaration command when you only need to view the underlying code, without opening it in additional tab. Just press Ctrl + Shift + I and see the details in the popup.