I'm a new programmer working on my first RoR site (with an implemented bootstrap theme) and having some (seemingly simple) trouble with the HTML, noticed with image sharing issues via the facebook debugger. The error says 'Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable.'
I tested at / with HTML5. These are the two errors I'm particularly curious about:
Line 33, Column 20: Stray start tag html.
<html class="no-js">
Line 36, Column 6: Stray start tag head.
<head>
I've researched this for a while now and found many similar questions: Stray start tag html, Stray start tag HTML in validator?, Stray start tag Error, Getting "Stray end tag html" from W3C Validator though none have solved my situation. I believe I have the correct HTML5 format:
<html>
<head>
<meta>
<link>
<script></script>
<title></title>
</head>
<body>
</body>
</html>
I'm curious if the "no-js" or div id are having an effect and haven't found much help in that respect.
My code:
<html class="no-js">
<div id="header">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="one breath">
<meta property="og:description" content="This moment is your life. Breathe. Notice it.">
<meta property="og:image" content=".png">
<meta property="og:url" content="">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-theme.css">
<link rel="stylesheet" href="main.css">
<link rel="image" type="image/png" href="breathenoticeit.png">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>one breath</title>
</head>
</div>
<body>
.... content ....
</body>
</html>
My question: what is the malformed HTML? Specifically, how do I address the stray start tag html and stray start tag head errors given by the HTML validator (to ultimately fix the facebook debugger error and display the correct image)?
Any help is greatly appreciated! (The full site is www.onebreath.io)
EDIT
Clarified question being asked.
I'm a new programmer working on my first RoR site (with an implemented bootstrap theme) and having some (seemingly simple) trouble with the HTML, noticed with image sharing issues via the facebook debugger. The error says 'Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable.'
I tested at http://validator.w3/ with HTML5. These are the two errors I'm particularly curious about:
Line 33, Column 20: Stray start tag html.
<html class="no-js">
Line 36, Column 6: Stray start tag head.
<head>
I've researched this for a while now and found many similar questions: Stray start tag html, Stray start tag HTML in validator?, Stray start tag Error, Getting "Stray end tag html" from W3C Validator though none have solved my situation. I believe I have the correct HTML5 format:
<html>
<head>
<meta>
<link>
<script></script>
<title></title>
</head>
<body>
</body>
</html>
I'm curious if the "no-js" or div id are having an effect and haven't found much help in that respect.
My code:
<html class="no-js">
<div id="header">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="one breath">
<meta property="og:description" content="This moment is your life. Breathe. Notice it.">
<meta property="og:image" content="http://i61.tinypic./2yjzpsz.png">
<meta property="og:url" content="http://www.onebreath.io">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-theme.css">
<link rel="stylesheet" href="main.css">
<link rel="image" type="image/png" href="breathenoticeit.png">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>one breath</title>
</head>
</div>
<body>
.... content ....
</body>
</html>
My question: what is the malformed HTML? Specifically, how do I address the stray start tag html and stray start tag head errors given by the HTML validator (to ultimately fix the facebook debugger error and display the correct image)?
Any help is greatly appreciated! (The full site is www.onebreath.io)
EDIT
Clarified question being asked.
Share Improve this question edited May 23, 2017 at 12:08 CommunityBot 11 silver badge asked Jun 2, 2014 at 3:52 thadleythadley 411 silver badge6 bronze badges 3- @Teemu I believe it was a part of the template of the bootstrap theme that I implemented. (Perhaps that was without the <head></head> though...) Do you think that could be causing the error? – thadley Commented Jun 2, 2014 at 4:16
- You should edit the question to clarify what is being asked (e.g., you should have specified that you selected HTML5 in the validator’s user interface), not to answer it or to ment on answers. – Jukka K. Korpela Commented Jun 2, 2014 at 4:51
- @JukkaK.Korpela thanks for the feedback. I removed that ment/answer and clarified the question. – thadley Commented Jun 2, 2014 at 5:14
3 Answers
Reset to default 2- Remove the
<div id="header">that is wrapping your<head>.<div>is used to contain content that will be displayed within your<body>. - Before
<html>, declare a doctype like<!DOCTYPE html>.
HTML you should have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="one breath">
<meta property="og:description" content="This moment is your life. Breathe. Notice it.">
<meta property="og:image" content="http://i61.tinypic./2yjzpsz.png">
<meta property="og:url" content="http://www.onebreath.io">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-theme.css">
<link rel="stylesheet" href="main.css">
<link rel="image" type="image/png" href="breathenoticeit.png">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>one breath</title>
</head>
<body class="no-js">
.... content ....
</body>
</html>
You shouldn't have your head section wrapped in a div. Divs should only be within the body. More than likely that's what's tripping up the validator.
Run it through the w3 validator at http://validator.w3
What you are seeing are just problems with the validity of your HTML. <html> doesn't have a class attribute and <div> cannot be a direct child of <html>, it must be within the <body> or another element that allows <div> to be a child.
your general structure should look like this (don't forget the doctype)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body class="no-js">
<!-- content -->
</body>
</html>