A little Question from my side. I'm working on a new internal Webpage at my Company which should be optimizied for Internet Explorer 9. So far I have to following HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Intranet</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
nav
</div>
<div id="content">
content
</div>
<div id="content_shadow"></div>
<div id="right">
<img src="/gfx/logo.png" alt="alt" title="title" class="logo" />
</div>
<br class="clear" />
</div>
</body>
</html>
For any reason Internet Explorer shows me the symbol that there are compatibility issues in my side, when I click on it there's not really a change at all but I'm just wondering why the compatibility icon apears? Is there something wrong at my code?
Thanks for your help
Intranet sites by default are loaded in compatibility mode by default.
You need to use a X-UA-Compatible meta tag to achieve what you want in intranet sites without change IE settings.
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Since you making it compatible with IE9 looks like you are using many Web Standards. So I reccomend you say do IE to use the newer engine available instead of just fix it to IE9:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
In this case if you are using IE10 or IE11 (currently in preview) it will use their best engine instead of always IE9.
More information about Specifying legacy document modes.
Probably because you have not explicitly defined the page compatibility.
Go through this link
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
It will explain you how to explicitly define it.
Also read this answer. It explains it very well
Why does IE9 switch to compatibility mode on my website?
For intranetsites you need the following meta tag to display the site correctly:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
or if you don't want to force IEs > 9 degrade to IE9 view, then use:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Related
To prevent some browsers to translate certain term on a HTML page, I use the class="notranslate" class name in a wrapping tag.
It works fine for Google Chrome with its built-in Google Translate plugin.
But it doesn't work with Microsoft Edge.
According to their documentation, it should.
I also tried the translate="no" property on the tag, without any success.
Any idea how to solve this?
If not, I would like to prevent auto-generated translations on Edge, but not on the other browsers.
You can try to add this line inside <head></head> to disable automatic translation in browser:
<meta name="google" content="notranslate" />
I've tested and it can work well in Edge and Chrome.
Edit:
If you only want to restrict automatic translation in Edge only, you can add the <meta> tag dynamically. You can first check if the browser is Edge, if yes then add the tag. You can refer to the following JavaScript code:
<script>
if (window.navigator.userAgent.indexOf('Edg') > -1) { //detect if Edge browser
var meta = document.createElement('meta');
meta.name = 'google';
meta.setAttribute('content', 'notranslate');
document.getElementsByTagName('head')[0].appendChild(meta);
}
</script>
The google tag for not translating the page has been updated to
<meta name="googlebot" content="notranslate">
For more info check this link: https://developers.google.com/search/docs/crawling-indexing/special-tags
This worked for me in Safari, Edge, and Chrome:
<html class='notranslate' translate='no'>
<head>
<meta name="google" content="notranslate" />
<meta name="robots" content="notranslate">
...
</head>
<body translate="no" class="notranslate">
...
</body>
</html>
Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?
I just made a website for a french restaurant. The website is in english, but I guess there is enough french on the website (labeled pictures of menu items) to prompt the visitor to translate the website if using Chrome.
Is there something I can add to the html to prevent chrome from asking to translate the page? I'd assume it'd be something like <html lang="en"> but that doesn't work.
Any ideas?
Thanks
New Answer
Add translate="no" to your <html> tag, like so:
<html translate="no">
MDN Reference
Old Answer
(This should still work but is less desirable because it is Google-specific, and there are other translation services out there.)
Add this tag in between <head> and </head>:
<meta name="google" content="notranslate">
Documentation reference
So for the ultimate solution I made;
<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">
<head>
<meta name="google" content="notranslate" />
</head>
<body>
...
</body>
</html>
This worked for me.
The meta tag in the <head> didn't work for me, but
class="notranslate"
added to a parent div (or even <body>) did work and allows more precise control of the content you don't want to be translated.
Solution:
<html lang="en" class="notranslate" translate="no"> <!-- All translators -->
<head><meta name="google" content="notranslate" /> <!-- Just for google -->
</head> <!-- Close head -->
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
// Just for instructions
// Do not copy or paste
console.log("The first div don't alows translateing. But the second, alows it.")
console.log("Open the translator and see the efect.")
DIV1
<div translate="no">
Try translating me!
<b>Olá - Hello - Hola</b>
</div>
<hr> DIV2
<div translate="">
Now, you can do it!
<b>Olá - Hello - Hola</b>
</div>
Note that this example has some problems with the StackOverflow viewer.
Disclaimer: This answer is repeated, on it is on the Community Wiki.
Disable google translate on your website
Add this to your <head></head>:
<meta name="google" content="notranslate" />
Add this in your <head>:
<meta name="google" content="notranslate" />
and change your <html> tag to
<html lang="en" class="notranslate" translate="no">
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
/* Just some basic styling */
div[translate] {
width: 50%;
border: 1px solid black;
padding: 20px;
border-radius: 7px;
text-align: center;
font-family: Arial;
}
<div style="display: flex;gap:20px;">
<div translate="no"> <!-- Disables translation -->
Enabled<br>
<b>Olá - Hello - Hola</b>
</div>
<div translate> <!-- Enables translation -->
Disabled<br>
<b>Olá - Hello - Hola</b>
</div>
</div>
Note that this example has some problems on the stackoverflow viewer.
The google tag for not translating the page has been updated to
<!-- opt out of translation features on all search engines that support this directive -->
<meta name="robots" content="notranslate">
or
<!-- opt out of translation features on Google -->
<meta name="googlebot" content="notranslate">```
For more info check this links:
https://developers.google.com/search/docs/crawling-indexing/special-tags
https://developers.google.com/search/docs/appearance/translated-results
Moreover, I had to update this because it was not working on Edge browser by using only translate="no" as below:
<html translate="no">
So for a full solution as mentioned here too, i had to do something like this to not translate anything from search engines
<html lang="en" class="notranslate" translate="no">
<meta name="robots" content="notranslate" />
...
</head>
FYI, if you want something that will work for all content in your site (including that which is not HTML), you can set the Content-Language header in your response (source) to the appropriate language, (in my case, en-US).
This has the benefit here is that it will "disable" the offer to translate the page for you (because it will know the source language correctly), but for other, non-native readers, they will still have the option to translate your site into their own language, and it will work correctly.
(Also for my use case, where Chrome was offering to translate well formatted JSON from latin to English, that BS goes away.)
My Windows is german in german.
I made the following experiences in Chrome:
If I set
<html lang="en" translate="no">
Google Translate comes up with suggestion to translate english.
Definitely I have to omit the lang property. This works for me:
<html translate="no">
No popup is coming up and the translation icon in the URL field is no longer displayed.
sometimes you need to block not all html, but specific element, in such case you could add class="notranslate" only to that element.
ie. <div class="notranslate"> some content </div>
I'm able to resize Text Field in Chrome & other browsers. However, I'm not able to make the same work in IE9, even after installing the Chrome frame for IE. I use for Ex:
style="resize:horizontal;"
Ex:
Can someone suggest me how to make it work in IE browsers?
Thanks.
*EDIT*
Ok, So after a lot of tweaking around, I finally made it to work for IE9 !! Yay :)
First things first : You need to install the Chrome Frame on IE9.
Then you add some tags for it to render on IE.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Here's the complete code :
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- <meta http-equiv="X-UA-Compatible" content="chrome=IE9">
<!-- X-UA-Compatible: chrome=1-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<head>
<title>Text Feilds</title>
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="txt1" style= "resize: horizontal"; />
<input type="text" id="txt2" style= "resize: both"; />
</body>
</html>
You can’t, in any simple way. According to http://caniuse.com/#feat=css-resize there is no support in IE 9, and IE 10 status is unknown.
If you have a look at http://www.w3schools.com/cssref/css3_pr_resize.asp you will see that this feature is not supported in IE at all.
If you want to support this feature in all browsers you will have to create your own resize function in javascript (our use any framework if there is one).
That's HTML5 markup and older versions of IE do not support HTML5 or HTML5 ready. IE 9 only supports it in parts
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
There are <meta> tags and other things you can place in the <head> of your HTML document. What <meta> tags etc. and best practices do you make use of in your HTML document to make it more accessible, searchable, optimized etc.
In my case:
Title (should do [Section Name - Site Name] for better SEO)
Meta tag for Content-type, description, and keywords
Link to stylesheet(s) (don't forget to specify the media="").
<script> tag that links to external javascript files.
All tags should follow the W3C's standard. The W3C site has a more technical and detailed section about the HTML <head> section.
Do your users a favor and make their IE engine switch to Chrome one when Chrome Frame is installed :)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
You'll want to put SCRIPT elements at the end of the page before the close of the BODY element. See http://developer.yahoo.com/performance/rules.html#js_bottom for details.
Besides the usual doctype, title, etc, I will try and provide you with some things I have learned and implemented that might be of assistance to you.
Firstly, remember that the title, for best user experience should have the most relevant sub section first. This is because it is usually displayed in the title bar/tab list/bookmark name. Consider this page title...
Stack Overflow - HTML head best practices
becomes Stack Overflow... (munched to save room in tab bar/bookmark list)
Now if you had 5 Stackoverflow tabs open (as I often do :P) then how would the user know which one is which?
Also note with CSS the cascading nature... So the order of these will matter. Same with Javascript, any dependencies on other external sites must be allowed for. I put mine in the head and havn't noticed a performance decrease. I put them there because it to me looks more tidy and logical. Though some other people will recommend putting the <script src=""> links in just before </body> so the browser won't temporarily stall... Just use whatever works best for your site.
Also a Meta tag of 'rating' with 'general' let's Net Filtering software know your site is safe for viewers of all ages (as long as it is, of course!)
I also use..
<link rel="start" href="/" title="Home" />
to let the browser know where the home of my site is. And for any browser prefetching systems, though I believe these are yet to be implemented by browsers without assistance of plugins.
Also consider the 'next' and 'prev' <link rel=""> if your pages are in a sequence of sorts.
First, make sure the < !DOCTYPE is the verry first element of the document, i.e. no space, tab or corrupted BOM marker.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- declare all page rendering and programmatic related tags -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Care about IE ? -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- globalise scripting and styling content language -->
<meta name="Content-Type-Script" content="text/javascript" />
<meta name="Content-Type-Style" content="text/css" />
<!-- title tag is MANDATORY -->
<title>Short and relevant, about 64 characters/spaces</title>
<!-- declare all CACHE controll -->
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta name="revisit-after" content="7 days" />
<!-- declare all content description tags -->
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
<!-- language specific keywords -->
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
<!-- For french example -->
<meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
<meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
<meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />
<!-- declare all situationnal and external relativity related tags -->
<link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
<link rel="start" href="/" title="Home" />
<link rel="prev" href="../" title="Parent section" />
<!-- declare all page rendering cascading style sheets in order of incidence -->
<link rel="stylesheet" type="text/css" href="globaly-used.css" />
<link rel="stylesheet" type="text/css" href="specificly-used.css" />
<!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
<link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
<link rel="stylesheet" type="text/css" href="i-love-ie.css" />
<!-- not relevent to subject, declare all javascripts AFTER css linking -->
</head>
<body>
</body>
</html>
I didn't see this mentioned: the <base> tag, if specified, should be the first element in <head>. (The base URI of the document is assumed to be . before/if not specified.)
IMHO, the two most important child tags of <head> are <title> and the Content Type meta tag. Search engines actively look at <title>. Whereas the other meta tags are often ignored. As a multi-lingual web user - I cannot stress more the importance of adding the Content Type tag because without it, the browser needs to autodetect the character set of the web page and this operation is often flaky. The result ends up being that various characters are not rendered correctly to the user or sometimes none at all in the case of Japanese or Chinese.
Here is an snippet of some of the header code from a current project of mine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>
There is a related question here that may help add some light regarding the order of the tags.
Generally my pages include the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>...</title>
<meta name="Description" ...>
<meta name="Keywords" ...>
<meta name="Copyright" ...>
<meta name="Author" ...>
<meta name="Language" ...>
<style type="text/css" ...>
DocType is important to enforce strict rendering (No quirks mode) by the browser. You may want to use XHTML instead - as long as there is one there. I add Copyright and Author purely because I design and create the pages for other companies. Description is for SEO, and Language is for the browser (if it supports it).
I don't believe it makes to much of a difference which meta tag comes first, or whether the title should be above. What counts in most cases is that it exists on the page, and has the correct content.
As far as I'm aware, most search engines ignore any "keywords" or "description" meta tags, instead preferring to read the content of the document.
Getting the page title right however, is of extreme importance.
Title, meta tags for keywords, content-type (if not explicitly set by the web server), and any CSS to be applied to the page.
Declaring the CSS up front allows the browser to lay out the page more efficiently (see http://developer.yahoo.com/performance/rules.html#css_top).
I would add an important note: if you're using IE's meta X-UA-Compatible tag to switch rendering modes for Interet Explorer, you must insert it as the first item in HEAD:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Page title</title>
...etc
</head>
In addition to the answers above I use the Dublin Core initiative meta-tags.
They are very useful for actual content/papers etc.
<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />
etc.