I'm experimenting with custom tag in html 5.
I tried the following:
<my-script src='script.js' />
this is inside the 'head' tag in the source code - but the browser (FF \ chrome) renders it inside the body. Also, it is rendered with an extra 'closing' tag:
<my-script src='script.js'> </my-script>
And, all the content of the 'body' tag gets nested inside this custom tag (the browser is wrapping the content of 'body' with my custom tag).
I tried using a custom DTD, but just can't get it to work...any ideas anyone ?
Browsers treat a tag like <my-script src='script.js' /> as the start tag of an unknown element (except if the page is served with an XML content type). Since such a tag is not allowed within head, it implicitly closes the head element and starts the body element.
DTDs have nothing to do with this, since browsers don’t even read DTDs (and there is no DTD for HTML5, and it is impossible to write a DTD that matches HTML5 syntax rules).
So, in effect, you cannot use a custom element inside the head element. If you wish to use a custom element with no content, put it inside the body element and write it with the end tag spelled out: <my-script src='script.js'></my-script>. That way, it will not affect the display or the parsing of the page, and will have no effect except via client-side scripting that accesses it via the DOM.
Related
I had a confusion, i gone through a page coding which written in jsp embedded the html, my task is to alter some HTML stuff.
In that i found there is end tag </html> but developer doesn't start the <head>.
But the page is working without any issues.
What i need to clarify is, is this type of approach always work? or is there any chances of issue occurrence?
Because i have to add coding to support the IE9 and coding regarding to implement the bootstrap
Correction, in HTML5, you don't need a <head /> but you do need a <title /> unless this HTML is for an iframe or something like an email:
If the document is an iframe srcdoc document or if title information
is available from a higher-level protocol: Zero or more elements of
metadata content, of which no more than one is a title element and no
more than one is a base element. Otherwise: One or more elements of
metadata content, of which exactly one is a title element and no more
than one is a base element.
So it's not valid HTML, but browsers, for better or worse, let developers get away with a lot of crap. If you're supporting legacy browsers, things might get weird if you omit the head.
So both of the following are considered valid HTML5 documents.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
</html>
<!-- Valid HTML5, but not valid HTML4 -->
<!DOCTYPE html>
<html>
<title>Title</title>
</html>
You can check this with the W3C's Markup Validator.
Here are the full specs about the omissions in HTML5:
An html element's start tag may be omitted if the first thing inside the html element is not a comment.
An html element's end tag may be omitted if the html element is not immediately followed by a comment.
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character
or a comment, except if the first thing inside the body element is a
script or style element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
I've been reading the W3C draft http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element and it says:
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
First of all I must admit I've googled but I can't really understand this sentence fully, I'll analize how I see it:
You CAN omit the tag WHEN: it's empty, the first thing is NOT a space character or a comment. Then EXCEPT? So this also means when it is NOT meta, link, script, style or template aswell? Or it's alright if it's one of those tags? I jus't don't understand how the except is meant here, and that's why I went to the second step: trying to achieve an error in verification.
Based on the W3C draft about head, body and html, the smallest verified page is this:
<!DOCTYPE html>
<title>Title</title>
But if I added a comment after the <title> it goes inside the <head> according to Chrome automatic filling which still validates the page.
So now I'm wondering, after I've tried several times, is it impossible to get a page which is not validated while omitting the tags because of the browser assumptions?
I know it's probably useless to wonder this stuff as I won't be omitting the tags anyways but I'm just wondering first of all what that except means (which is only present in the body omitting description, because in head and html it doesn't say). Then I'm wondering if it's true that I cannot get a not validated page by omitting tags due to the automatic assumptions.
It's like this. A comment node can go inside the body element or outside it, as a direct child of the html element or a direct child of the head element. All are valid.
So suppose you wanted a comment to go as the first child of the body element. If you include the body start tag, you can write the comment immediately following that and everything is peachy.
But if you omit the body start tag, how do you get the comment to be the first child of the body element? You can't do it in mark-up, because the comment will go into the DOM as a direct child of either the html element or the head element. Hence, in this scenario, you can't omit the body start tag.
So it's not a matter of validity. Your mark-up is valid either way. It's just that you can't achieve the DOM structure you desire.
The other exceptions are analogous.
Another way of looking at it: It's normal for web authors to think about writing a web page in HTML mark-up and expect to to be parsed into a DOM. Here, the description is really about the opposite process, starting with a DOM and serializing it to HTML mark-up. Now suppose you are writing a serializer. You serializer encounters a body element and it wants to decide whether it can omit the body start tag. So it looks at the first child. If it's a meta element, a link element, a script element, etc., it knows that it must write out the body tag, because if it doesn't, when the HTML mark-up is re-parsed, that element will be added as a child of the head element, and not the body element where it began. That means that CSS selectors such as body meta might stop matching, and JavaScript that was searching for elements inside body would no longer find the element, when they did before the serialize/parse cycle.
I've tried every possible combination right now. Theoretically, it can be placed anywhere within the <body>, <head> and even inside <table> or <select> elements, but if I place a simple <template></template> tag pair without anything else inside, the W3C validator (the tool I base all my HTML5 and CSS3 validation on) gives me the finger.
Can someone give me a rough example of where does the <template> tag goes in practical reality? I find no solution (or maybe the W3C validator doesn't validate the <template> tag correctly yet, don't know...).
The <template> tag currently has the status of an editors draft. That means it is not part of the W3C standard yet, so the W3C validator doesn't recognize it. The current draft says:
The <template> element can be placed anywhere within the <head>,
<body>, and <frameset> elements, and its contents can contain any
content which could otherwise occur at any location within the <head>,
<body>, and <frameset> elements.
So unless the draft changes in the future, you can place templates wherever you want in your code.
Keep in mind that using features which are still in draft state is dangerous. Before it is an official standard which is supported by all browsers, I would recommend you to use <div style="display:none"> instead of <template>.
What is the difference between an HTML Element and an HTML Tag ?
Is there any difference with rendering ? Any there special considerations when using a tag or an element ?
<p> is a tag, specifically an opening tag
</p> is also a tag, a closing tag
<p>This is a paragraph</p> is an element — opening tag, closing tag, and contents
Generally when you’re talking about HTML, it doesn’t really matter which term you use, but if we’re getting technical, the above points illustrate it.
Unless I’m missing something, you can’t use an element without using a tag (because elements are made from at least one tag), and whenever you use a tag, you’ve got an element.
Element and Tag are two terms that generally refer to the same thing.
When programming against HTML, however, Tag usually refers to a string (eg, "<b>...</b>), whereas Element refers to a DOM object representing a tag.
Unless you mean the HTML tag <html></html> which tells the browser this is an HTML document and HTML elements which are everything else as already mentioned.
I would like to define a snippet of CSS in my page like this:
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
</style>
I keep reading that it should be defined within the <head> element, but it seems to work fine when inline. Can someone confirm if this is okay?
For HTML 4 the spec says:
The STYLE element allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document.
Reference: http://www.w3.org/TR/html4/present/styles.html#h-14.2.3.
Their specification of "head of the document", rather than simply 'document' strongly suggests that elsewhere is inappropriate.
For HTML 5, however, this is relaxed and the style element can be placed within the document itself:
The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user.
Reference: http://www.w3.org/TR/html5/semantics.html#the-style-element.
Most browsers put it anywhere in the page, but just be aware that it only takes effect from that point onwards. Also, it's not valid HTML if you don't put it in the head element.
Also, it's considered best practise to put it in the head element as it improves page render times.
It is not strictly valid unless you are using HTML5 and the scoped attribute.
https://www.w3schools.com/tags/tag_style.asp
https://www.w3schools.com/tags/att_scoped.asp
Although all browsers that I know of will accept the tag anywhere in the document.
It is not OK.
While some browsers might (mistakenly) care about it when not in the HEAD element, this is not behavior you should rely on, as it is counter to the HTML standard and may or may not work in the future for any given browser.
Edit: Update: In HTML 5, style elements can be scoped to only apply to a subtree, in which case they don't need to be in the head element.
They still, however, need to be in front of any other content they apply to, so the same principle applies.