Does the <title> element need to be in the <head> element? - html

I don't have access to update the title element for many of the pages on my site (a limitation in the e-commerce software I'm using) and I'm wondering if the <title> element can be placed within the <body> element.

This is what the W3C has to say about it:
7.4.2 The TITLE element
Every HTML document must have a TITLE element in the HEAD
section.
So no, you can't put the <title> tag inside the <body> tag.
Contact the developer(s) of said e-commerce software and see if there's a way to change the title of the page, either through the HTML directly or through the administration user interface of the e-commerce software. If you can't, get a different e-commerce software solution.

No. It can't be, doubly so if there's already a <title> tag in <head>. If you don't have access to the <title> in <head>, you need to get access.
If you absolutely can't, and there's not already a <title> tag, some tests reveal that it will work in <body>. However, you shouldn't do this - it's invalid markup.
An alternative is to do it using JavaScript placed in the <body> (which you shouldn't do, again):
<script type="text/javascript">
(function() {
function load() {
document.title = 'The new title';
}
if(window.addEventListener) {
window.addEventListener('load', load, false);
} else if(window.attachEvent) {
window.attachEvent('onload', load);
}
})();
</script>
That's only a last-ditch "alternative," though.

The title tag has to be in the head tag.
HTML spec:
"Every HTML document must have a TITLE element in the HEAD section."

Related

Trying to understand the head tag in html

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

Can I put an entire HTML document in a template?

I want to store an entire HTML document to put in an iframe (srcdoc) later.
Am I allowed to put everything in a template including the html, head and body like this?
<template>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>Content</main>
</body>
</html>
</template>
If not, what's the best way to store an entire document? Thanks!
Unfortunately, the template tag is not allowed to contain <html> tags. per 4.1.1 of the HTML specification:
Contexts in which [the <html>] element can be used:
As document's document element.
Wherever a subdocument fragment is allowed in a compound document.
and from 4.12.3, the <template> tag does not provide either of these contexts. For the same reason, you can't use <head>, <body> or <title> tags either. Chrome and Firefox both actively strip out the invalid tags from the <template>, preventing you from using it.
The best way of storing HTML for use in iframes is to put the HTML code in a different file in your web server.
However, an acceptable alternative is to store the HTML inside your <iframe>, then populating the srcdoc attribute with the content.
<iframe id="yourIframe">
<!-- Everything inside here is interpreted as text, meaning you can even put doctypes here. This is legal, per 12.2.6.4.7 and 4.8.5 of the HTML specification. -->
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>Content</main>
</body>
</html>
</iframe>
...
<script>
...
const iframe = document.getElementById("yourIframe");
iframe.srcdoc = iframe.innerHTML;
</script>

CSS in head over adding an id

I am working on responsive website that has 100's of pages. It is implemented using a CMS. The problem is, I need to apply some styling only for homepage.
It is a bit cumbersome to add a class or id in the CMS for one page as it uses templates to render pages.
I've added the css in the head section. The reason why I don't want to add in external file is beause the same id might be used on some other page.
Is adding CSS in head section a bad practice in this case.
<head>
<style>
//my css
</style>
</head>
<body>
</body>
Thanks
It's perfectly fine to have inline CSS. Whether you should use inline CSS or simply set a unique ID for the page depends on the complexity and flexibility of the CMS you're using. Using inline CMS just means that you'll have to update the CSS from each individual page, rather than from a single source for all separate pages.
As for your second point, adding CSS to the head in a <style> tag is not bad practice. In fact, <style> is required to be a child of <head> in order to validate correctly. According to the HTML 5.2 specification, <style> can be a child of any element as long as it it scoped, though at the present date, Firefox is the only browser that can use the scoped attribute.
On top of this, using a <style> tag in the <body> could lead to a flash of unstyled content due to the way in which the page gets loaded. So if you use inline CSS, always do so in the head to both validate correctly, and improve user experience :)
Hope this helps!
In a word yes. For reasons of maintainability. You would be better using the cascading nature of css to target a style specific to a specific page than to have lots of inline styles.
For example, consider:
<body class="my-page">
<h1 id="myId">Title</h1>
<body>
<h1 id="myId">Title</h1>
h1#myId{ font-size:12px; }
body.my-page h1#myId{ font-size:14px; }
the latter style will have precedence. h1#myId would be global, yet on a specific page you can override this style. Is there no way to work out what template is in use, and adjust the body class?
If your CMS uses say PHP...
You could detect if you're in homepage and than call your custom external stylesheet, something like:
<?php
$page = $_SERVER["REQUEST_URI"];
$isHomePage = $page==="/" || $page==="/index.php" || $page==="";
if( $isHomePage ) {
echo '<link href="homepage.css" rel="stylesheet" type="text/css" />';
} else {
echo '<link href="style.css" rel="stylesheet" type="text/css" />';
}
?>
</head>

What are the drawbacks of ignoring <html> and <body>

Is there any drawback to never using
<html> and <body>
on your web pages that are written in HTML and PHP?
I mean, everything works perfectly fine with it or without it, so why use it?
They are explicitly optional in the spec (so the document will still be valid).
This has been true since the original spec (which says <!ELEMENT HTML O O (( HEAD | BODY | %oldstyle)*, PLAINTEXT?)>, O O meaning Start Tag Optional, End Tag Optional) through to the current spec (which says "An html element's start tag can be omitted if the first thing inside the html element is not a comment. An html element's end tag can be omitted if the html element is not immediately followed by a comment.").
They are only mandatory in XHTML since XML has no concept of optional tags.
I've never seen any browser or user-agent fail to handle them correctly in an HTML document. (Note that while the tags are optional, the elements are not, so browsers will insert an HTML, HEAD and BODY elements even if the tags are missing, so any script which tries to find them in the DOM will still work).
The only technical drawback is that you can't put attributes on tags which aren't there, and a lang attribute for the HTML element is useful.
Leaving them out can confuse other people who have to maintain your code who don't know that the tags are optional though.
Both <head> and <body> tags are optional in HTML5. In fact it is recommended by Google's HTML style guide to not use them:
<!-- Not recommended -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
By not using those tags, some drawbacks include:
that it is drastically different from what is typically learned for developers, so it may cause some confusion.
a restriction that a comment cannot be immediately after the <html> tag that is omitted.
Reiterating the optional nature of the tags from the spec:
An html element's start tag may be omitted if the first thing inside the html element is not a comment.
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
See:
https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags
https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
If you do not use <html> and <body> than your HTML document will be not valid, some libraries/plugins may not work too.

Does Window-target meta tag work for busting frames?

Does adding the followin tag in the header section of a html document prevent the loading of the document within a frame? If so, why does anybody bother with Javascript methods?
<META HTTP-EQUIV="Window-target" CONTENT="_top" />
Better use the BASE element instead:
<base target="_top">
But that does not prevent the document to be loaded inside a frame. It only will force all links to use the target _top as default target if not otherwise specified.
But if you want to prevent the document to be loaded inside a frame, try this JavaScript code:
if (top != self) {
top.location.href = self.location.href;
}
It seems that browsers don't support <META HTTP-EQUIV="Window-target" CONTENT="_top" /> meta tag anymore, they simply ignore it. So that's why people bother with using JavaScript, as Gumbo suggested.