Is <H#> element inside HTML <li> element considered semantically correct?
Yep. According to http://validator.w3.org/check anyway... it's a great tool.
There are many tools that no web developer should be without. One of those tools is a good HTML Validator add-on for your browser.
Firefox HTML Validator Add-on:
http://users.skynet.be/mgueury/mozilla/
Chrome HTML Validator add-on:
http://robertnyman.com/2010/04/07/html-validator-extension-for-google-chrome/
I especially like the one for Firefox. If there is a validation error in your HTML, not only will it tell you, but it also tells you why it's bad and how to fix it.
To answer your question, I do believe h# are considered valid inside an <li> element. But it may also depend on DOCTYPE as there are different rules for different HTML DOCTYPES. However, with the validator you'll never need to ask a question like this again :)
Related
I'm sorry for how ridiculous this question might seem and for my english.
I'm just stuck and can't understand this.
How can we still use the <u>....</u> in HTML5 and the result be the same with <span style="text-decoration: underline;">......</span> ?
Didn't it stop to have support?
I mean how isn't <u>....</u> supported in HTML5 if i can still use it on full way?
Thank you, and once again sorry
The u is not invalid in HTML5. It just changed it's definition (see here):
The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
So it's not recommended to use u to underline text as you're pointing out correctly. A proper way is to use CSS and text-decoration: underline;.
<u> has slipped back into HTML5 for a couple rare, non-conforming instances dealing with other languages and things like spell check. Essentially, to cover any instance when a user will expect an underline.
A helpful link on why <u> is back after being depreciated in HTML4 --> http://html5doctor.com/u-element/
As found out, thank to you
"Regardless of whether an element is deprecated (HTML 4, XHTML 1) or non-conforming (HTML5) or just plain uncool, browser makers still have to support it for backward compatibility with all those web pages".
Thank you guys!
The <u> and </u>tags DO work just like <span style="text-decoration: underline;">......</span>They both underline all the text in their enclosed elements. However, having all those formatting tags in your HTML code can make the code very difficult to read. As dersvenhesse says, an alternative would be to use the text-decoration property and set it to underline.
My testing link is jcleung.com/m2g-test/
For some reason, the styling I have on my form is working on every browser (inclduing lower versions of IE) except for IE9!
Anybody else have this issue of know a fix?
Firstly, you have some validation errors that may be worth fixing.
Secondly, for some reason the element (on which you target your CSS) doesn't contain all the fields in ie9:
You have your <form> wrapped with <p> tag and I wonder if that makes it go crazy? Anyway, I'm pretty sure it's a html bug and I'll keep you updated if I find the problem.
EDIT:
Ok, I did some tests and I'm 99.9% sure it's because the form is wrapped with p
When using IE8 to view IE7 through the developer tool's browser mode feature, I am having an odd recurring problem with CSS. When I make changes to an external stylesheet and then reference that class in the HTML, it's like IE7 won't recognize it at all. If, however, I put that same styling inline, IE7 will obey it. Has anyone heard of this before? Here's a simple example to help illustrate what I'm saying:
External stylesheet:
.bold {
font-weight:bold;
}
Call in HTML:
<p class="bold">My paragraph here</p>
No changes will be effective in IE7, although all other browsers are fine.
If however, I do this:
<p style="font-weight:bold;">My paragraph here</p>
IE7 seems happy. What's the difference? Do I really have to make CSS changes this way, or is there another workaround?
I'm baffled as to what the issue could be. I don't know if the developer tool's browser mode has a quirk and doesn't quite work as a real-life version of IE7 would, or if this is something completely different. I am using IE8 (I can't upgrade to IE9 at this government computer), but I've heard the problem persists with my changes in IE9's browser mode of IE7 too.
We're using ColdFusion to generate the HTML, using an HTML5 doctype (), and I've added a timestamp parameter to the 2 external stylesheet references so the browser is forced to grab a new copy every time.
Any help with this mystery would be hugely appreciated - thank you!
======
For #Stano or anyone else who is interested in recreating the exact problem, here is a stripped down version of it: https://docs.google.com/open?id=0B02DZPpIlMwGSk1VZHRDUHNCTkU (Can click File > Download to get the zip). Notice in IE7, "Photographer" is fine because it has inline styling, but the others aren't picking up anything.
With regards to your comments, you're right in saying that it could be a caching issue, but it could also be an issue with that stylesheet (though it doesn't look like that's the case), another stylesheet, or invalid HTML.
One of the things that I want to correct you on, because I think it may influence your understanding of how CSS and HTML interact, is that class attributes in HTML elements do not call CSS. Rather, CSS rules tell the browser agent how to render things with certain attributes. This is why we are able to use the elements ID, name, groupname, class, and other values to identify which elements to apply which class to.
I mention this because if you have invalid HTML (a missing end tag, a missing arrow, etc.) it can do all sorts of weird things. A few days ago it helped me solve an issue where a misplaced tag was actually causing a script of mine to loop on one of my pages.
Take a quick second and validate your HTML using the W3C Markup Validator.
Sometimes when I see a website I like or sites from respected people, I see the source codes and try to understand them (as we all do).
On Jeremy Keiths site he uses the following code:
[role="navigation"] a {
font-weight: bold;
text-decoration: none; }
I have never seen this before, and a few other times I saw code (which can be considered a "trick") that I had never seen before.
Other than asking what the above code means, my question is - is there any documentation, book or blogs that go through to learn about the advanced/less known CSS "tricks"?
The above targets elements that have a role attribute, such as:
<div role="navigation">
...
</div>
A class would make sense here too, but it's just another way of doing it. Attribute selectors are a standard part of CSS2, but at the time IE6 didn't support them so it hasn't been used much until recently.
There are many other such selectors that have been around for a long time but couldn't be used due to limitations imposed by IE. See Quirksmode for more examples.
That is a CSS attribute selector. It's saying "All <a> tags that are descendents of an element that has an attribute of role with a value of navigation should be styled in the following way ..."
He's using it for accessibility principally, and for styling only secondarily.
If you are looking to learn some of the newest things about CSS, I'd recommend css3.info and css3please.com. The first is a great source of examples of new tricks, and the second one lets you play with the new stuff in the browser. Other than that ... I've found that the best way to learn is to answer questions here (looking things up when you are not sure) combined with reading -- Eric Myers, Paul Irish, Quirksmode -- all of these are good resources for learning things that are new to you.
In this example, the <nav> is wrapped in a <div> and then then assigned a navigation role. The same can be achieved with just
nav a {}
A lot of sites seem to mix a "little" HTML5 with XHTML. I really don't see a reason why they don't use HTML5 "completely". The whole point of HTML5 is to be more semantic and to write less code that's more meaningful.
Some useful links.
http://html5doctor.com/
http://htmldog.com/
http://desizntech.info/2009/03/discover-the-cool-of-css-25-advanced-css-techniques/
As of now, you'll need a bit of javascript to make HTML5 elements work in IE. These links should help
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
http://remysharp.com/2009/01/07/html5-enabling-script/
Role is a new XHTML2 attribute.
http://www.wait-till-i.com/2009/05/16/pitching-a-hack-or-a-product-dos-and-donts/
http://www.w3.org/TR/2008/WD-xhtml-role-20080407/
Cool, which browser did it work in?
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors
E[foo="bar"]
an E element whose "foo" attribute value is exactly equal to "bar"
Here's my page
It looks correct in Firefox, but of course in Internet Explorer, there's an issue.
The main body of the page is not displaying correctly. The left and right divs are not showing the white background that I'm trying to get them to.
Your HTML appears to be broken. For example <div id="mainbody" is not closed. Run it through a validator and fix all the markup problems.
Try separating your shortcut for background in your #left id in css. IE may not be parsing it correctly.
The #right div looks OK (I'm using IE7).
You need to change <div id="mainbody" to <div id="mainbody"> as i told you earlier.
Use the W3C validator: [Invalid] Markup Validation of modastudio.com/docs_new/bostondentalposters.shtml - W3C Markup Validator.
You've got a bad doctype that will throw IE into quirks mode, as well as missing tags, double charset calls (that should be UTF instead of 8859), duplicated meta tags, etc.....
You're also nesting tables and lists inside of paragraph tags which is invalid markup for the doctype you're using. A handful of the meta tags are not closed correctly along with capitalization of attributes which are also not allowed with the selected doctype. The stylesheet link tag is not closed correctly. The images tags in the table are not close correctly nor are the break tags.
Fix the html errors first and then see where you're at with your layout.
Good luck and hope this helps some.
Maybe not really an answer to your question, but since you seem to develop in Firefox, you might want to try the HTML Validator extension. Makes this kind of development a lot easier.