These are the errors and warnings I got:
Line 135, Column 134: & did not start a character reference. (&
probably should have been escaped as &.)Rk44QGJO&hl=he"></script><noscript><iframe src="…
Line 135, Column 309: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
…ight="300" width="500" frameborder="0"><textarea name="recaptch…
Line 161, Column 116: Attribute addthis:url is not serializable as XML 1.0.
Attribute addthis:title is not serializable as XML 1.0.
Attribute addthis:description is not serializable as XML 1.0.
Attribute addthis:url not allowed on element div at this point.
Attribute addthis:title not allowed on element div at this point.
Attribute fb:like:layout is not serializable as XML 1.0.
Attribute fb:like:layout not allowed on element a at this point.
and this is the addthis code:
<div class="addthis_toolbox addthis_default_style"
addthis:url="http://www.example.com"
addthis:title="title"
addthis:description="description">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet" lang="en"></a>
<a class="addthis_button_linkedin_counter"></a>
</div>
Does anyone know how to fix these errors?
To fix attribute fb:like:layout, you can actually remove the following: fb:like:layout="button_count"
since the button count is the default layout.
A bit late to the party, but maybe it helps someone else? I haven't actually tried this implementation myself, but reviewing the code it looks like a good "hack" fix to your problem - providing that you're already using jQuery on your site.
I know people will say "don't worry about it, it's not breaking anything", but when you religiously validate your code (which I believe you should, to find missing closing tags that you've forgotten, etc), these kinds of pesky errors just get in the way of validating your code in the quickest possible way.
Anyway, here is the link: http://www.teslina.com/1879/allgemein/addthis-html5-workaround-js-hack/#sthash.4dHK9Zwl.mkBH3Z0g.dpbs
Related
When looking at the source code of the HTML standard there were some tags that I didn't recognise..
For example in this snippet:
<pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlparagraphelement' data-dfn-type='interface'><c- g>HTMLParagraphElement</c-></dfn> : <a id='the-p-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
[<a id='the-p-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();
// <a href='obsolete.html#HTMLParagraphElement-partial'>also has obsolete members</a>
};</code></pre>
From https://html.spec.whatwg.org/multipage/grouping-content.html
I thought these may be custom elements, but it doesn't look like they are defined via the custom element registry.. This is the result of interrogating the customElements object.
>>> customElements.get('c')
undefined
>>> customElements.get('c-')
undefined
Is this allowed? (I'd guess so since it's from the HTML standard, but it's still surprising to me). How would the browser know how these elements are supposed to be displayed? For example display: block vs. display: inline.
These are custom-elements (and valid HTML), generated by bikeshed's highlighter.
There is no need to define these as customElements because they don't bring any particular behavior, all they do is to ... save bandwidth.
Here is the commit excerpt:
🚨 TERRIBLE-HACK-ALERT 🚨 Switch to using <c- kt> instead of <span clas…
…s='kt'> to cut the weight of highlighting in half. Still valid HTML!
So apparently by switching from <span class="kt"> to <c- kt> (and span.kt { to c-[kt]{) they saved half of the weight induced by their highlighting.
Though as they say, it's a "terrible-hack", which still can make sense when building a tool that generates the majority of Web Standards pages, which can get very lengthy.
Regarding the default display of such custom-element, I'll quote Alohci's comment which did put it nicely:
All elements take the initial, or inherited for inherited properties, value of each CSS property until specified otherwise. So they would be display:inline
And regarding your expectation to see only best practices in the specs sources, it's better not assume so. Read the content of these pages, don't look at how they're built.
Most HTML editors don't look at the tools that will generate the pages, they write the specs in a pseudo-HTML language full of templates.
Or as it's put in the source:
<!-- Note: This file is NOT HTML, it's a proprietary language that is then post-processed into HTML. -->
What is the significance of cmdValue in the input tag in the following:
<input type="button" value="Bold" cmdValue="bold">
This is from <div id="actions"> on a website.
I looked up the input tag on several HTML reference sites and searched for cmdValue in conjunction with the input tag, but could find no data.
That is not a formal HTML attribute for any known tag.
That is certainly a customized attribute added by the developers of that website.
I prefer to forward you to read the answers of this question.
The significance is whatever the CSS or JavaScript code for the page assigns to it. You would need to analyze the page in detail to find this out.
As such, the nonstandard has no effect beyond getting inserted into the DOM as an attribute.
I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match
My code: <g:plusone annotation="inline"></g:plusone>
I get this error:
there is no attribute "annotation"
element "g:plusone" undefined
Why?
You have two choices
Change to using this style markup <div class="g-plusone" data-size="tall" ... ></div>
Add the XML NS for google's <g: syntax to the <html tag of the document. Now if only Google would share where that xml namespace is located... (So really, just try option 1)
There is no attribute called "annotation" for any element recommended in the W3C standards. Google probably uses it to parse for some backend processing. If you want the +1 element, you cannot have a W3C standards code.
Check this thread. So what if custom HTML attributes aren't valid XHTML?
I am working on a CMS that generates CSS "style='xyz'" statements from user input.
The user input will be validated but as an additional safeguard, I want to check the validity of the values on generation of the CSS code.
If an invalid value is encountered - e.g. a relative width ("50%") where only absolute values are allowed due to layout restrictions - I would like to return a comment INSIDE the style attribute to help debugging:
<div class="content" style="background-color: lightblue; /* WIDTH was invalid: Only absolute values allowed here */; border: 1px orange dotted;">
Is this "safe", i.e. will all major browsers still parse the settings before and after the comment properly? It is difficult to Google information about this.
It is probably safe but I wouldn't put the wrong values commented into the markup.
Let the user know they did something wrong in the very beginning before you generate markup.
A good idea would be to create such a test case and feed it to the W3C validator to see what it would say says about it.
http://validator.w3.org/
From the top of my head, IE supports it, Fx doesn't.