Are we allowed to extend HTML5 with new tags like <foo:bar> in HTML5?
I ask because the Facebook API includes just this kind of thing**, and our pages are defined as HTML5.
More specifically, is it possible to make a HTML5-conformant page that uses fb:fbml?
Strictly speaking, no. You can have JavaScript code write the FBML which gets around any potential validation issues, but it's bad form.
That aside, even if you could, you don't want to make a page that uses FBML. FBML will be deprecated on Jan 1, 2012 and after June 1, 2012 FBML will no longer work.
Source: https://developers.facebook.com/docs/reference/fbml/
No you are not allowed to create your own tags in HTML5, this could result in conflicts and defeats the purpose of having a standard.
Per W3 you can add an xml mime type of application/xhtml+xml if you would like to serve up xhtml5. Facebook is serving up XHTML and this is why they can use custom namespaces.
http://www.w3.org/TR/html5-diff/#syntax
So, yes would be valid XHTML5 but not HTML5.
More discussions on SO:
Facebook Connect and HTML5, xmlns available?
Use XHTML(5). XML allows namespaces, and XHTML(5) is an extension of XML, so therefore, it allows namespaces, while HTML(5) does not.
As Jeff Sherlock said, you don't want to use FBML anymore as it will be deprecated. Pages now use Apps, which you can have linked to a website. So now you just create a page on your website (width 520px or less), and attach the page to your app. You can just Javascript, HTML, CSS, jQuery, etc. - just about anything, including HTML5. Much easier to create tabs and all sorts of things on FB now.
You can create your own elements; you do it the same way that Facebook does. Create your own doctype with a custom namespace, but you won't be outputting HTML5, you'll be outputting XHTML5. Plus, I'd follow the other gents recommendations about straying from the standards... Friends don't let friends.
Related
I have a generic question about HTML5. I'm interviewing at the moment some front-end developers and all of them claim that they use HTML5. However I don't see any of them using any HTML5 specific semantic elements. There's no header, sections, footer, article etc.
Does this qualify as HTML5 then?
Can anyone help / explain? Thanks!
Just like it's not required to use a table tag in HTML4, you don't have to use the new semantic tags in order to create a valid HTML5 document. If it has a HTML5 doctype at the top, and validates, it's HTML5.
That said, if an interview candidate had HTML5 on their CV and then didn't use semantic tags when given a good opportunity to demonstrate their knowledge, I'd start asking questions. Semantic tags are one of the many important benefits that HTML5 brings, and to just ignore them perhaps shows the candidate was more keen to put buzzwords on their resume than actually learn useful technologies.
Although we are not using any html elements like headers, sections, articles, footers etc.
The document will be referred as HTML5 unless and until you specify the doctype for it as
<!DOCTYPE html>
The browser will expect it as HTML5 document only. It doesn't throw any error for expecting html5 tags.
You can refer to w3org link for more details.
Any one of the tags? For elements you have named it is possible to make a valid HTML5 web page without using any of them. In fact using them makes things harder because there are lots of rules regarding using header and footer for example in a web page in order to be valid. But not using them when there's a good reason to include them in a page usually means the candidate has some problem with HTML5.
Take a look at http://www.w3.org/TR/html5/sections.html#the-header-element W3 page for more information
From a developer's point of view:
HTML5 does not consist of semantic tags, but semantic tags are the new way to go in developing HTML5. Still HTML5 is an upgraded form of HTML4. It differs in many ways or in less ways then expected. There are some differences that you look for like (again) semantic header, section, footer tags or self closing tags like which in html5 can be (although it validates both ways).
Main point is if it has <!doctype html> or the xhtml version <?xml version="1.0" encoding="UTF-8"?> at the top of the file and if it validates I'dd consider it html5.
You can also read all the differences on w3.org which might give you a better understanding of what to expect.
Everyone is now talking about HTML5, i dont really understand what is the difference between it and the normal .xhtml
could you please solve some of my doubts:
What are the differences?
What are the advantages and disadvantages?
Is HTML5 considered a markup language or an scripting language?
What are the differences?
HTML 5 is just the next version of HTML. It takes HTML 4 and adds more stuff to it (while throwing out a few bits that shouldn't be used and changes the rules on how to parse it (to what browsers have been doing for the last decade anyway)).
What are the advantages and disadvantages?
It lets you do more stuff.
It doesn't have any disadvantages (other than that the new stuff isn't well supported yet).
Is HTML5 considered a markup language or an scripting language?
It is a markup language with a bunch of DOM APIs.
I guess the confusion is that HTML4 and HTML5 don't do much (on their own). You need javascript and css and that is when the party really starts.
When people are talking about HTML5 I guess they are talking about HTML5+ CSS3 + Javascript (compared to HTML4 + CSS2 + Javascript).
For a good example of the adventures you can have in the new world check this out:
http://slides.html5rocks.com/
Remember this isn't using .NET or PHP or any thing, its "just" HTML5 + javascript + css
pro
fancy new options
more elements to better define your content
video without flash
con
not supported by all browsers
Not a lot of good quality docs available (yet)
And it is still a markup language as it has no dynamic elements in it that are scriptable.
basically html5 is just like html, with some extra tags added,
like the canvas element for drawing, the video and audio elements for media playback, some new content specific elements, like article, footer, header, nav, section. it has also better support for local offline storage. and also some new form controls, like calendar, date, time, email, url and search
So actually not much you couldn't do earlier with some JavaScript (or jquery, as some people like to call it now :p), but it's designed to make those (nowadays) common tasks a lot easier
What are the differences?
See HTML5 differences from HTML4
What are the advantages and disadvantages?
That's going to depend to a certain extent on what you're trying to achieve, but it might help to understand the rationale behind the spec. Basically, backwards compatibility is one of the main goals so, if you avoid using any of the new features like video or canvas, there should be no disadvantages over the previous standards.
Is HTML5 considered a markup language or an scripting language?
From the WHATWG FAQ:
HTML5 is a new version of HTML4,
XHTML1, and DOM Level 2 HTML
addressing many of the issues of those
specifications while at the same time
enhancing (X)HTML to more adequately
address Web applications. Besides
defining a markup language that can be
written in both HTML and XML (XHTML)
it also defines many APIs that form
the basis of the Web architecture.
Some of these APIs were known as "DOM
Level 0" and were never documented
before. Yet they are extremely
important for browser vendors to
support existing Web content and for
authors to be able to build Web
applications.
Is there any way (server- or client-side) that I can actually extend HTML to include new tags? For example, it would be cool if I could write something like a schema fragment that defined a blogpost, which contains a postname, a postauthor, a posttime, and a postcontent, and thereafter refer to blogpost in my HTML rather than resorting to the basic HTML div and p tags.
Sounds like HTML5 is right up your alley!
You can use elements like section to wrap up all your posts, and article for each post, plus basics like header, nav, and footer. There isn't fine grained elements like postauthor or posttime but you can provide other attributes to help define these.
Hmm, seems I spoke to soon, you can use this too:
<time pubdate datetime="2010-11-13T20:00+09:00">Posted Nov 13.</time>
That would be awesome. Here is an article explaining why it won't work. Basically, you can extend the markup. But HTML browsers won't know how to interpret your new tags.
For the general web developer, no. You'd need to write your own DTD to have your own tags, and even then, it really will not benefit you semantically for anything other than your own sanity.
Also, some browsers ahem IE will not know how to handle your custom tags, and you'll have to resort to JavaScript to teach it. Not really recommended...
While the browser won't readily understand extensions based on the XML-derived extensibility, that doesn't mean people aren't working on this problem.
HTML5 additions like <section> aside, the best solution for what you're trying to do is probably microformats. In the case of your blog example, hAtom.
Then you get something that browsers understand, but can be progressively enhanced as more systems support hAtom and you can style entries using class references like .hentry, .entry-title, and .author.
You can add custom tags to the DOM tree. You won't get valid XHTML, but browsers will understand those tags as long as you style them correctly.
A very interesting project making use of this browser behavior is WebODF, a tool for bringing ODF documents to the browser. Check out the video on the site and the live demo to get some understanding how this works.
You can add custom tags by mixing XHTML with your custom language. The language is no longer XHTML but a compound language including XHTML, but that was always the intent of XHTML anyway.
You will, however need to use XHTML properly, and serve it with an XML mime type, such as application/xhtml+xml, which means no IE support before IE9.
You can see an example using blogpost, postname, postauthor etc here:
http://www.alohci.net/application/xhtml+xml/custom1.xhtml.ashx
(Works in Firefox, Chrome, Safari, Opera and IE9)
[Of course, you can just put invalid tags into HTML and style them, but to me, that doesn't seem to me to be the point of question, which was specifically about the extensibility nature of XHTML.]
If there is no DTD or schema to validate the H5 document against, how are we supposed to do document validation? And by document validation, I mean "how are we supposed to ensure our html5 documents are both syntactically accurate and structurally sound?" Please help! This is going to become a huge problem for our industry if we have no way to accurately validate HTML5 documents!
Sure, the W3C has an online tool that validates individual pages. But, if I'm creating A LOT of pages (hundreds, say) and I want to validate them in a sort of batch mode, what is the accepted method of ensuring valid structure and syntax? I mean, it seems rather rudimentary to just look at the document and say "yep. that's a valid xml document." What about custom tags? What about tag attributes? It seems like the W3C is leaving us out in the cold a little bit here.
Maybe the best answer will be found in the HTML editor. But then you get DTD/schema fragmentation. Each editor vendor coming up with their own rendition of what a valid structure is.
Maybe the answer is "wait for HTML5 to become official". But I really can't wait for that. I need to start creating and validating content now. I have applications I want to publish that can only be accomplished with html5.
So, any thoughts?
If there is no DTD or schema to validate the H5 document against, how are we supposed to do document validation?
With a specialized HTML5 validator rather then a generic SGML or XML validator.
Obviously, as the specification is still in draft form, the tools that do exist are immature and likely to be out of date or become out of date.
Sure, the W3C has an online tool that validates individual pages. But, if I'm creating A LOT of pages (hundreds, say) and I want to validate them in a sort of batch mode, what is the accepted method of ensuring valid structure and syntax?
Either use a different tool or download the W3C validator and run a local copy. It has a SOAP API so writing a batch validation tool isn't difficult.
What about custom tags?
HTML5 doesn't allow custom elements.
What about tag attributes?
The only custom attributes in HTML5 are data-* attributes, so an HTML 5 validator can recognize them.
It seems like the W3C is leaving us out in the cold a little bit here.
It seems like you expect the state of QA tools for HTML 5 (unfinished) to be up to the same standard as those for HTML 4 (over a decade old). This isn't a realistic expectation.
Maybe the best answer will be found in the HTML editor. But then you get DTD/schema fragmentation. Each editor vendor coming up with their own rendition of what a valid structure is.
The specification is clear (although in flux) even if it isn't expressed in the form of a DTD or schema. If each editor has a different idea of what is valid, then most or all of them are going to be either out of date or just buggy.
Maybe the answer is "wait for HTML5 to become official". But I really can't wait for that. I need to start creating and validating content now. I have applications I want to publish that can only be accomplished with html5.
If you need to live in the bleeding edge, then you have to accept the limitations and risks of doing so.
You might find this question/answer interesting: Will HTML 5 validation be worth the candle? . The answer is written by the developer of http://about.validator.nu/ .
You should start by taking a look at http://about.validator.nu/ .
Some, though not all, of your concerns are addressed there. You can host your own validator, there's a python based submission script, you can use a RESTFUL web service API and there are ways to get validation output in a variety of different forms.
I can't however see a simple way to integrate XHTML5 with other applications of XML such that one can easily create a validator of such compound documents. Not that there's really been a way to do that with earlier versions of XHTML either though.
This is working well for me: https://github.com/hober/html5-el
To get this to work, I renamed the default '/etc/schema/schemas.xml' file in order to move it out of the way and let the 'html5-el' one be used by nxml-mode.
If there is no DTD or schema to validate the H5 document against, how are we supposed to do document validation? And by document validation, I mean "how are we supposed to ensure our html5 documents are both syntactically accurate and structurally sound?" Please help! This is going to become a huge problem for our industry if we have no way to accurately validate HTML5 documents!
If testing pages with either Firefox or Opera, both of those will report errors such as code that is not "well-formed" and mismatched tags. Beyond that, one of the validators such as validator.w3.org or validator.nu will definitely help.
Sure, the W3C has an online tool that validates individual pages. But, if I'm creating A LOT of pages (hundreds, say) and I want to validate them in a sort of batch mode, what is the accepted method of ensuring valid structure and syntax? I mean, it seems rather rudimentary to just look at the document and say "yep. that's a valid xml document."
There are ways to run the W3C validator in batch mode.
What about custom tags? What about tag attributes? It seems like the W3C is leaving us out in the cold a little bit here.
The easy answer to that one is that "custom tags" are simply not considered valid. The Working Group has thoroughly addressed the issue of "distributed extensibility", particularly with respect to allowing "decentralized
parties to create their own languages" and "extension attributes" (http:// lists.w3.org/Archives/Public/public-html/2011Feb/0085.html). There are numerous ways to extend HTML (http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#extensibility) but adding custom tags is not one of them. Custom data and microdata attributes should validate fine.
Maybe the answer is "wait for HTML5 to become official". But I really can't wait for that. I need to start creating and validating content now. I have applications I want to publish that can only be accomplished with html5.
Since HTML 5 was stabilized at the end of last year (Dec. 2010), IMO we don't need to wait for it to become an official "recommendation" by the W3C. The stabilized spec provides a solid base that all browser vendors can implement consistently and for the ongoing evolution beyond HTML 5 of the spec, which is now being called the "HTML Living Standard" (Jan. 2011 and later). There is a good diagram of this at http://www.HTML-5.com/html-versions-and-history.html#html-versions (scroll down to see the diagram).
What are the key differences between HTML4 and HTML5 draft?
Please keep the answers related to changed syntax and added/removed html elements.
HTML5 has several goals which differentiate it from HTML4.
Consistency in Handling Malformed Documents
The primary one is consistent, defined error handling. As you know, HTML purposely supports 'tag soup', or the ability to write malformed code and have it corrected into a valid document. The problem is that the rules for doing this aren't written down anywhere. When a new browser vendor wants to enter the market, they just have to test malformed documents in various browsers (especially IE) and reverse-engineer their error handling. If they don't, then many pages won't display correctly (estimates place roughly 90% of pages on the net as being at least somewhat malformed).
So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this.
Better Web Application Features
The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and Javascript. Many elements have been added directly to the language that are currently (in HTML4) Flash or JS-based hacks, such as <canvas>, <video>, and <audio>. Useful things such as Local Storage (a js-accessible browser-built-in key-value database, for storing information beyond what cookies can hold), new input types such as date for which the browser can expose easy user interface (so that we don't have to use our js-based calendar date-pickers), and browser-supported form validation will make developing web applications much simpler for the developers, and make them much faster for the users (since many things will be supported natively, rather than hacked in via javascript).
Improved Element Semantics
There are many other smaller efforts taking place in HTML5, such as better-defined semantic roles for existing elements (<strong> and <em> now actually mean something different, and even <b> and <i> have vague semantics that should work well when parsing legacy documents) and adding new elements with useful semantics - <article>, <section>, <header>, <aside>, and <nav> should replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read. No more painful scanning to see just what that random </div> is closing - instead you'll have an obvious </header>, or </article>, making the structure of your document much more intuitive.
From Wikipedia:
New parsing rules oriented towards flexible parsing and compatibility
New elements – section, video, progress, nav, meter, time, aside, canvas
New input attributes – dates and times, email, url
New attributes – ping, charset, async
Global attributes (that can be applied for every element) – id, tabindex, repeat
Deprecated elements dropped – center, font, strike
HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:
An API for playing of video and audio which can be used with the new video and audio elements.
An API that enables offline Web applications.
An API that allows a Web application to register itself for certain protocols or media types.
An editing API in combination with a new global contenteditable attribute.
A drag & drop API in combination with a draggable attribute.
An API that exposes the history and allows pages to add to it to prevent breaking the back button.
You'll want to check HTML5 Differences from HTML4: W3C Working Group Note 9 December 2014 for the complete differences. There are many new elements and element attributes. Some elements were removed and others have different semantic value than before.
There are also APIs defined, such as the use of canvas, to help build the next generation of web apps and make sure implementations are standardized.
You might be interested in this list of HTML5 elements and attributes.
Also, please note that it's "HTML 4", not "HTML4". Indeed, for HTML 5, both variants are used, but there is an important difference in meaning. HTML 5 refers to the name of the W3C specification, whereas "HTML5" is the document type of those HTML files with a text/html MIME type that follow this spec.
The same goes for XHTML 5 vs. XHTML5.
Now W3c provides an official difference on their site:
http://www.w3.org/TR/html5-diff/
HTML 5 invites you give add a lot of semantic value to your code. What's more, there are natives solution to embed multimedia content.
The rest is important, but it's more technical sugar that will save you from doing the same stuff with a client programming language.
In short it is much simple compared to html, the long doctype is removed and also center and font tag is removed.
I also answered this difference in my blog :
http://ravisinghblog.in/key-difference-between-html-and-html-5/