61

I use Eclipse and I write jsp files with HTML5 content. So I have for example this line:

<div class="test" data-role="test123">

In Eclipse I get the warning:

Undefined attribute name (data-role)

What needed to be done so these warnings won't appear anymore? In HTML5 this attribute is allowed (data-*) as you can see here: http://ejohn.org/blog/html-5-data-attributes/

Anton Menshov
  • 2,266
  • 14
  • 34
  • 55
Tim
  • 13,228
  • 36
  • 108
  • 159
  • Does Eclipse support HTML5 ? I'm using the last NetBeans .. and it doesn't support it yet.. – sdadffdfd Nov 16 '10 at 12:14
  • It should. See: https://bugs.eclipse.org/bugs/show_bug.cgi?id=292415 @OP Is your Eclipse/WTP etc. up to date? – Jules Nov 16 '10 at 12:36
  • I am using Eclipse 3.5.2. / WTP 3.1.1. which is bundled with Spring. So an update to 3.6.1. will remove these warnings? – Tim Nov 16 '10 at 13:10
  • Can't promise, have never tried. I suggest you install the Eclipse WTP Helios package separately and test it out (should be quick). If it works you can upgrade your production environment. – Jules Nov 16 '10 at 14:39
  • Well, Eclipse doesn't require any installation. You basically just extract the archive to a different location and run the executable there :) You can then point to the same workspace (or copy your workspace beforehand) to test your file in question. – Jules Nov 17 '10 at 12:19
  • 2
    You also want to be sure to have the correct DOCTYPE declared at the top of the file. – nitind Oct 10 '11 at 23:46
  • 6
    Eclipse still (4.2.2) incorrectly warns about the 'role' attribute of html5 code. – Tom Mar 03 '14 at 21:30

7 Answers7

37

It seems like Eclipse still has some problems validating HTML5 elements and attributes even now.

I'm running Mars 4.5.1 and I have had warnings about the <main> element, despite the fact that there are no warnings about the <section> element.

But there is a solution!

Window > Preferences > Web > HTML Files > Validation

Window > Preferences > Web > HTML Files > Validation

Here you can tick the Ignore specified element names in validation checkbox and enter the names of any elements which Eclipse is incorrectly warning you about.

In your case, you will want to tick the Ignore specified attribute names in validation checkbox and enter the data-role attribute.

After you click 'Apply', Eclipse will ask you to do a full validation of the project. Select 'Yes' and the changes will take effect.

No more squiggly yellow lines YAY! :D

Redtama
  • 1,603
  • 1
  • 18
  • 35
  • 3
    Though I do want a validation of my file. I want eclipse to warn me, so I want it to know it's part of the HTML5 spec. I'm sure in 2016 there is a way for Eclipse to learn HTML5. – Fla Nov 17 '16 at 11:05
  • 1
    I am using `Eclipse for PHP Developers Version: Neon.3 Release (4.6.3) Build id: 20170314-1500` with 10 plugins, installed on `Microsoft Windows Creators' Update [Version 10.0.15063]`. My HTML5 element is ` –  Jun 02 '17 at 16:59
  • Hi in my eclipse mars 2 i am not able see these options. can you please suggest some other methods ?? – Pranav MS Mar 19 '18 at 05:14
  • Reading this answer I realized the question was not about fixing eclipse but about not to see the errors... :-( – Asqiir Jun 23 '18 at 17:29
  • This is not really a fix for me. When I tell eclipse to ignore
    , it still complains about invalid attributes "role" and "class" inside
    . I don't want to disable validation of frequently used attributes such as "class". If there was a way to specify attributes only when appearing in certain tags, I would use it.
     – hooch May 10 '19 at 08:21
23

Your doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd">

is for HTML 4.01.

data-* attributes were added in HTML 5. The doctype for HTML 5 is basically either

<!DOCTYPE html SYSTEM "about:legacy-compat">

or

<!DOCTYPE html>
Stephen P
  • 14,422
  • 2
  • 43
  • 67
MS Ibrahim
  • 1,789
  • 1
  • 16
  • 28
9

Newer versions of Eclipse support HTML5 tags and the data-* attributes allowed in HTML5. However, when using the role attribute the proper syntax according to the ARIA Roles Model and XHTML Role Attribute Module is not to prefix the role attribute with data-* leaving just role and not data-role.

So <ul role="menubar"> is more correct than <ul data-role="menubar">. The validity of the syntax can be checked using the (X)HTML5 Validator. jQuery Mobile uses quite extensively the data-role attribute, though I'm not sure why.

Note: If you upgrade and you're still getting warnings on data-* attributes you may want to consider updating or removing any installed syntax-checkers such as JTidy. As of Indigo Service Release 1 the role attribute continues to trigger an undefined attribute warning in Eclipse by default.

vhs
  • 9,316
  • 3
  • 66
  • 70
  • 2
    I can’t support the statement that *"Newer versions of Eclipse support HTML5 tags"*. I get stuff like `Unknown tag (main)` with a fresh installation. – kleinfreund Apr 11 '17 at 15:28
  • I haven't used Eclipse in a few years @kleinfreund, but perhaps this post I wrote around the time I gave this answer will still help you: https://habd.as/get-sideways-with-html5-in-eclipse/ – vhs Apr 12 '17 at 11:37
4

I used this one with Aptana 3.6 when I'am coding AngularJS

Window > Preferences

Choose Ignore Proprietary Attributes

vanduc1102
  • 5,769
  • 1
  • 46
  • 43
3

I use the Aptana Studio plugin on Mac OS X; if I go Eclipse > Preferences > Aptana Studio > Validation > HTML, and create the filter *data-role* I no longer get this warning.

I believe on Windows it is Window > Preferences > Aptana Studio > Validation > HTML

Aptana HTML Validation

TMB
  • 4,683
  • 4
  • 25
  • 44
2

Eclipse 3.6 introduced a new field under:

Validation -> HTML Syntax: Ignore specified attribute names in validation

Add the OpenGraph, RDFa or other non-HTML5 attributes you want the validator to ignore:

Ignore specified attribute names in validation

You will need to re-validate the project, then the warnings will be gone.

Parker
  • 7,244
  • 12
  • 70
  • 92
1

Eclipse observes the DOCTYPE declaration. In my case, the solution was using the code above at the first line of the files containing HTML code:

<!DOCTYPE html>

Related to that, there's this other question, already answered:

Why do we need DOCTYPE to the HTML/JSP pages?

Thiago Muniz
  • 27
  • 3