I have 2 <head> tags in one web page. Reason is that I used to have the header, the content and the footer views loaded separately, so I left 1 <head> in the header view and another in the content view.
What's the effect of this? If it's not compliant with html standard, then should I get rid of all extra <head> and only leave 1 in 1 page?
This is what HTML looks like:
<!DOCTYPE html>
<html>
<head><!-- The *required* head -->
<title>The *required* title</title>
</head>
<body><!-- The *required* body -->
Stuff
</body>
</html>
Don't do anything besides that - that includes using two head tags. I think what you want is iframes.
Here's specifically what happens, when an HTML5-compliant browser parses a document with two head elements:
gets to the first </head> tag: The "after head" insertion mode
encounters the second <head> tag: "Parse error. Ignore the token."
encounters some other tags, e.g. <meta>: Parse error, but it basically adds the tag to the previous head element.
encounters second </head> tag: "Parse error. Ignore the token."
So what does this mean? It is a parse error to have multiple heads. However, the standard is clear on what should happen in this case. It does the "right" thing and merges the them.
I should also point out that <head></head> tags are optional. You can leave them out and have no parse errors.
Related
I am new to HTML and started with my first lesson.
I am unable to understand the head tag clearly and need help to understand it clearly.
As I read about the head tag, it says "The head of an HTML document is the part that is not displayed in the web browser when the page is loaded."
However when I try in my lab exercise with the below code in my html file, the content inside the h1 tag that is within the head tag is displayed in the web browser, which is confusing me as I was expecting that, whatever I write inside the head tag will not be displayed in the browser, as per what I read. Can someone give me clarity on this.
<!DOCTYPE html>
<html>
<head>
<title>First Lesson</title>
<h1>Hello World!</h1>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Modern HTML is very tolerant. You can now get away with not closing tags, or even no tags at all (remove the <h1> tags and "hello world!" will still be displayed) You could put the <title> in the body and it will still be displayed in the browser tag.
Although it still works, it is incorrect and fails HTML markup validation.
Any of the tags that meant to be in the head <title> <style> <base> <meta> etc. Won't be displayed on the page.
Html tag head contains machine-readable information, which not displayed, like metadata, scripts, styles. He also inherits all of the properties html element and browser parse him, like common html tag. More information: link, link
So, during the DOM building step when the tokenizer is creating tokens from HTML document. How does it handle unclosed tags?
Let's say I have the following HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<div>
<h2>World</h2>
</body>
</html>
How does the <div> will be handle by the tokenizer?
It's there a standard for every browser to fix this?
Yes, there's a standard. Section 8.2 of the HTML5 specification covers this.
But it depends on the elements that are unclosed. Sometimes elements are just closed automatically when other tags are encountered. In other cases, elements are closed and then reopened after the out-of-sequence tag. And in other cases, tags may be ignored completely.
In the specific case, you provide, the div element is created and added to the DOM as a child of the body element when the start element is encountered. The H2 element is created and becomes a child of the div element. The missing close div tag has no effect, the close body and close html tags do not change the DOM and then parsing stops.
The close body tag will indicate that a parse error has occurred, but browsers don't usually do anything if a parse error is detected.
(Note that missing tags are issues for tree construction, and not the tokenizer.)
I'd like know if having the title tag positioned at the end of <head> tag or in any other position, always inside the <head></head>, can lead to some kind of problem, I'm not talking about SEO stuffs, I'm talking about standards, browser rules, web application rules, or something like this.
I'd like to load a page from two different php file like this, is it a wrong way?
<!-- file1.php -->
<html>
<head>
....
<!-- file2.php -->
<title><?php echo($var)?>
</head>
<body>
...
<head> tag is not closed, because with e second file I dynamically add the <title>
tag
The title must be in the <head>
If you use non-ASCII in it then it really should be after any <meta> that specifies character encoding.
Since it is important, it is probably a good idea to put it near the top of the <head> so it gets picked up by tools that only grab the first $n bytes of the document.
If I want to redirect to another page in my HTML file, do in have to place the meta tag in the head or can I place it at the top of the file before the DOCTYPE? Thank you.
You can't place a meta tag above the DOCTYPE. The DOCTYPE must always be the first element in an HTML document, and meta tags must only be placed in the head.
Documents must consist of the following parts, in the given order:
Optionally, a single "BOM" (U+FEFF) character.
Any number of comments and space characters.
A DOCTYPE.
Any number of comments and space characters.
The root element, in the form of an html element.
Any number of comments and space characters.
Source: http://www.w3.org/TR/html5/syntax.html#writing
For purposes of this question, the spec says that a document must start with a DOCTYPE and be followed by a root html element. While a meta tag might still work, there is no guarantee of it doing so today and continuing to do so in the future.
The meta tag has to be inside the <head></head> section. You can not add anything before <!DOCTYPE html>
Here is detailed description of DOCTYPE
W3C deprecates the use it, but they do offer an example on W3C:
<HEAD>
<TITLE>Don't use this!</TITLE>
<META http-equiv="refresh" content="5;http://www.example.com/newpage">
</HEAD>
<BODY>
<P>If your browser supports Refresh, you'll be transported to our
new site
in 5 seconds, otherwise, select the link manually.
</BODY>
GIYF: H76: Using meta refresh to create an instant client-side redirect
You should insert the following line in the head section of your HTML page, replacing http:example.com/ with the actual web page to which you want to redirect your viewers:
< meta http-equiv="refresh" content="2;url=http://example.com/" />
Here is an example with the correct line inserted in a typical HTML page. Note that it comes above the title tag.
<html>
<head>
<meta http-equiv="refresh" content="2;url=http://example.com" />
<title>Page Moved</title>
</head>
<body>
This page has moved. Click here to go to the new page.
</body>
</html>
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>