W3 says:
Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
What is this "root element" referring to? <html>? <body>?
See the HTML specification.
For an HTML document, the root element is <html>.
See also the XML specification:
There is exactly one element, called the root, or document element, no part of which appears in the content of any other element.] For all other elements, if the start-tag is in the content of another element, the end-tag is in the content of the same element.
All bodies of web with html standards start with <html>.This is why the root element is html tag. Even if you remove html tag from a html file and open it using browser, you can check the code by inspect element feature that browsers added html tags for you.
Related
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.
Seems HTML5 Recommendation has a little ambiguity about <link> position: http://www.w3.org/TR/html5/document-metadata.html#the-link-element
There is a phrase
Contexts in which this element can be used: Where metadata content is expected.
And there is no exact definition of this contexts. But the whole page describes a content of this kind e.g. head, title, base, link, meta, style.
There is also a paragraph:
A link element must have a rel attribute.
If the rel attribute is used, the element is restricted to the head element.
Seems that it has redundant or mutually exclusive phrases.
So could anybody clarify the situation with <link> tag position?
Is Google right about https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example or does it violate the W3C Recommendation?
link is not permitted outside of the html element. The html element is the single permitted root element.
Inserting an element into head cannot place it out of html because head must also be in html.
The <link> element must go inside the <head> element, which in turn must go inside the </html>.
The only thing you can put outside of an <html> is a comment or the DOCTYPE
Is it legal to have children of an anchor tag in HTML? For an example:
<a>
<font>Example</font>
<img src="example.jpg"/>
</a>
It works fine in the browsers.But is it valid? Please help
Yes - even more so with the advent of HTML 5 (From the spec):
Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.
Yes, all versions of HTML allow some elements inside an a element. The set of allowed elements depends on the HTML version. The code posted is valid HTML 3.2 and HTML 4.01 as far as element nesting goes, though the img element is not valid HTML 4.01 due to lack of alt attribute.
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.
Sometimes I see people apply global css styles to html, sometimes I see them apply them to body, with both raw css and javascript.
Are there any differences between the two? Which is the standard to make a global css style? Is there anything I should know when picking between them?
I'm assuming that "global page styling" here refers to things such as fonts, colors and backgrounds.
Personally, I apply global page styling, for the most part, to body and the simple element selectors (p, h1, h2, h3..., input, img, etc). These elements are more closely related to the presentation of content of an HTML page to the user.
My rationale for this is simple: the presentational attributes bgcolor, background, text, topmargin, leftmargin and others were given to the body element, not the html element. These attributes are now converted to their respective CSS rules with extremely low precedence in the cascade:
The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet.
Most if not all implementations I'm aware of will convert these to CSS rules on body, based on their HTML equivalents. Others such as link, alink and vlink will become a:link, a:active and a:visited rules respectively.
Of course, it should be noted that CSS itself doesn't really have any semantics to it per se, as it's a styling language in itself which is completely separate from the content structure of an HTML document. Although the introduction to CSS2.1 covers the basics of styling an HTML document, note that the section calls itself non-normative (or informative); this means it doesn't set any hard and fast rules for CSS implementers to follow. Instead, it simply provides information for readers.
That said, certain styles may be applied to html to modify viewport behavior. For example, to hide the page scrollbars use:
html {
overflow: hidden;
}
You can also apply rules to both html and body for interesting effects; see the following questions for details and examples:
What's the difference in applying CSS to html, body, and *?
Applying a background to <html> and/or <body>
Note that html is not the viewport; the viewport establishes an initial containing block in which html is situated. That initial containing block cannot be targeted with CSS, because in HTML, the root element is html.
Note also that, technically, there is no difference between applying properties to html and body that are inherited by default, such as font-family and color.
Last but not least, here is an excellent article that details the differences between html and body in terms of CSS. In summary (quoted from its first section):
The html and body elements are distinct block-level entities, in a
parent/child relationship.
The html element's height and width are controlled by the browser window.
It is the html element which has (by default) overflow:auto, causing
scrollbars to appear when needed.
The body element is (by default) position:static, which means that
positioned children of it are
positioned relative to the html
element's coordinate system.
In almost all modern browsers, the built-in offset from the edge of the
page is applied through a margin on
the body element, not padding on the
html element.
As the root element, html is more closely associated with the browser viewport than body (which is why it says html has overflow: auto for scrollbars). Note however that the scrollbars are not necessarily generated by the html element itself. By default, it's the viewport that generates these scrollbars; the values of overflow are simply transferred (or propagated) between body, html, and the viewport, depending on which values you set. The details of all this are covered in the CSS2.1 spec, which says:
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
The last bullet point probably has its roots in the aforementioned topmargin and leftmargin attributes of the body element.
If you want to style only the content that'll be displayed, targeting the <body> element saves the style rules an unnecessary level of cascading.
Is there a reason you'd want to apply styles to the <title>, <meta>, <script> etc... tags? That would happen by targeting <html>.