Eclipse HTML: placeholder is not an attribute? - html

I am using the latest version of Eclipse Luna (for Java EE developers), and when I insert an <input type='text' placeholder='test123', eclipse says "Undefined attribute name (placeholder).".
Why is it like that? Have I done something wrong? Is there a way of fixing this?

Add the <!DOCTYPE html> indicating that its HTML5, placeholder is a new element in HTML5 and doesn't exists on HTML4 or early versions
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input placeholder="aspdkpoas"/>
</form>
</body>
</html>

Eclipse checks for html tags and attributes against the doctype. Make sure that you have given doctype on top. It will fix the problem.
Also, Eclipse uses IE internally. You can configure it to firefox/chrome for better tags and attribute comparison.
Refer to this How can I change eclipse's Internal Browser from IE to Firefox on Windows XP? for changing your browser.

Related

input type tag missing in browser when tested through wordpress

I've started coding html in wordpress. I have a html code with label tag and an input tag of type "text". The input field is not getting displayed in browser. The same code works fine in eclipse. What might be the problem. When I save the post as draft the tag disappears. Not able to solve the issue. Kindly help me in this regard.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello testing</title>
</head>
<body>
<div> <label> Name:</label> <input type="text"> </div>
</body>
</html>
Above image is the code run through eclipse
Above one is the image run through wordpress preview
when writing html in the Wordpress editor, you can only use tags that are allowed by Wordpress. Dont think the input tag is one if them.
Look at this:
https://en.support.wordpress.com/code/#html-tags
The "input" tag is not supported by WordPress editor.

Meta name 'mode' in HTML

Revisiting the HTML code I've found interesting tag:
<meta name="mode" content="full" />
Does anynody know what the mode full could stand for?
Rescale to full view on portable devices?
name attribute specifies the name of meta content.
content attribute specifies the list of values that are associate with name attribute.
Check this guide of valid name Meta Documentation
So as per my knowledge is name=mode and content=full is not valid name in HTML. May be this is currently Drafted in upcoming HTML version.
There does not appear to be such value possible.
I tried :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="mode" content="full" />
</head>
<body>
</body>
</html>
into the W3C HTML5 validator and it throws it as an error.
See this for possible values for the <meta> tag.

Why does Chrome Developer Tool add elements not in the file?

When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.

What is the correct way to declare an HTML5 Doctype.

What is the correct way to use start tag when creating with HTML5
IE: HTML 4 Strict is like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The standard has been simplified because the previous doctypes were too cryptic. The new doctype is simply <!DOCTYPE html> . You may wonder why it is not <!DOCTYPE html5> but it is simply because it is just an update to the standard of HTML and not a new version of anything. As you can see below, all elements can now have a language attribute.
The <html> element is the root element of a document. Every document
must begin with this element, and it must contain both the <head> and
<body> elements.
It is considered good practice to specify the primary language of the
document on this element using the lang attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>
Jamie was here.
</p>
</body>
</html>
More info: https://dev.w3.org/html5/html-author/#doctype-declaration
you just use
<!DOCTYPE html>
<html>
</html>
First of all, html5 doctype is not case sensitive.
Either one of these three will work:
1) <!DOCTYPE html>
2) <!DOCTYPE HTML>
3) <!doctype html>
You can check the validity here.
It's as simple as
<!DOCTYPE html>
According to the WWW Consortium, the organization responsible setting current web standards, no one has answered this correctly.
The current standard for language declaration is
Always use a language attribute on the html tag to declare the default
language of the text in the page. When the page contains content in another
language, add a language attribute to an element surrounding that content.
Use the lang attribute for pages served as HTML, and the xml:lang attribute
for pages served as XML. For XHTML 1.x and HTML5 polyglot documents, use both
together.
W3C HTML Language Tag Page
Here is the answer regarding DOCTYPE declaration
Use the following markup as a template to create a new HTML document using a
proper Doctype declaration. See the list below if you wish to use another DTD.
W3C DOCTYPE Standards
<!DOCTYPE html>
<html>
<head>
<title>An HTML standard template</title>
<meta charset="utf-8" />
</head>
<body>
<p>… Your HTML content here …</p>
</body>
</html>
Hope this helps.
You use...
<!DOCTYPE html>
followed by your HTML tag etc..
You only need this:
<!DOCTYPE html>
<html>
...
There are several points here. This is supported by all browsers, even old ones like IE6/IE7. All browsers actually nee "html" part from doctype declaration to jump into standards mode.
<!-- simplified doctype works for all previous versions of HTML as well -->
<!doctype html>
Learning Resource:
http://diveintohtml5.info/
http://www.html5doctor.com
The start tag <html> is optional in HTML5, as in HTML 4.01. If used, it must be the first tag. It has different optional attributes: the global attributes of HTML5, and the special manifest attribute. The most common useful attribute in the <html> tag is the lang attribute.
(The doctype declaration is something quite different, and not a tag at all.)
The clearest most definitive answer of what the standard says seems to be for HTML 5.3 at:
http://w3c.github.io/html/syntax.html#the-doctype
Note especially the list-items 1 and 3 which specify that the doctype-statement is case-insensitive. Also note the number of spaces inside the statement can vary.
And note the clause "A DOCTYPE is a required preamble."

Multiple Html <head> in the browser , caused by DreamWeaver bom

I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}