It says here that it is not within HTML4, though I don't really see where that's spelled out in the text.
From what I can tell, based on this, it is ok to do so in HTML5 but I'm not entirely sure (assuming style is an HTML element?)
I am using this to rotate out a stylesheet and want it to be as valid as possible according to HTML5 specs, so wondering if I should rewrite it with a data-* element.
+1 Interesting question!
Instead of using a style block, you should consider linking (link) to your stylesheets and then switch them out by referencing an id or a class.
That said, title is perfectly acceptable for a style tag in HTML5. You can use this as a hook for your stylesheet switching.
http://www.w3.org/TR/html5/semantics.html#the-style-element
Fyi... this validates
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style title="whatever"></style>
</head>
<body>
Test body
</body>
</html>
http://validator.w3.org/#validate_by_input+with_options
I've just put the following code into the W3C validator and it has no errors :)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style id="test"></style>
</head>
<body>
Test body
</body>
</html>
I think the W3C Validator is a good resource for this type of thing, it is marked as experimental but that's because the standard is yet to be be finalised.
It is not valid in HTML4 (as per the spec) and data-* attributes are not either. That is, the document will not validate against the Doctype spec if you use these attributes.
Regardless of whether the document validates or not, browsers will ignore elements that they do not recognize.
Style tags are DOM elements like any other tag, so you can add any attributes you want.
Related
From what I know, the browser can only request the assets (JS, CSS) after parsing the HTML. But analyzing the "Performance" tab on Edge's DevTools, the "Send Request" for the w3schools30.css stylesheet happens before the parsing is even started, as we can see indicated by the green arrow and other data in this image.
I'm using a simple example. Here's index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3schools30.css"/>
</head>
<body>
Performance testing
<script src="index.js"></script>
</body>
</html>
And the index.js:
setTimeout(() => {}, 1000)
Am I misunderstanding the timeline or there is a circunstance where this happens?
I think it is related with a feature called "preload scanner" on Chromium browsers. This article says:
A preload scanner's role is speculative, meaning that it examines raw
markup in order to find resources to opportunistically fetch before
the primary HTML parser would otherwise discover them.
I have a page where the <title> tag contains some text (specifically: the department name) that screen readers do not pronounce very well (the department's name is ‘AskHR’ -- it’s the HR department’s helpdesk).
I want to provide screen readers with a more pronounceable version (‘Ask H R’) whilst keeping the more stylised version for visual display. I was thinking of using aria-label to achieve this, but I’m uncertain whether it can be applied to the <title> element in the <head>.
Can anyone confirm whether or not this is valid?
I don't think this is valid.
First not all screen readers are made equal!
What you're trying to do may work in some but not in others. For example VoiceOver reads out "AskHR" as you would expect. (And ignores the aria-label attribute.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title aria-label="xxx">AskHR</title>
</head>
<body>
<button aria-label="close">X</button>
</body>
</html>
I think this is perhaps closer to what you're trying to do but support is limited:
.label {
speak-as: spell-out
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/#counter-style/speak-as
If we inspect the example above in Chrome, you see this for the <button> element:
The aria-label attribute takes over the button content. VoiceOver reads out "close" instead of "x".
However this is what we see for <title>:
Html-agility-pack seems to build nodes from elements within TextArea, which are not real nodes.
For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<title>Sample</title>
</head>
<body>
<TEXTAREA>Text in the <div>hello</div>area</TEXTAREA>
</body>
</html>
This will yield a child-node of "div" under the "textarea".
Browsers will treat everything as text.
Is there a way to compel html-agility-pack to behave the same way?
Clarification
I don't want the node to be created in the first place. If I run doc.DocumentNode.SelectNodes("//div") I want this to yield nothing. Right now I have to use doc.DocumentNode.SelectNodes("//div [not(ancestor::textarea]") but I have to do this for every select I perform to avoid phantom nodes.
Any ideas?
Use the InnerText property to get just the text of a node. This also gets the text of any child nodes (in this case the div).
var textArea = doc.DocumentNode.SelectSingleNode("//textarea");
string text = textArea.InnerText;
Issue has been fixed by the kind folks at zzzprojects.
Fix available and tested on version 1.8.2.
You can see the ticket here: Issue 183
My goal is to convert a markdown document to html, with a table of contents at the top. I saw that Redcarpet has a HTML_TOC option, which is really nice. But when I use it, it only renders the TOC, it does not include the rest of the document.
renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
markdown = Redcarpet::Markdown.new(renderer)
html = markdown.render(File.read(input_file))
How do I render both the TOC and document itself in the same html page?
The only thing I can think of is to render two separate html objects, then combine them. But that is a little messy because I'd have to parse out the head/body tags properly before combining them. Is there a better way?
The only thing I can think of is to render two separate html objects, then combine them.
That would be exactly what you need to do. As a reminder, Markdown does not render a complete HTML document anyway. You only get an HTML fragment. For example a simple Markdown document:
A simple Markdown document.
gets rendered as the following HTML fragment:
<p>A simple Markdown document.</p>
However, for a complete, valid HTML document you need (at least) the following:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>A simple Markdown document.</p>
</body>
</html>
Considering that you need to generate all of that anyway, how is it "messy" to obtain the TOC and the body separately?
In fact, in more sophisticated systems, the TOC may be in a sidebar or something. Therefore, using a templating system, the TOC can be passed to a template separately anyway, where it is then placed in a container which separates it from the document body for positioning and styling by CSS.
The exact template syntax might vary depending on which tools you use, but perhaps something like this:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<aside>
{{ page.toc }}
</aside>
<div id="body">
{{ page.body }}
</div>
</body>
</html>
Of course, you don't have to use a template, but is certainly is a "clean" way to generate a document.
I am using the W3C XHTML validator to check my sites and I am getting some errors on pages with FBML. Most of the cause of such errors is the "&" character. Since FBML values and attributes are generated on the fly, I have no way to encode the character properly before displaying it.
Question: Is there a way for me to tell Facebook Connect to render the mark up properly?
Thanks.
Try to put the facebook code in CDATA:
<script type="text/javascript">
/* <![CDATA[ */
document.write('<fb:login-button length="long" size="large" show-faces="true" perms="" onlogin="window.location=\'<?=current_url()?>\'"></fb:login-button>');
/* ]]> */
</script>
In short, not as far as I know. To make matters worse, the fb:* tags don't validate either, even if you make your html tag look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
If this is a huge issue for you, you might be able to get away with putting non-XHTML-compliant markup in its own HTML-4.01-strict iframe, to basically sweep the crap under the rug.
This might be helpful:
http://wiki.developers.facebook.com/index.php/Facebook_Platform_for_Mobile:_XHTML
Some german guy also worked on it:
http://translate.google.com/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=http%3A%2F%2Fwww.ka-mediendesign.de%2Fblog%2Ffbml-in-xhtml-neue-version%2F&sl=de&tl=en
This is how i am doing it. Wrap around all fbml tags inside and then use js to simply uncomment the fbml code using javascript. Heres an example:
Markup:
<P class="fbreplace" style="display: none;">
<!-- FBML
<fb:like layout="standard" show_faces="false" colorscheme="light"></ fb: like>
->
</ p>
JS (JQuery Required):
$(document).ready(function() {
$(".fbreplace").html.replace(/<!-- FBML /g, "");
$(".fbreplace").html.replace(/ -->/g, "");
$(".fbreplace").style.display = "block";
});