At the moment I have a single page site (html/php) I created for someone about 2 years ago. I'm about to add an admin panel and plan on starting with html5 for it. I'm curious what I will need to do to my single page besides switching the <!doctype> to just html.
Here's a bit of my single page index.php:
<!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>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="descriptions" content="meta desc">
<meta name="keywords" content="meta, keywords">
<!--imports the main css file-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.form.js"></script>
</head>
<body></body>
</html>
I know first I'll change my doctype to <!doctype html> but don't I also have to remove extra properties of my link and script tags? Namely the type property?
Currently this is a simple 1 page site, so I thought it would be a great place to start.
Thanks!
That should be it. Do that and then put the URL in http://validator.w3.org/ to see what html 5 errors you have.
Also since it will not be XML I think you'll want to remove the forward slashes from the end of the meta and link tags. See Useless Code's comment below regarding the type attributes.
The validator will tell you each problem until your html 5 is valid.
The HTML 5 code would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="meta desc">
<meta name="keywords" content="meta, keywords">
<title>Title</title>
<!--imports the main css file-->
<link rel="stylesheet" href="css/style.css" media="screen">
<script src="js/jquery.form.js"></script>
</head>
<body></body>
</html>
Some explanations:
xmlns is no longer needed. Elements in HTML5 don't need to be explicitly delcared.
I'd go with charset meta before title. Otherwise, IE users might be left in the open in front of an XSS attack. (https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7)
on the second meta, the name attribute should be description, not descriptions.
there's no need for forward in html (at the end of meta, links). those were mandatory in xhtml.
when referencing link and scripts, you can choose not to mention the type attribute. It is considered redundant as the defaults will kick in (for link you would probably use css, and for script js)
If you want to find out more about HTML 5 - here are some good places to start (stuff that you can read and enjoy while at it, compared to the actual standard):
http://diveintohtml5.info/ - free e-book by Mark Pilgrim
Related
When I upload project files to ftp, Items moving to between body tags which are stored between head tags. When I test it in my localhost, it's fine and there is no problem about it.
header.php file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MEYDANOKU</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
//contents here
and there is footer.php file and it has end of the body and html tags.
footer.php file
<div id="footer1">
</div>
</body>
</html>
What is wrong with these files ? In localhost it seems perfect but when I upload to ftp, head contents moving between body tags.
site address :
http://www.meydanoku.org
You have a single space before your opening doctype tag:
<!DOCTYPE html>
delete this space:
<!DOCTYPE html>
This will fix it.
The content of head tag is not actually being placed into the body, it is just a browser (probably Google Chrome right?) bug when there is content before opening doctype tag.
Click 'view source' instead of 'inspect element' to see the actual source, rather than the browsers generated DOM
There is a space before <!DOCTYPE html> on the site. But I don't see that anything is inside body instead of head
I'm kind of learning all by myself, and I'm using the W3 validator to check my code.
Now I got this document which loads:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
include("menu.php");
?>
<?php
if (is_file("$file.inc.php")) include ("$file.inc.php");
else include("homepage.inc.php");
?>
</body>
</html>
In the menu you chose for example 'Page A', which then loads as "pageA.inc.php" which contains:
<title>SUPERAWESOME TITLE of page A</title>
text text text
...
It works fine but I get this set of errors in the W3 validator which I don't know how to handle:
In the first set of code: end tag for "HEAD" which is not finished, doesn't contain "TITLE"
In the second set of code: document type does not allow element "TITLE" here
If I set a title in the first set of code, to solve the first problem, it always shows me that same title.
If I set the tags in te second set of code I get more errors in the W3 validator saying that it doesn't allow it there.
How could I solve this issue?
Or shouldn't I care? It's working right now the way it should, I'm just bothered by the errors when validating.
You are writing your title to the body of your html, and this is not valid. The title should be in the head, e.g:
<head>
<!-- other head tags -->
<title>Your Title</title>
</head>
You can do an include also in your head section:
if (is_file("$file.inc.php")) include ("$file.header.inc.php");
And in your inc file just output <title>...</title>. Then in the body section you can include another file with text output, then your html markup should be valid.
You may try like this
You missing end tag for meta and you need to add title inside head based on the current page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
include("title.php");
?>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
include("menu.php");
?>
<?php
if (is_file("$file.inc.php")) include ("$file.inc.php");
else include("homepage.inc.php");
?>
</body>
</html>
I have a website that uses a global header.inc file, containing the header I want on top of every HTML page:
<!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-Language" content="de-at" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="standard.css.php" />
...etc...
Hence, the pages themselves look like this:
<?php include "header.inc"; ?>
<title>Page Title</title>
<style type="text/css">
/* additional style sheets for only this page */
</style>
</head>
<body>
...
Obviously, Expression Web complains about the unopened </head> tag and ignores the stuff present in the header file (e.g., the stylesheet), which makes the preview pane rather useless.
Since EW4 is supposed to "work nicely" with PHP, is there some way to make the preview pane honor includes? I've told EW where it can find the php-cgi.exe, so in the browser preview everything works nicely.
In a web app I am developing, I am experiencing a difference in placement in the DOM of elements when testing between Chrome and Firefox.
When viewing the page in Chrome, elements from the <head> tag seem to be placed in the <body>, along with a bit of whitespace. This does not appear when viewing the site in FireFox.
What could cause element missplacement like this? http://archives.wsusignpost.com
I am generating the page in PHP, pulling in data from a MySql database.
db.php is included in header.php, which is included in index.php
header.php:
<?php require('db.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>The Signpost: Archives</title>
<meta name="keywords" content="..." />
<meta name="title" content="..." />
<meta name="description" content="..." />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<a href="http://www.wsusignpost.com">
Main Signpost Website
</a>
<h1>
<img id="banner" src="..." \>
</h1>
I base myself on #Lachlan insightful answer, and expanding on that:

represent the Byte Order Mark symbol as rendered on the page. Being there 2 of them, looks like both files (main page and required one) are saved with UTF-8 with BOM, and that may cause the rendering problems (coming before the DOCTYPE).
Try saving your files as UTF without BOM in your editor and see if that solves the problem.
The first two lines of your server's response is:
<!DOCTYPE html>
<html>
Not entirely sure what that  is doing there, but I suspect your PHP require() is including something odd. Your page, when saved, completely crashes TextMate --- so something certainly isn't normal.
I wrote a small MVC app for a small website I am working on. I created a load method that loads the header, footer, and the specified view file. I am having issues to where the header is not loading all of the JS files and the entire document's HTML structure is missing indents.
Header.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $meta['title']; ?></title>
<?php //load all of the css files
foreach (glob("layout/css/*.css") as $css_filename)
{
echo '<link rel="stylesheet" href="'.INSTALL_PATH.'/'.$css_filename.'">';
}
//load all of the js files
foreach (glob("layout/js/*.js") as $js_filename)
{
echo '<script src="'.INSTALL_PATH.'/'.$js_filename.'"></script>';
}
?>
</head>
<body>
Renders as:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Test Title</title>
<link rel=stylesheet href="/labs/wpsm/layout/css/style.css"><script></script></head>
<body>
One weird thing that I discovered is that if I include random text before the doctype declaration, everything is back to normal.
With extra character:
s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Title</title>
<link rel="stylesheet" href="/labs/wpsm/layout/css/style.css"><script src="/labs/wpsm/layout/js/test.js"></script></head>
<body>
What am I missing here? I checked the character encoding of the page and it is utf-8. Any help or pointers would be awesome!
Just figured it out as I was messing around with the server. I discovered that it had mod_pagespeed enabled, I disabled the mod_pagespeed module (Google Page Speed for Apache) and it fixed the indenting and the JS file starting working. The module was automatically removing the JS file because it was a blank file I had put into the directory just to make sure the PHP was pulling the files properly. Thank you everyone for the help and I hope this helps someone save a few fistfuls of hair.