I recently migrated my website from xhtml transitional to html5. Specifically so that I could make use of valid block level anchor tags. <a><div /></a>.
When running validation I encountered the following error:
Bad value publisher for attribute rel on element link: Keyword
publisher is not registered.
But according to this page, that is exactly what I am supposed to do.
https://developers.google.com/+/plugins/badge/#connect
My code:
<link href="https://plus.google.com/xxxxxxxxxxxxxxxx" rel="publisher" />
<a href="https://plus.google.com/xxxxxxxxxxxxxxx?prsrc=3" style="text-decoration:none;">
<img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt="" style="border:0;width:16px;height:16px;"/>
</a>
I can't figure out how to implement this in an html5 compliant way. Can anyone help?
1st) Within <head>:
<!DOCTYPE html>
<head>
<!--head code-->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
2nd) Anywhere within <body>:
<body>
<!--body code-->
<div class="g-plusone" data-size="small" data-annotation="none" data-href="https://plus.google.com/u/1/+StackExchange/"></div>
</body>
This code is valid AND "FRIEND'S" with http://validator.w3.org/
You can change https://plus.google.com/u/1/+StackExchange/ for any google+ url you desire (https://plus.google.com/xxxxxxxxxxxxxxxx/)
Documentation
Google sends help: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2539557&topic=2371375&ctx=topic.
You need to add ?rel=author to your <a>s href value and delete that non-conformant <link> tag:
<a href="https://plus.google.com/12345?rel=author">
<img src="https://ssl.gstatic.com/images/icons/gplus-16.png"/>
</a>
Well, you must add two links inside head tag and body tag as follows:
<head>
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxx' itemprop='publisher'/>
</head>
After that, use the the google+ format in the body. It should be below body tag:
<body>
<a href="https://plus.google.com/xxxxxxxxxxxxxxxxx" rel="publisher" />
.....
.....
.....
</body>
here's the screenshot.
Oops! sorry, I need 10 reputation to load Image in this page ... LOL
From the two formats, we will be validated by Structured Data of Google Webmaster and validator.w3.org.
As you know that in microdata schema uses publisher as one of the itemprop, therefore, in body tag or in html tag should be like this:
<body itemscope="" itemtype="http://schema.org/Blog">
*) that's it when your site type is a BLOG.
(Love this forum) tina-andrew-blog
NB: I found this: https://productforums.google.com/d/msg/webmasters/lciIK8HdJXE/kcv8EipRzzcJ
But, I do with the code above, It works well :(
Related
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
We use 'hreflang' tag for the replacement of our website language, As I have set up the 'WEBSITE . And under the head, I have used
<link rel="alternate" href="https://www.example.com/" hreflang="hi-in" /> tag,
And for my canonical tag I have set my homepage,
If I check in my homepage URL tool, I do not see any errors and if I check the URL of my website post, Let me see the error of tool Missing return link and Self-referencing,
I want to establish the contents of my website in Hindi. But I use keywords in the post in English,
<html lang='en'>
<head>
<link rel="alternate" href="https://www.example.com/" hreflang="hi-in" />
<link expr:herf ='data.blog.url' rel='canonical'/>
</head>
<body>
</body>
</html>
The self-referencing tag is missing, Return tag link is missing,
I want to show a hyperlink <a /> component under a html tag and then do some instructions onClick="#command('')" :
<zk>
<html>
<a label="show me" onClick="#command('showMe')" />
</html>
</zk>
but the componet won't show.
I tried adding <zk xmlns:zk="zk" xmlns:z="zul>" and then <z:a> and <zk:a> but it didn't work.
--->If I remove the <html> tag the component appears.
Don't ask me why the html tag I just need to use it or I'll change a lot of things
Do you need the <html> tag to be rendered in the output HTML ?
Maybe try the native namespace :
<zk xmlns:n="native">
<n:html>
<a label="show me" onClick="#command('showMe')" />
</n:html>
</zk>
But it may not keep the <html> tag in the rendered HTML.
I think you have to go with the XHTML Component Set (be aware that as stated in the documentation it has some limitations and lower performances, you should use it only if there is no better way).
Your code would be something like :
<html xmlns:zk="zk" xmlns:z="zul">
<a label="show me" zk:onClick="#command('showMe')" />
</html>
If your file extension is .zul, it will automatically generate <html>, <head>, and <body> tags so it may not help. But if you want to control it by yourself, use .zhtml, .xhtml, .html or .htm file extension.
You also cannot use the HTML component (<![CDATA[ ... ]] notation) as it will replace the <html> tag with a <span>.
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>.
I was hoping that someone may know how to resolve this HTML5 validation error. When I try to validate my page: http://blog.genesispetaluma.com using http://validator.w3.org, it gives me the following error code:
Error Line 90, Column 63: An body start tag seen but an element of the same type was already open.
<body class="home blog single-author two-column right-sidebar">
I interpreted this error to mean that I have two body tags in the code. However, I have searched everywhere and can only find one <body> (the one referenced by the error) and one </body>. Can anyone please tell me how to resolve this error?
I had a similar problem but with <head>, giving the following W3C markup error:
A head start tag seen but an element of the same type was already open
I had this code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
When it was supposed to be:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
I knew that was wrong but it's hard to spot sometimes, as you're just so used to the header code being correct 99% of the time. I obviously cut n pasted some code and that ended up in the wrong place.
This isn't specific to your question, I know, as your error relates to the <body> tag, but this is the kind of thing you're looking for. Maybe you have a <link> or <meta> tag in your body somewhere, that's meant to be in the <head>. Without seeing your code, it's hard to give you a perfect answer.
Possibly it's because:
<div id="wrapFix">
<div id="drawLogo1">
<div id="drawLogo2">
<img src="http://genesispetaluma.com/img/logoNew.png" alt="Genesis Fitness G stylelogo">
</div>
</div> <!-- end of drawLogo1 -->
Is between your closing head tag and opening body tag. I.e. lines 81-87
One of the widgets (the facebook like button I believe) you're using is inserting HTML into the page and part of that HTML is a body tag. Not sure if there's anything you can do about this, but I think that's what's throwing the error. Looks like this:
<body class="plugin transparent_widget ff4 win Locale_en_US">
</html>
</iframe>
I got this error:
A head start tag seen but an element of the same type was already open
I read this post and then i noticed my tag listed before the head like this.
<title>Home</title>
<head>
</head>
it should have been
<head>
<title>Home</title>
</head>
It happens in below said scenarios as per my knowledge -
When you mistakenly choose <head> thinking <header> tag.
When your <header>, <nav>, <section> or <footer> tag(s) are outside of <body> tag.
So, after creating your page, you can validate these changes here.
I got the same error message : check out if any body-inside <element> is displayed between the <head> and <body>, like said above.
My error was caused by a <div> tag, with absolute position, to display some page information during the development - simply a line on a false position in the code.
Hi in my case hgroup tag is the reason why I'm having validation error I, remove this tag from head tag and put it inside after body tag after this the document is now valid.
Just for the record, I had exactly the same problem and it seems that including some php files within the head element was strangely giving the problem, even if the view-source of Firefox was not printing such php code nor tags
<head>
<? include("./file.php"); ?>
<title><? echo $title ?></title>
</head>
solved using:
<? include("./file.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title><? echo $title ?></title>
</head>
<body>
...
...
If Your problem With head and body both are show validate error just remove displaying text from head and keep it in body..
I have been faces the problem recently.
For Example You have text to display in header inside head just remove header from head and keep it in body ......Problem solved...Thanks
In my case it was the facebook tag
<div id="fb-root"></div>
which was inside the page's <head>.
Moved that to the <body> of the relevant page (not required globally) sorted it. So yes, the answer supplied above by Emil H was correct.
Also bear in mind, if you copy/paste your code from things like slack, etc. they will have 'special characters' for formatting (that are usually invisible) which may cause that issue.
Here is a video to demonstrate: https://drive.google.com/file/d/1OJS15zmSvzhVXVLcQGGhePZGNCxWHocN/view
This error can happen if you put into <head> tag that restricted to be there. For example:
<head>
<audio preload="auto" class="menu-beep" id="sound-01">
<source src="sound-01.mp3">
</audio>
</head>
In this case, the tag will be immediately opened in the browser memory. But later the browser will find the body tag that opens the page. This is how it turns out that there is a second body tag.
I had similar problem with <head> tag. I use https://validator.w3.org
Look at few examples how to solve this problem:
<script> should be inside <head>
css should be inside <head>