Right after my <body>, as part of the header I add to each page, is my site's logo. This <img> is within an <a> tag, pointing to my index page.
Here's what W3C validator
Line 21, Column 38: document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
(I would past the rest of the message, but the html tags in it get messed up, I don't know how to escape them within a blockquote).
What's the proper place to put an logo? Logically, it's not within a division. Making a blank container element seems rather silly.
Local source:
...
<body>
<a title="Home" href="index.html"><img src="images/logo.png" id="logo"/></a>
....
Complete source: http://pastie.org/5998955
That error is error is referring to you placing an inline block element, without a container block.
You'll have to do something like this to get it valid:
<body>
<div><a title="Home" href="index.html"><img src="images/logo.png" id="logo"/></a></div>
The error clearly states this, and even suggests what tags you can use to correct the issue.
If you want to use XHTML, then you're going to have to wrap inline elements in block elements to validate.
You could use HTML5 to do what you're doing and have it validate (but you'll have to add alt attributes to your images).
Pastie: http://pastie.org/5998964
Your problem is not "where to put the site's logo", your issue is malformed HTML based on the doctype you have specified in your head section.
A is an inline tag and needs to be wrapped by a block-level tag such as P or DIV.
Related
I'm new to html, I try to put a link("a"), a text "b", and a link "c" together in the same line. Here is my code.
<a class = "fixed" href="/a/">linka <span> b </span> <span> linkc </span> </a>
But I got some errors, like:
Start tag "a" seen but an element of the same type was already open.
error: End tag "a" violates nesting rules.
error: Stray end tag "span".
error: Stray end tag "a".
I try to get rid of nested , but the linkC would not show up. How to fix this error?
This error ish happening because you have a <a> tag nested within the first <a> tag, which is not allowed in HTML. To achieve the layout you're looking for, you can use a different approach that doesn't involve nesting <a> tags.
One way you could fix this is to use a container element, such as a <div>, to wrap all the elements together.
Example:
<div class="fixed">
linka
<span> b </span>
linkc
</div>
I tried to validate my HTML code but I got this error:
Line 157, Column 22: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag <div class="details">
The mentioned element is not allowed to appear in the context in
which you've placed it; the other mentioned elements are the only ones
that are both allowed there and can contain the element mentioned.
This might mean that you need a containing element, or possibly that
you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
but I cant see any mistake in my code, so I am asking for help...
<!--Bar 3-->
<div class="mosaic-block bar3">
<a href="http://www.desktopped.com/featured/2010/09/multi-d isplay-setup-with-four-systems-and-a-whole-lot-of- screen-space/" target="_blank" class="mosaic-overlay">
<div class="details">
<h4>Multi-Display Setup With Four Systems, A Wall of Screens, And 64TB Of Storage</h4>
<p>via Desktopped</p>
</div>
</a>
<img src="http://buildinternet.s3.amazonaws.com/projects/mos aic/64tb.jpg" alt="fotka1"/>
</div>
Blocks can't be placed in inline elements. In this case a is inline, and div is block, so <a><div></div></a> is invalid HTML.
this is the page - http://www.class-a-studio.co.il/contact.php
Column 23: document type does not allow element "LINK" here
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
i dont no what to do...?
As per the HTML 4 spec, the <link> element is only allowed inside the <head> element in your document. Perhaps you mean to use <a> element here?
<div class="buttons">
<a href="#" class="link1"
onclick="document.getElementById('form').submit()">
<em><img src="images/formB.jpg" alt="שליחה"></em>
</a>
<link href="tenks.php">
</div>
Perhaps needs to be
<div class="buttons">
<a href="#" class="link1"
onclick="document.getElementById('form').submit()">
<em><img src="images/formB.jpg" alt="שליחה"></em>
</a>
tenks
</div>
Hi Everyone,
i am try to use the image mapping in HTML 4.01 Strict,but the w3c validoter give me the error of map not supporting,
my code is look like this
<img id="link_image" src="images/livechat.png" usemap="#Map" alt="The chat link" />
<map name="Map" id="Map" class="newWindow link-chat" ><area shape="rect" coords="79,3,521,67" href="#" alt="The chat link mapping" /></map>
Give the following error,
Line 57, Column 54: document type does not allow element "MAP" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
Map cannot be placed inside the body tag, place it inside div instead (or one of the alternatives in the error message), like so:
<div>
<img id="link_image" src="images/livechat.png" usemap="#Map" alt="The chat link" /
<map name="Map" id="Map" class="newWindow link-chat" ><area shape="rect" coords="79,3,521,67" href="#" alt="The chat link mapping"></map>
</div>
You also need to remove the unnecessary map short tag as previously suggested in the other answers.
Remove the spurious “/” characters (before “>”) or change your document to use XHTML, where they are allowed (and required).
Technically the issue is that by the SGML rules, “/” terminates the tag and the “>” character is then content data, which is diasllowed inside a map element. And by asking for HTML 4.01 validation, you are asking for the SGML rules to apply (even though browsers don’t apply them).
The validator first issues the warning message “NET-enabling start-tag requires SHORTTAG YES”, which is admittedly cryptic, but it is a clue to understanding what really happens. The full story, to those interested in the theory, is in Empty elements in SGML, HTML, XML, and XHTML.
An error for sure is due to the presence of both / at the end of <map> opening tag and the closing </map> tag placed after.
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>