CODEWITHSUNDEEP
javascripthtmlruby-on-railsruby
thadley
thadley

Reputation: 41

Stray start tag html and head

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.org/ 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.com/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.

Upvotes: 2

Views: 8882

Answers (3)

misterManSam
misterManSam

Reputation: 24692

  1. Remove the <div id="header"> that is wrapping your <head>. <div> is used to contain content that will be displayed within your <body>.
  2. 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.com/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>

Upvotes: 2

nhavar
nhavar

Reputation: 198

Run it through the w3 validator at http://validator.w3.org

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>

Upvotes: 0

Johnsonium
Johnsonium

Reputation: 2005

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.

Upvotes: 1

Related Questions