I post this question because I'm having some errors with the w3c validator in my page (Link to validation).
It outputs me a lot of strange errors related with my HTML 5 markup, being this the main error I can't get out of my head:
Line 15, Column 6: An body start tag seen but an element of the same type was already open
I have looked a lot into this problem and I'm not able to find any solutions.
Although there are more strange errors, such as
Line 14, Column 7: Stray end tag head
I'm specially interested in the first exposed one, which I would like you to help me solving this.
Thanks in advance!
Problem solved:
Conclusions:
Never display data into the <head> tag, otherwise, a body tag will be automatically opened.
The <noscript> tag content is considered by the validator as displayable, so It's convenient to take care of what we write into the tag.
The noscript element in the head element contains text output. This is not allowed in the head element; noscript in the head element may contain only link, style, and meta elements (see the spec). Any displayable content implicitly closes the head element and opens the body element (because of their content models and the fact that both opening and closing tags for them are optional).
Related
My website allows users to embellish their text with simple HTML tags like <b>, <i> and a small handful of other reasonably innocuous tags. All other tags are disallowed (disabled programmatically by replacing the "<" character with < when the input form is processed). User's uploaded text is interspersed on the resulting page. For example, as captions on images. For the most part, this works out well.
Problem arises when user forgets to terminate, say, italicized text with the closing </i> tag. They seem to survive past the end of <span>, <div> and <td> elements. An unclosed <i> causes all text in the rest of the page, user or system text, to be italicised.
I don't look forward to writing code to parse the text to keep track of tags and close them if the user forgot. My question is: does HTML5 have a simple way to declare that any open tag is now closed going forward?
N.B.: A decade ago IE and Chrome were autoterminating unterminated formatting tags at the end of each </td>. Not any more.
Unfortunately, if a tag is left open, it can cause problems with the rest of the code. This is because when reaching massive amounts of code, or nested tags, it would be impossible to determine what and where exactly the developer would want to place the closing tag automatically.
To handle this, you can use an IDE like Atom (good for beginners), VS Code, or Sublime, so while typing in the tag, you can press enter or tab to automatically create the opening and closing ones.
You can use Intellij idea IDE. If open tag is created by user closing tag will generate automatic by IDE(Intellij idea).when you press the tad button closing tag is automatically generate the closing tags.
In many of the articles imported from my development feed to Facebook Instant Articles I get the error "The HTML element does not contain any text: Avoid including empty HTML elements." It seems to be related to images in figures with no other content. Can anybody tell me what it is Facebook's complaining about? My markup seems to conform to Facebook's own example of a simple image inside a figure tag, so what's the problem?
Turns out the Facebook parser doesn't like a <p> tag wrapping an element if there's no text in it. When I edit one of the articles highlighted with the yellow warning icon in the Facebook code editor, there's an empty <p></p>:
When I delete the empty element the error warning remains in the code view. But this is just a glitch in the code editor. You can't always rely on the error highlighting in that. (That explains why there's a code error warning in the pic in my question even though I'd deleted the <p>.) In the article list the warning icon disappears:
And FB publishes the Instant Article.
You will also get this error if your markup contains stuff like <p><img src="..."></p>. FB expects all <p> tags to contain text.
Maybe try closing the <img > tag:
<figure>
<img src="https://test.files.wordpress.com/2015/07/selleck1.jpg?quality=60&strip=all />
</figure>
It could be that Facebook simply strips invalid XML (!), resulting in observed error message.
In the example at
https://developers.facebook.com/docs/instant-articles/reference/image
the - yet self-enclosing - <img> tag is closed (as in XHTML, rather than less restrictive HTML5).
PIA for wordpress sites, all it's content comes between tags and this eventually generates one <p> empty <\p>. For this you need to go through your post content and remove all these empty tags.
Just open the warning marked article in edit mode in and update. It will fix.
Im working with some legacy code that generates a given message on a webpage but surrounds it with a <pre> tag - I was hoping to put a link (anchor tags) within it like this:
<pre>User created successfully - <a href='/View/User/17'>click here</a> to view the users profile</pre>
But I think because its a <pre> tag it ignores tags within it. Is there any way around this?
APOLOGIES
Im really sorry to have wasted everyone's time - the reason why it was happening was due to the fact that I was using ModelState.AddModelError (in ASP.NET MVC) to set the error message, which automatically HTML encodes the message you give it (I used Chrome's element inspector which shows the HTML decoded version, hence the confusion)
Phrasing content (such as <a>) is allowed in <pre>.
References:
W3C: The <pre> element
I'm trying to set up a Like Box in this website: http://filmefilmes.com/breu
The Facebook Page of the site is: http://www.facebook.com/pages/BREU/278537375497440
I have tried all methods. iFrame, FBML, etc.
When you click the "like" button it returns a Error that says the page can't be reached.
When I pass the site on the debugger the error is:
You have < meta> tags ouside of your < head>. This is either because
your < head> was malformed and they fell lower in the parse tree, or
you accidentally put your Open Graph tags in the wrong place. Either
way you need to fix it before the tags are usable.
Which is incorrect because the tags are obviously inside the page's head.
And i get this warning too:
The og:locale property should be explicitly provided, even if a value
can be inferred from other tags.
I have to deliver this website very soon and I've spent some hours trying to correct this and to find solutions in forums etc.
As I have changed methods I believe the error is somewhere in the markup of my page but I don't really have a clue.
Help will be heavily appreciated, thanks.
Having a quick look at the site I can see you DO have <meta> tags outside of the <head> element, these are inside a second <head> tag further down the page.
Check your facetek div.
few of your meta tags are unclosed. ("/>")
thus, closing within them is parser error.
fix it and it should go fine
I've been editing a lot of HTML pages with basic text editor, notepad.
When I went to validate them the validation service is saying there's a div tag that is not closed. I tend to find automatic error reports such as these don't tend to be too reliable, i.e they will give you a line number and the error but often times the error is actually in another part of the file entirely.
I'm just wondering if there is a way to find the closing tag for an opened HTML tag. For example, you click on a tag then click a shortcut, and the program will jump to the closing tag. I know this functionality is in homesite, but I don't have homesite, and its a bit of a bulky program anyway.
To sum up, I would like to know how to find html tags that don't have closing tags.
If you save your HTML as page.xhtml (instead of page.html), the browser (Firefox/Chrome or Opera) should find the un-closed tags for you without the need for a validator. Just remember to rename them .html before serving them online - IE doesn't support .xhtml files yet.
Edit (3 years later): This post's still getting comments/upvotes so a slight amendment. IE9 and IE10 do now support xhtml files.
Use the firefox view source - wrong code will be in different color
Notepad++ - never had any problems with it and also never had any unclosed html tag with it.
You can just click on any element and see if it has a closing tag. Also you can do this: click on "TextFX"(left from plugins in navigation) -> click on "Text FX HTML Tidy" -> click on lets say hmm "TiDy clean Document - wrap". That should fix your html document, aka close all unclosed elements.
http://validator.w3.org/
Does more than just unclosed tags. Should be used by all front-end developers, IMO.
I am using two online-tool, which work very fine.
jona.ca and tormus.com
CSE HTML Validator Lite is a free lightweight editor (for Windows) that will check your HTML (just press F6) and find missing end tags and other problems. You can also press Ctrl+M on a start tag or end tag and it will take you to the matching start or end tag.
A simple online service that will also do this (and more) is OnlineWebCheck.com. There are other online services but in my opinion the one I just mentioned is the simplest one to use and understand.
Full disclosure: I am the developer of CSE HTML Validator Lite and http://www.OnlineWebCheck.com/ which is based on CSE HTML Validator.
If your code is very messy, not prettified nor indented, v.Nu (as seen at https://validator.w3.org/nu/) will often get confused (for instance if there's an extre closing tag, it may not manage to select the one which is really wrong).
One solution is code folding: by collapsing all the code which is marked as a child of a certain node, you can often easily spot some incorrect hierarchy.
An example of editor which supports code folding is Kate editor: see the arrows on the left in their screenshot.
free lightweight html editors ... online html validation services that can highlight unclosed tags?
Use linter-vnu.
linter-vnu is a package for the Atom editor that uses the Nu Html Checker (v.Nu) to validate HTML or XHTML documents.
Disclosure: I am the developer of linter-vnu.
linter-vnu uses another Atom package, linter, to integrate v.Nu and Atom.
For example, if you open the following test.html file in Atom:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML document</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>
(with a deliberately missing closing </div> tag)
then Atom (or rather, linter-vnu, thanks to linter and v.Nu) displays the following error messages:
Unclosed element “div”. at line 8 col 1 in test.html
End tag for “body” seen, but there were unclosed elements. at line 10 col 1 in test.html
and marks those lines in the editor with red dots.
If you click the "at..." (hyperlinked text) in the error message, the editor insertion point moves to the corresponding line, and a popup appears under the line, with the error text ('Unclosed element "div".').
If you save your HTML document with the file extension .xhtml, and open it in Atom, then v.Nu validates your document as XHTML (XML) rather than HTML, with slightly different messages. In this case, just one error message:
required character (found “b”) (expected “d”) at line 10 col 3
where line 10 contains the closing </body> tag. v.Nu was expecting a </div> tag instead; it was happy with </ - it was expecting a closing tag - but it was expecting the element name to begin with "d" for "div", not "b" for "body".
I make the following claims, as of November 2016:
v.Nu is the best option for validating (X)HTML(5).
linter-vnu is the best option for interactively harnessing v.Nu in an editor. linter-vnu itself is trivial; it's just a few lines of "glue" code. What makes it the best option is the Atom editor and the Atom linter package.
I welcome counterclaims and questions about these claims. I'd be happy to be proven wrong and be shown something better. Especially if, like v.Nu and linter-vnu, it's free.