Is class a legal attribute of the HTML element?
<html class="...">
My Oracle ADF application does this — why?
It is not valid in HTML 4:
<!ENTITY % html.content "HEAD, BODY">
<!ELEMENT HTML O O (%html.content;) -- document root element -->
<!ATTLIST HTML
%i18n; -- lang, dir --
>
It is not valid in XHTML 1.0:
<!ELEMENT html (head, body)>
<!ATTLIST html
%i18n;
id ID #IMPLIED
xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml'
>
It is valid in HTML 5:
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification):
...
class
...
My Oracle ADF application does this - wounder why
Presumably to apply style or JS from a shared external file to specific pages.
There are some great reasons to use a class on the HTML tag.
You can use such css globals to style around different pages, different browsers, etc.
modernizr uses this technique
css_browser_selector.js uses this technique
Richard Pianka discusses how the technique is used in the above css_browser_selector script
Chris Coyier discusses why the technique is useful
Further Reading:
Avoid setting a global class for html
"The class attribute is not valid in: base, head, html, meta, param, script, style, and title".
http://www.w3schools.com/tags/att_standard_class.asp
You can get what you want using this pattern :
<html>
<body class="">
</body>
</html>
or (better, I guess)
<html>
<body>
<div class="">
</div>
</body>
</html>
Related
The Microdata example of Google’s Article Rich Snippet contains this meta element with Schema.org’s mainEntityOfPage property:
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
When checking it with the Nu Html Checker, I get this error:
Element meta is missing required attribute content.
Adding an empty content attribute seems to solve this error. Is it correct to do this?
The Nu Html Checker is correct, Google’s example is invalid. The content attribute is required if the meta element has an itemprop attribute.
From WHATWG HTML and also HTML 5.1 (W3C Working Draft): "If […] itemprop is specified, then the content attribute must also be specified."
From the old Microdata (W3C Note): "If a meta element has an itemprop attribute, […] the content attribute must be present."
Adding an empty content attribute makes it valid, but there are also other options.
Schema.org’s mainEntityOfPage property expects as value either a URL or a CreativeWork item.
Google’s own documentation for the recommended/required properties for their Article Rich Snippet says that they expect a URL value, but their examples show how to create an item value.
All of the following solutions are fine according to the Google Structured Data Testing Tool. (Some examples use the itemid attribute, which is, strictly speaking, not yet allowed/defined for the Schema.org vocabulary.)
If you want to provide a URL value:
<link itemprop="mainEntityOfPage" href="https://example.com/article" />
Straightforward.
This follows Google’s own recommendation, requires minimal markup, and works in the head as well as the body.
If you have a visible link, you can of course also use an a element.
If you want to provide an item value:
As type you can use CreativeWork or any of its subtypes, like WebPage.
div element + url property
<div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage">
<link itemprop="url" href="https://example.com/article" />
</div>
This creates a WebPage item with a url property. It can only be used in the body.
If you have a visible link, you can of course also use an a element.
meta element with empty content attribute and itemid
<meta itemprop="mainEntityOfPage" content="" itemscope itemtype="http://schema.org/WebPage" itemid="https://example.com/article" />
This is based on Google’s example, but with an empty content attribute to make it valid.
Note that Microdata parsers have to ignore the content attribute in that case, because the itemscope attribute is provided (Microdata W3C Note/WHATWG HTML Microdata: "first matching case"). So the itemprop value will be an item, not a string.
This creates an empty item with an identifier. Works in the head as well as the body. It doesn’t allow to add properties directly to this WebPage item (you’d have to create another item with the same itemid value).
div element with itemid
<div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage" itemid="https://example.com/article">
</div>
This creates an empty item with an identifier. Instead of the meta example, it only works in the body, but therefore allows to add additional properties directly to this WebPage item.
If you already have a WebPage item:
If you already provide a WebPage item on your page, e.g.,
<body itemscope itemtype="http://schema.org/WebPage">
<article itemscope itemtype="http://schema.org/Article">
</article>
</body>
you can make use of it via Microdata’s itemref attribute:
<body itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage" id="this-page">
<article itemscope itemtype="http://schema.org/Article" itemref="this-page">
</article>
</body>
combined with one of the methods described above, e.g., with itemid or a url property.
Note that you’d typically use the inverse property mainEntity in such a case, but Google doesn’t document that they’d support it for the Article Rich Snippet, currently.
I'm working on some oracle code to generate an HTML eMail. It's mostly working, but I took the resulting HTML and placed it in Dreamweaver CS6 to use the validation. I get a few errors:
1) No Character encoding declared at document level [HTML 4.01]
2) element "U" undefined [HTML 4.01]
The html code is generated automatically by a rich text editor widget. Should I use something other than HTML 4.01? I'm not too savvy with HTML Header code.
Here's the HTML code that is generated from my test.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saint Susanna Parish Mailing</title>
</head>
<body>
<p>This is normal text</p>
<p>
<strong>This is bold</strong>
</p>
<p>
<u>This is Underscored</u>
</p>
<ol>
<li>
<span style="color:#ff0000;">This is numbered</span>
</li>
</ol>
<ul>
<li>This is bulleted</li>
</ul>
<p style="text-align: center;">This is centered</p>
<p>
<span style="font-size:18px;"><span style="font-family: times new roman,times,serif;">This is a new font</span></span>
</p>
<p style="text-align: right;">This is right justified</p>
<p> </p>
</body>
</html>
Thanks for looking at this.
I think the encoding can -and must- be specified in the mail headers, so I would ignore that warning.
The article The Importance of Content-Type Character Encoding in HTML Emails says:
[The client] will display the email based on what Content-Type has been set.
However, email clients read the Content-Type value that is set in the
email header and they completely ignore the META tag that is within
the HTML.
So that suggests that you should add the proper header, and can safely ignore the validator's warning, although it can't hurt at all to add the meta tag as well.
If you want a second opinion, you can try the W3C Markup Validation Service, although that one might also complain about missing content types. After all, these validators don't know what headers you are going to supply.
Different rules apply to HTML mail anyway. Clients ignore basically everything that is outside of the body. They also filter out all kinds of attributes, won't allow JavaScript and fully ignore external stylesheets and inline style tags.
The <u> tag was deprecated in HTML 4.01 but not obsolete. In that case the validator seems to be wrong, so I would ignore that warning as well. I wouldn't underline text at all though, because obviously that text could easily be mistaken for a link. If you need to, and you don't want to use <u>, you can use an inline text-decoration style.
Some suggestions:
U can do a lot of control by using classes etc - declared in a style.css file that u call first as well.
<!DOCTYPE HTML> - HTML 5
<b> and </b> can replace strong to save characters
<link rel="stylesheet" type="text/css" href="../style.css" title="Standard Style">
I am learning about AngularJS and see it adds some of its own attributes that nor start with data neither are standard html tags attributes, like this:
<html ng-app>
or this:
<body ng-controller="PhoneListCtrl">
Where from do these ng-* attributes come and is that a valid HTML? Where can I read more about this?
Strictly speaking these extra attributes are not defined in the HTML specifications thus, are not valid HTML. You could say that AngularJS provides and parses a superset of the HTML specification.
However, as of v1.0.0rc1, you could use data-* attributes, for example <html data-ng-app> which, I believe, are valid HTML5. Source.
There is a guide to the AngularJS Compiler that contains some more information on the process. In short; the AngularJS compiler reads your HTML page, using these attributes to guide it as it edits and updates your page, after loading, via javascript and the HTML DOM.
From the docs: http://docs.angularjs.org/guide/directive
<!doctype html>
<html data-ng-app>
<head>
<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-ng-controller="Ctrl1">
These are all valid directive declarations:<br/>
<input ng-model='name'> <hr/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
</div>
</body>
</html>
I like the data-*whatever* declaration the best as it's HTML5 compliant.
So for any of my Angular declaration (e.g. ng-controller, ng-app, ng-repeat etc) or custom directives I'll always prefix them with data-.
Where from do these ng-* attributes come
From main ng module. Source code.
is that a valid HTML?
No. But attribute-style directives can be prefixed with x-, or data- to make it HTML validator compliant. See direcives documentation.
Another option is to ignore undefined attribute names. If you are using Eclipse, you can set this by going to project properties>>validation>>html syntax>>attributes>>ignore undefined attribute names.
I would like to go to the DIV of a particular page from a different page. Is that possible?
I tried Hello
but it just goes to file.html#home
thanks
C.
I have in my file.html but it keeps getting redirected to file.html#home instead.
file.html will need an element with an id="product" attribute. name is deprecated for <a> tags and shouldn't be used.
<div id="product"></div>
With HTML 5, you need to simply add an id attribute to your <div> with a value of product. This needs to be a unique id attribute within the page (for all elements):
<div id="product">
See the working draft.
In HTML 4.01 you need to use an anchor tag with a name just above your target div, or any other element with an id attribute in the other page:
<a name="product"></a>
<div>...
See the HTML 4.01 spec.
Note: The name attribute has been deprecated in the XHTML 1.0 spec.
So, this would be a better option, as it would work for HTML 4.01, XHTML 1.0 and HTML 5:
<div id="product">
Don't use an anchor. That is outdated. Just give the DIV the id product:
<div id="product">...</div>
Visual Studio doesn't like on-page anchor tags:
Validation (XHTML 1.0 Transitional):
Attribute 'name' is considered
outdated. A newer construct is
recommended.
I'm using name attributes in this way…
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
...
<body>
...
<p>On this page…</p>
<ul>
<li>Section One</li>
...
</ul>
...
<h2><a name="one">Section One</a></h2>
...
</body>
</html>
Is there really a more-modern way of doing this? Or is Visual Studio full of crap?
You should use the id attribute instead. Works the same way, and you don't need an artifical <a name=...>, but simply
<h2 id="one">Section One</h2>
name attributes are deprecated in XHTML 1.0 - you can use an id attribute in the same way though, see Fragment Identifiers in the HTML Compatibility Guidelines of the XHTML spec.
So you can simply use
<h2><a id="one">Section One</a></h2>
But note that the 1.0 spec recommends playing it safe with something like this:
<h2><a name="one" id="one">Section One</a></h2>
However, your fragment uses XHTML 1.1, where the name attribute has been entirely removed from a and map elements - so you can only use an id.
I believe the modern approach is to use the id attribute, which would be evaluated as an anchor. For example, if you changed
<h2><a name="one">Section One</a></h2>
to
<h2><a id="one">Section One</a></h2>
You would still address it as page.html#one.
You can also link on a section header :
Table of Contents
<P>
Introduction<BR>
Some background<BR>
On a more personal note<BR>
...the rest of the table of contents...
...the document body...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...section 2...
<H3 id="section2.1">On a more personal note</H3>
...section 2.1...
[...]
</P>
Source: http://www.w3.org/TR/REC-html40/struct/links.html
I believe the proper way to do it is <a id="one">
Yes it is outdated. You should replace with the "id" attribute.
Quoting w3schools page:
"The id Attribute Replaces The name Attribute
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead."
http://www.w3schools.com/Xhtml/xhtml_syntax.asp
name= attributes are for labeling elements in a form, and can only be used on <form> elements (input, textarea, select etc). For everything else, ID= is used. Exactly why the W3C folks thought two different ways of naming an element (with different sets of allowable characters) were needed is not readily known.
But here http://www.w3.org/TR/html4/struct/links.html#h-12.2.3 I read this: "Some older user agents don't support anchors created with the id attribute." So?
Until <a name="..."></a> is no longer supported by the (X)HTML standard you are using--and not just deprecated--it may be safest to use both name and id on anchors linking to a part of the same page. From the W3C's XHTML 1 spec:
In XML, URI-references RFC2396 that end with fragment
identifiers of the form "#foo" do not refer to elements with an attribute name="foo"; rather,
they refer to elements with an attribute defined to be of type ID, e.g., the id attribute in HTML
4. Many existing HTML clients don't support the use of ID-type attributes in this way, so identical
values may be supplied for both of these attributes to ensure maximum forward and backward
compatibility (e.g., <a id="foo" name="foo">...</a>).