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
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.
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.
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...
Whenever you see a bulb, hit Alt+Enter⌥Enter to see what IDE suggests
Check for correct image size with 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:
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:
Just press Ctrl+Space⌃Space, and the IDE will suggest all possible autocompletion options.
HAML Support
Syntax highlighting and auto-indenting.
Navigation
Fast HTML/XHTML navigation
The active breadcrumbs bar allows you to fast navigate your code, displaying your way through the nodes hierarchy:
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+[⌘[).
HTML tag tree highlighting makes it easier to work with large and complex HTML files, with a deeply nested tags structure:
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).
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.
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
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 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
- 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.
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:
when invoked on an image file reference, you will see an image preview.
This works both in code and in completions lists.
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.
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.
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>