Validating HTML5 Page - html

I validated my website using: https://validator.w3.org/#validate_by_upload
and I got no errors. However, the website recently changed and now I get these 2 messages:
Info: The Content-Type was application/octet-stream. Using the XML parser (not resolving external entities).
Fatal Error: Empty document, with no root element.
What do these messages mean? How do I correct the error?
The settings I used were: Encoding: utf-8 document type: HTML5
SIMPLE HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<hr>
<footer>Footer</footer>
</div>
</body>
</html>

It could be because you have opening tags that are not closed. I put your code in to the checker and it complained about the body element being found before the div is closed:
<body>
<div class="container"> <!-- no closing tag for this div -->
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<div>
<hr>
<footer>Footer</footer>
</div>
</body>
Message filtering
Info: The Content-Type was text/html. Using the HTML parser.
Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support.
Error: End tag for body seen, but there were unclosed elements.
From line 27, column 1; to line 27, column 7
Error: Unclosed element div.
From line 17, column 1; to line 17, column 23
Fix that and rerun the tests.

This is an issue when using the old w3 validator and Safari as the uploading Browser; If you upload using Chrome it should work fine, or if you cut and paste it should work fine. Also, if you upload using Safari to the "new school" validator it will work as well.
http://html5.validator.nu/

It looks fine but some tags need to be closed like your hr's
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr />
<div>
<p> TEXT </p>
</div>
<hr />
<footer>Footer</footer>
</div>
</body>
</html>

Related

Internet Explorer 11 removes script tags in body

I currently have a peculiar problem with the IE11; it seems like it removes all my script tags in the body tag.
For instance I receive the following HTML from the server:
<html>
<head>
<title></title>
<script type="text/javascript" src="somehost.com/somescript.js"></script>
</head>
<body>
<div>
<!--some content here-->
</div>
<div>
<!--some content here-->
</div>
<script type="text/template" class="someclass">
<div>
<!--some dynamic content here-->
</div>
</script>
</body>
</html>
The rendered result:
<html>
<head>
<title></title>
<script type="text/javascript" src="somehost.com/somescript.js"></script>
</head>
<body>
<div>
<!--some content here-->
</div>
<div>
<!--some content here-->
</div>
</body>
</html>
My use-case is the following:
I have an image with clickable areas. Each area opens a lightbox on click, which has its html provided from script tags in the body since it is dynamic content from the server. I am using jquery to query the corresponding script tag with the proper html. It works properly in Firefox and Chrome, only the IE11 is giving me a headache by removing the script tags.
What am I missing? Why is IE11 removing script tags from the body? Is there a security setting to configure this behavior?

IE Specefic css not called by internet explorer

I am trying to make a website which behave differently on IE browser. I am doing this by calling a different css for IE browser and for another for different browser. But on IE browser IE SPECIFIC css is not being called
<html>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
<head>
<link href="new.css" rel="stylesheet"/>
</head>
<body id="bdy">
<div id="wrapper">
<div id="header">
<div id="logo">
<div id="log_in">
</div>
</div>
</div>
<div id="menu">
</div>
<div id="main">
<div id="left_div">
</div>
<div id="right_div">
<div id="table_items"></div>
<div id="addv"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
If you are targeting IE8 version only then you have to use this conditional statement.
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
If you don't want to create seperate css file then following syntax.
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
For example you have class called borderright and you want to apply different style for ie8 then add your class like below.
.ie8 .borderright
{
/*Your Style goes here*/
}
your code:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
is placed before head tag.
Put that code inside head tag !. And remove if="IE 8" part

Issue with compiling HTML5 code in Web-Browser

