I tried W3C Markup validation with a simple HTML page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Title</title>
<script src="script/myScript.js" type="text/javascript"></script>
<link href="style/theme.css" rel="stylesheet"></link>
<!--[if lte IE 8]>
<link href="style/themeIE8.css" rel="stylesheet"></link>
<![endif]-->
<noscript>Please enable JavaScript in your browser to view this page properly, to view the basic page of the site click the link main.aspx
</noscript>
</head>
<body class="layout">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
and got the following errors
I guess in the noscript tag (or generally in the head tag itself) using DOM elements like a is not okay, Is there any alternative to that? i.e. if script is not found provide a link to a page that doesn't need script
and any idea as to why I am getting the errors for link & body tags? Thanks
link tag doesn't have a close tag, </link>. As such, it's invalid. If you want to close it inline, do it like this:
<link ... />
Also, you need to shift your <noscript> tag inside the body tag and between the head tag as it contains text content.
Reference
Sitepoint Reference
Though, using something like this is valid if you place in the head tag 1.
<noscript><link href="style/theme.css" rel="stylesheet" /></noscript>
1. In a head element, if scripting is disabled for the noscript element
The noscript element must contain only link, style, and meta elements.
In a head element, if scripting is enabled for the noscript element
The noscript element must contain only text, except
that invoking the HTML fragment parsing algorithm with the noscript
element as the context element and the text contents as the input must
result in a list of nodes that consists only of link, style, and meta
elements that would be conforming if they were children of the
noscript element, and no parse errors.
Correct Markup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Title</title>
<script src="script/myScript.js" type="text/javascript"></script>
<link href="style/theme.css" rel="stylesheet" />
<!--[if lte IE 8]>
<link href="style/themeIE8.css" rel="stylesheet" />
<![endif]-->
</head>
<body class="layout">
<noscript>Please enable JavaScript in your browser to view this page properly, to view the basic page of the site click the link main.aspx
</noscript>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
Check you style link which is not right. Style link should be self close. i.e.
<link href=".." rel="stylesheet" />
and because there is written text not linked style or script so it should be under body tag.
Related
When I embed a piece of html code, it seems that it won't be effected by the linked css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>worldmapper BETA</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<embed type="text/html" src="test.html">
</body>
</html>
Correct. <embed> acts like <iframe> (just not so well defined, so you should use <iframe> instead).
You are loading a separate document in a sub-window.
For the CSS to apply, you need to link the CSS to that document.
Consider using a template system which you apply either server side or at build time instead. Then your single web page will consist of a single HTML document.
Google's suggested the Optimize CSS Delivery method according to the below document link:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI
According to the Google document I have divide the CSS into two separate CSS files.
a) small.css - Critical CSS
b) common.css - Other normal CSS
Then I've place the critical CSS end of code.
eg: <html>
<head>
<link href="/css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
content
</body>
<html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
However when view the page, that particular critical CSS(small.css) style is not applied to the HTML page. Please help me to solve this Optimize CSS Delivery method issue.
I think you misunderstood a couple of things:
The <noscript> tag will only display contained content if
Javascript is disabled or not available.
What google is explaining is that inline CSS displays faster than CSS
in external files.
inline CSS looks like:
<head>
<style>
.blue{color:blue;}
</style>
</head>
while external files with CSS are included like this:
<head>
<link rel="stylesheet" href="small.css" type="text/css">
</head>
Now to answer your question, your CSS is not displayed because it is contained in the noscript tag. Here is the correct way to do it:
<html>
<head>
<link rel="stylesheet" href="small.css" type="text/css">
<link href="/css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
content
</body>
<html>
Or if you are following googles recommendation:
<html>
<head>
<style>
//Copy content of small.css here
</style>
</head>
<body>
//content with inline styling
</body>
<html>
Why do you have the noscript tag ? Its only for identifying if the JavaScript is not present , so the css will not be loaded .
Also , CSS can be on the top of the code , need not be below . Try only keeping the js code below.
When creating an html document my code works either way, but how do others like to organize their html hierarchy? for example I like to put my site's banner and the navigation bar in <head>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src='script.js'></script>
<title> User's Profile'</title>
<div id="header">
<img src="http://svc004.bookeasy.com/images/MARGS/flourish-website-banner3.jpg" />
</div>
<div id="toolbar">
<span>Username</span>
<p>Profile</p>
<p>Medals</p>
<p>Account Settings</p>
<p>logout</p>
</div>
</head>
<body>
<div id="left_nav">
<p>Home</p>
<p>Scout</p>
<p>Attack</p>
<p>Fourms</p>
<p>Contact</p>
</div>
</body>
</html>
You shouldn't put anything in your head that you want to display as en element, because it's not the correct element for it.
It may work but you never know when it may not (or have subtle bugs). It will also confuse anyone who has to maintain this markup after you.
The spec says that the <head> element has to contain:
One or more elements of metadata content, of which exactly one is a title element.
Further down:
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
You can only put these tags in there:
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>
The way you're doing it isn't good. Put the header in a <header> element in the <body>.
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<head>
<title>temp</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="this.js"></script>
</head>
<body onload="init()">
</body>
</html>
Do you see more than 1 opening head tag? Because both firefox and the w3 markup validator claim I already have an open head tag before the first one I can see...
The meta tag must be in a head tag. If it isn't, the head tag will be implicitly opened.
Since your meta tag is before your head opening tag, the head tag is implicitly opened, the meta tag is inserted, and then you explicitly open head.
To fix this, move the meta tag to somewhere after you open head (but before you close it).
You need to put the meta description tag inside the element,
search engines, including Google, will not consider as meta description (or other meta tags) something
outside the element.
You need to have correct (X)HTML mark-up, and you need all your meta tags inside the element.
My html that starts with:
<html>
<head>
<script type="text/javascript" language="JavaScript1.3" src="js/euDock.2.0.js"></script>
<script type="text/javascript" language="JavaScript1.3" src="js/euDock.Image.js"></script>
</head>
...
Netbeans says on the <head> line:
The tag content is unresolved, expecting one of <ISINDEX>, <BASE>,
<TITLE>, <OBJECT>, <SCRIPT>, <META>, <LINK>, <STYLE>.
Why?
http://w3schools.com/html/html_head.asp
The HTML title Element
The tag defines the title of the document.
The title element is required in all HTML/XHTML documents.
The title element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
So for example:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Isn't title required within the head?