Home » Enterprise Java » html » Eclipse HTML Editor Tutorial

About Vishal Rajpal

Vishal Rajpal
Vishal enjoys designing and developing small and mid-sized Enterprise solutions in Java and it's ecosystem. He has graduated from RGTU, India in Electronics and Telecommunication Engineering. Currently, Vishal is working with an Analytics organization, enabling the in-house analytics as well as client teams to use technology as a differentiator for projects / problems related to Big Data.

Eclipse HTML Editor Tutorial

In this tutorial, we will learn to use the HTML Editor available through the Web Tools Platform (WTP) within Eclipse.

HTML stands for Hyper Text Markup Language, and is composed of a set of markup tags that form / describe a specific document content containing HTML tags and text. A web browser can read such HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses them to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language rather than a programming language.

The HTML Editor helps ease HTML page development within eclipse.

Validate the editor availability

The first step is to validate whether the HTML editor is available for your Eclipse Installation. If you have already installed Eclipse IDE for Java EE Developers, you may skip this section.

Go to Menu –> Window –> Preferences.

Browse to Web –> HTML Files –> Editor

Verify HTML Editor availability

Verify HTML Editor availability

In case, you do not find Web under Preferences, you will have to install the Web Tools Platform (WTP) in your eclipse. The WTP is available by default for Eclipse 4.3 JEE and above. For versions prior to 4.3, please follow the New Software Installation instructions here.

The update site repository links for webtools for specific eclipse releases can be found here.

Customizing the HTML editor

In the below steps, we will explore the HTML editor default configurations and customizations that can be achieved based on our preferences.

  1. General editor customizations
  2. Here, we can customize the HTML editor for basic formatting of source code within HTML. These include code line width, splitting of attributes, code identation and corresponding size. Moreover, there are also options to add new OR remove default inline elements within HTML.
    The case provider helps differentiate tag names and attributes names for the content assist and code generation.

    As seen in screenshot below, we have added the div tag as an inline element for our own customization.

    HTML Editor - General configurations

    HTML Editor – General configurations

  3. Content Assist
  4. In this section, we can customize the content assist for the HTML editor – auto suggest delay, proposal category for the Ctrl + space command and finally proposal category for cyclic invocation of content assist. The screen allows one to change the priority of proposal of suggestion / content assist when invoked.

    HTML Editor - Content Assist

    HTML Editor – Content Assist

  5. Syntax coloring
  6. Here, we can customize the syntax coloring of HTML code within HTML files.

    HTML Editor - Syntax coloring

    HTML Editor – Syntax coloring

  7. New HTML Templates
  8. Here, we can add new custom Templates as well as modify existing templates to suit our preferences.

    HTML Editor - Available Templates

    HTML Editor – Available Templates

    As part of this tutorial, we will create a new template named “div tag with custom css” as shown below.

    HTML Editor - New Template

    HTML Editor – New Template

  9. Typing (html source)
  10. In this part of the editor customizations, once can edit typing related properties while coding using HTML (within html files).

    HTML Editor - Typing customizations

    HTML Editor – Typing customizations

  11. HTML Validation
  12. Finally, as part of the HTML editor, once can customize and set either of WARNING / ERROR / INFO severity levels for various scenarios of HTML validations.

    HTML Editor - Validation

    HTML Editor – Validation

HTML Editor in Action

After reviewing the editor features and configuration, let us know see the HTML editor in action.

Create a new “Dynamic Web Project”.

Go to Menu –> New –> Dynamic Web Project.
Please select the appropriate webapp archetype in case you are creating a new Maven project.

Once the web project is created, we can now create a new HTML file. Right click on the project context, and click New.
Select HTML file and provide a name to the HTML File – HTMLEditorWelcome.html. Click Next.

In this step, select the desired template to use for the new HTML file. In this tutorial, we will use the already existing HTML 5 template. Click Finish and notice the new HTML file created with the doctype element at the top (for HTML 5).

New HTML page

New HTML page

Once the HTML file is created, use the Ctrl + Space content assist to see the available HTML tags options.

HTML Editor - content assist

HTML Editor – content assist

On hitting Ctrl + Space the second time, the default and any new templates created are available to be inserted within the HTML file. For example, in step above we created the custom div tag as a template and it is available through the content assist and can be inserted within the HTML file.

HTML Editor - content assist - II

HTML Editor – content assist – II

Let us complete our example HTML page by adding some headers and paragraph tags.

New HTML Page

New HTML Page


<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML Editor</title>
	<h1>HTML Editor</h1>
	<p>This is an example about the HTML Editor</p>
	<h2><i>By Java Code Geeks</i></h2>

Add the created HTML file as the welcome page in the web.xml (Deployment descriptor).


 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

	<display-name>HTML Editor Example</display-name>

Right-click and run the application on server.

HTML Editor - Browser Output

HTML Editor – Browser Output

Download the Eclipse Project

This was an example demonstrating use of HTML Editor in eclipse.

You can download the full source code of this example here: HTMLEditorExample.zip

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....


Want to take your Java Skills to the next level?
Grab our programming books for FREE!
  • Save time by leveraging our field-tested solutions to common problems.
  • The books cover a wide range of topics, from JPA and JUnit, to JMeter and Android.
  • Each book comes as a standalone guide (with source code provided), so that you use it as reference.
Last Step ...

Where should we send the free eBooks?

Good Work!
To download the books, please verify your email address by following the instructions found on the email we just sent you.