i'v created demo page of mobile jquery using TextEdit...which is,
<!doctype html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
but, in my browser code is not getting compiled and it shows these texts as it is as plain text.. and i'v confirmed that my browser support HTML5 here: http://html5test.com/
what is missing!?
Question is what browser are you using? I tried your code with Chrome and it worked perfectly.
My guess is that you are behind a corporate or university firewall that is blockign your CDN urls. So why don't you download the jQuery mobile files and place the js, css files locally and try to run the page again?
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
sorry but issue was weird, actually i had created that page using textEdit which stored all text as rich text format which may not recognized to be compiled as html... so i converted that text to plain text and saved it again and that worked!!
thanks all.

HTML5 html5shiv and IE7

I am trying to make IE7 render HTML5 using html5shiv; I thought html5shiv would fix these issues. However, Internet Explorer's debugbar is still griping about HTML5 tags.
How can I fix this using html5shiv to use the same HTML5 content without errors in debugbar?
<!DOCTYPE html>
<!--
See this page for language codes:
http://tlt.its.psu.edu/suggestions/international/web/tips/langtagscript.html
-->
<html class="no-js" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Page Template</title>
<!--
html5shiv via CDN
Provides HTML5 support in hateful IE versions
CDN: http://cdnjs.com/
-->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<h1>Standard HTML5 Page</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Archives</li>
<li>About</li>
</ul>
</nav>
<section id="featured">
<article>
<header>
<h1>Title Foo1</h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1>Title Foo2</h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<section id="ads">
Get a better job!
</section>
<footer>
<p>Insert footer info here</p>
</footer>
</div>
</body>
</html>
You don't. html5shiv only makes it possible to style those elements. IE7 still won't know about them.
I've also had problems getting html5shiv to work in IE Tester (assuming you're using IE Tester), which I found do not occur when I force IE8 to emulate IE7 using a tag, like so:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;">
(See my answer to a similar question here). Based on this experience, I suspect IE Tester might have a problem with html5shiv: it might be worth testing your page in actual IE7 to make sure there really is a problem here.

How to make new page in html?

I am a noob at HTML.
I have a folder on my desktop with page1.html and page2.html.
This is an example of page1
<html>
<h1> Welcome
<title>Website
</h1>
<body>
<p> to page 2
</body>
Link
</html>
Whenever I open page1.html, It just says "Welcome", and "to page 2". There is no hyperlink. What am I doing wrong?
You are missing a </p> tag and the <a> tag should be inside the <body> tag.
<h1> tag is malformed as well. Remember, this is just like parentheses in math. If you open one then you need to close one.
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>
Link to page 2
</p>
</body>
</html>
The A tag should be inside the body tags. You probably also want to close the p tag.
Try something like:
<html>
<head><title>Website</title></head>
<body>
<h1>Welcome</h1>
<p>to page 2 Link</p>
</body>
</html>
Try this. (remember to close your tags!)
<html>
<h1> Welcome
<title>Website </title>
</h1>
<body>
<p> to page 2 </p>
Link
</body>
</html>
You should close <title> with </title>. Fixing that will make the rest of the content show (demo).
As others are saying, you should also close your <p> tags, and move the <a> inside the <body>. Also, <title>Welcome</title> should be outside <h1>, and <h1> should be inside <body>.
It simpler to see with an example. The valid HTML would be:
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>to page 2</p>
Link
</body>
</html>
See the result here.
Your <title> tag should go in your document's head and your content should all be inside the body. You also need to close all your tags.
Try this:
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p> To page 2: Link</p>
</body>
</html>
The title and everything the browser needs to understand the page is better suited to go in between the <head> </head> tags.
The content that has to be displayed in the browser viewport windows has to be in between the <body> </body> tags. As others have mentioned, most of the HTML tags require to be closed.
Also, the <!DOCTYPE> declaration must be the very first thing in your HTML document before the <html> tag.
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
</head>
<body>
<h1> Welcome </h1>
<p> to page 2 </p>
Link
</body>
</html>
For a quick tutorial or help you can always refer the following website seen below. It's easy and fun. Best of luck!
http://www.w3schools.com/html/default.asp