This is a question more out of curiosity rather than being stuck. I know in html id needs to be unique and I can see the error in html validation. Yet the browsers happily apply style sheets to both elements. Is it because they are more relaxed in parsing or what. Does that mean I can use this for styling etc or does it have side effects.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#abc { color: red; }
</style>
</head>
<body>
<div id="abc">Hello Div 1</div>
<div id="abc">Hello Div 2</div>
</body>
</html>
Output in browsers.
If your browser died every time it loaded an HTML page with errors, it'd be dying all the time. And you wouldn't think very much of the browser.
It's important for a browser to be as forgiving as possible and work as best it can with what it has. For this reason, all browsers tend to be very lenient in how they handle markup.
Of course, that doesn't mean you shouldn't write valid HTML.
I would not rely on that behaviour. Having two elements with the same ID is just wrong as you already know.
And yes, the tolerate errors in HTML to some extend and try to compensate. For example missing closing tags. This works more or less good, depending on the error.
Styling several elements should be done with CSS classes.
use "class" for adjusting css.
side effect: you'll feel less comfortable when you want use getElementById and add dynamic functionality. from design perspective doesn't matter.
Related
for an application I am showing emails that have been sent out, and some of them (as stored in my system) or multipart/html, so the content will normally be something like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
etc..
I need to have a div at the top something like this that does not interfere with the HTML content:
<div id="stats"> (list subject, to, from, date, etc) </div>
It's an app obviously, so not publicly viewable. It only needs to work in a few browsers, and yes, it may use jQuery in the future - so I wanted to ask the community if there are any things to consider or accommodate when putting HTML elements ABOVE the actual and tags.
Place the element immediately within the <body> element. Otherwise, the browser will likely do this for you. Placing it outside the <html> element is invalid. If you wish for the elements to be hidden, hide them with CSS.
<!DOCTYPE html>
<html>
<head>
<title>Hidden Element</title>
</head>
<body>
<div hidden>This is hidden.</div>
</body>
</html>
The above uses the hidden attribute. It's presently not well supported, so you may prefer to use display:none instead.
What you are doing may work most of the time, but it will lead to invalid HTML, and may cause unexpected behaviour further down the line. Even though it will probably work, I wouldn't advices it.
The better approach is, as Jonathan already says, to place the element directly inside the body element.
To avoid it overlapping the other content, you could force something like margin-top: 80px on the body.
Seeing as E-Mails are unlikely to contain anything funky like absolutely positioned elements (that would collide with your info bar), that should work for the vast majority of cases.
I have the following at the top of my document:
<html class="js" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
Can someone tell me if I need the xmlns part? I am not 100% sure but I think this is
doing some things to my tags. For example when I look at the tag is see the
following with firebug:
element.style {
height: 100%;
}
If I just have this as at the top of my code then I don't see the element.style ..
<html class="js" lang="en">
Just to give some background. I'm developing an MVC application for use with English. It uses HTML5 things in a few places.
For the current html spec, (which is html5) you will not need any fancy attributes, the following is adequate:
<!DOCTYPE html>
<html>
<head>
<title>Html page</title>
</head>
<body>
<p>This is an example Html page.</p>
</body>
</html>
Also, if you are not using the html5 spec, you should.
If you are using HTML5, then the extra tags probably should not be there as they are not needed any longer.. HTML5 uses a much cleaner syntax. :)
Here is the W3 documentation about this
You do not need to give those attributes in the tag.
<html>
</html>
will work fine even in HTML5 or HTML 4.01
The xmlns attribute may be needed if the document will be processed by XML tools that do not necessarily use HTML namespace as the default. You can see this by saving the document locally and opening it in Firefox; if the xmlns attribute is missing, Firefox will display the document source, just with XML syntax coloring, because it treats all tags just as pure markup with do meaning or default rendering rules.
If the document is served as HTML (Content-Type: text/html), then browsers will imply HTML semantics (HTML namespace).
Regarding the question you asked in the heading, you should put a doctype declaration, such as <!DOCTYPE html>, for all new documents. Otherwise you will trigger Quirks Mode, which means a large and undocumented set of oddities.
I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.
Thanks!
Update
Here's the source
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albite BOOKS mobile</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="description" content="Free e-books for Java Mobile phones."/>
<meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
<meta name="language" content="en_GB"/>
<meta name="classification" content="public"/>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>
I believe I have found a better way to handle this...
At the top of your output file put the following:
<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>
Then on the last line of your last loaded CSS file put:
#loadOverlay{display: none;}
This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.
Have you ever used requirejs?
you could set after your
requirejs.config(<confObj>);
something like this
require(Array[<all your CSS & JS >]);
requirejs will do the cache (like) stuff for you!
requirejs api
You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:
// CSS
#my-div { display:block !important; }
// HTML
<div id = "my-div" style = "display:none;">
<p>This will be display:none until the CSS is applied!</p>
</div>
Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.
Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.
I was just testing this and in both IE8 & Chrome I see the same thing, empty (styled) divs are rendered differently depending which way you do it. It annoys me because the former seems so much neater.
Why?
EDIT: thanks for the clarifications on XHTML Vs HTML. Currently I have this:
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Test</title>
What is a better choice? I'd prefer XHTML as I believe it's a bit nicer.
In XHTML (served with Content-Type of application/xhtml+xml), <div /> would indeed work. But in HTML mode (text/html), then no; HTML is not XML, and XML empty tag syntax is not recognised.
<div /> is invalid markup. Since a div can't be self closing (it would just render an empty div), some browsers might render it differently. The HTML 4.01 specs state that divs (and spans) have to have both a start and end tag.
Also take a look at this question.
XHTML and HTML work differently.
In XHTML the 2 are identical and are semantically no different.
In plain HTML, you cannot self close tags. And making your tags self close is not bad, it just doesn't make a difference. The self closures are ignored.
So in plain HTML <div/> is seen as <div> which is never closed. So you need the </div> to close the tag.
HTML browsers have a hardcoded list of self closing tags and handle it for you.
I'm working with a publishing system that uses custom tags. These are interpreted on the server. The problem is, that they cause big problems with Opera, when viewed locally (custom tags are not interpreted).
Opera is handling these tags differently from other browser. It looks like it is closing the tag at the end of the document (even if the tag contains closing slash). I'm just wondering, if such behavior is considered bug or feature.
Also, if you have any idea how to hack such code so that I can debug HTML+CSS for Opera locally (without interpreted custom tags), please let me know. Thank you.
Try the folowing code to see it in action (live example):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Non-standard tag behavior in Opera</title>
<style type="text/css" media="all">
div { background: yellow; padding: 1em; }
nonstandardtag { border: 1px solid red; }
</style>
</head>
<body>
<div>
<nonstandardtag>content of non-standard tag</nonstandardtag>
main tag content
</div>
<div>
<nonstandardtag />
main tag content
</div>
</body>
</html>
I use opera for more than 5 years. It is the browser that approaches the standard the best. Most of the sites that look bad in Opera are "optimized" for IE.
But an obvious question is, why do you need to use nonstandard tags? You can use the div and span tags for almost any nonstandard solution.
Short: it's not a bug. Despite the DOCTYPE, your page is not interpreted as XHTML (and this is intentional).
HTML simply doesn't support the self-closing tag syntax the same way as XML.
In HTML, in practice <foo /> is the same as <foo> or <foo /="">. In theory it's same as <foo></foo>>.
You need to tell browser to interpret page as X[HT]ML. DOCTYPE is not enough. To do this locally, file has to have .xml or .xhtml extension. When you serve file over HTTP, you must set Content-Type header to application/xhtml+xml or similar XML type (for static files usually .xhtml file extension does the job).
Your live example is served as text/html, so it won't be interpreted as XHTML, and won't work as you expect.
BTW: XHTML doesn't allow non-standard elements. If you want to add your own elements anyway, you should at least use your own namespace.
This seems to be fixed in Opera 10. So I guess it was not a feature.
One, you don't need non-standard elements. Two, whatever you claim with your doctype, this isn't XHTML but HTML (as you make clear with the <meta http-equiv="Content-Type" content="text/html…. That obviously means that browsers use their HTML parsers, and those don't (and shouldn't) support XML's shorthand syntax <element/> for empty elements.
Short answer: there are no guarentees or requirements on what a User Agent may do if you feed it malformed data.