A quickie: In my code
$("iframe").append(" <b>Appended iframe by element</b>."); is not being appended.
I also found that $("img").append(" <b>Appended p by element</b>."); also doesn't work.
A fiddle is here: https://jsfiddle.net/stephan_luis/9hqo72ua/8/
jQ select by ID is also tried, both work for a <p></p> tag.
My question is why doesn't this work? The docs don't mention anything https://api.jquery.com/append/ Is there a list of html element that jquery methods don't 'do'?
This doesn't really have anything to do with jQuery. It is about the HTML you are trying to generate.
append() adds child elements to an element.
The children of an iframe element in HTML 4.x were alternative content that is only displayed if the browser doesn't support iframes. Today, iframe elements aren't allowed children.
Image elements (like iframes) are replaced elements, but they aren't allowed children at all (and never have). <img><b>Appended p by element</b></img> is just invalid HTML.
The HTML specification tells you what content each element is allowed to have in the entry for that element.
e.g. for iframe it says:
Content model:
Nothing.
Related
In HTML5, there are iframe, which can contain an HTML document inside the parent document. There are several sanboxing options as this W3C page shows it. As far as I understand it, it prevents the iframe scripts from accessing/modifying/interfering with the parent DOM. That is a parent protection against its child.
Now, in HTML5, is there a parameter of the iframe (or it could be another tag) that prevent the parent page to access to the iframe content? Meaning, a child protection against its parent? And of course, if it is an iframe attribute, that would need to be an attribute that can't be removed through a javascript call such as ".removeAttribute()".
So I am trying to get angular working on IE8. I have followed all the steps on http://docs.angularjs.org/guide/ie and it seems to be working -- I see the content of ng-view rendered on IE8 when I switch between views.
The problem is that I don't actually see any content in the inspector:
.. it's just an empty ng-view tag. I can see all of the content on the page, but no styling is applied to anything inside ng-view.
I am not sure whether this is an angular or HTML5 issue. I have added the html5shiv and HTML5 elements outside of ng-view are styled nicely.
EDIT
I have determined that the problem is HTML5 elements. <section> and <article> are not styled inside ng-view, while simple divs receive all the specified styling. Outside of ng-view, <nav> and <header> are styled just fine.
I was able to fix this by conditionally including jQuery in IE8 based on answer given here https://stackoverflow.com/a/18317832/2026098
The problem here is that, even if you add a namespace and/or precreate your elements according to the IE guide there are certain parts of the angular core that don't pass through the normal jQuery element creation - I have had the issue persist even when using full jQuery instead of Angular's jQLite but I've heard that fixes things for most people. Using an HTML5 shim doesn't solve the issue on its own either.
But even so, I would prefer to not have to substitute jQuery if possible, in which case you'll need to also do the following to get a fully working solution:
Add reset styles for the block-level HTML5 elements so they display: block; correctly
Target the HTML5 elements with a colon prefix as well in your CSS. You need to escape these, it will look like this: header, \3A header { /*...*/ }. Note that there is a space between the escape sequence and the rest of the selector.
If you are using jQuery, you will need to use a 1.10.x version or conditional tags to switch to it in IE8.
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can a span be closed using <span />?
<p>This is a test <span id='span1' style='display:inline-block;'></span> to see if I can embed an inline block.</p>
<p>This is a test <span id='span2' style='display:inline-block;'/> to see if I can embed an inline block.</p>
http://jsfiddle.net/T7ByE/
The first line embeds a span with a regular closing tag, while the second uses a self-closing tag. The first line works properly, while the second has a bizarre result.
I'm just curious why there is such a difference in the handling of the element in each case. I'm aware that under non-strict xhtml, self-closing tags aren't very well supported. It appears the self-closing tag is being treated as just an open tag.
Is there a good reason modern browsers still don't support self-closing html tags? Am I expected to change the doctype or something to get this to work?
The irony is I actually started with an explicit closing tag, but ran it through the browser's xml parser and back to html, and the parser felt like collapsing the empty element into a self-closing tag, which promptly broke everything.
Is there a good reason modern browsers still don't support self-closing html tags?
Backwards compatibility.
Am I expected to change the doctype or something to get this to work?
You want to use XML, you need to send your document as XML (application/xhtml+xml, to be specific). This has mainly to do with the MIME type, not the doctype. Of course, there's no way to make it work in IE <9.
Web-browsers have DOM inspectors which show us the structure of the resulting DOM tree. For instance, in Firebug:
As you can see, Firefox doesn't recognize the self-closing tag, but treats it like a start-tag instead. Firefox will close that SPAN element automatically when it reaches the end of the paragraph, meaning that the SPAN will contain the remaining text of the paragraph.
Now, since you're inserting a DIV element into the SPAN element, the DIV will be laid out below the text-content of that SPAN element. This is because the DIV element is a block-level element. Block-level elements that appear after text-content, are laid out below that text-content.
When you self enclose a tag like span, as far as I can imagine***, you're not actually self enclosing it - those tags don't have that ability. What you're actually doing is leaving it open. And when you leave stuff open, the browser takes a liberty, and closes them itself, usually, at the end of their parent's closing tag.
So in your example, in case nº2, you get an inline-block that goes all the way until the end of the p element. Now, inside that inline-block you're appending a block level element. Well, this time and again... by putting a block inside an inline (inline-block) the browser takes another one of its liberties and (basically) puts all the content surrounding the block element in as many block level elements as it needs to (that's 1 or two - no more).
In your case you get one "anonymous" block around the text preceding the inserted div ("to see if I can embed an inline-block.").
Since blocks stack vertically, it's no surprise, then, the appearance you get on the second paragraph.
See a colored fiddle at: jsfiddle.net/T7ByE/1/ (not clickable) to see it better.
Relevant Links
display:block inside display:inline
***it kind'a seems that depending on your content type spans can actually be self enclosing*
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.