location of DIV tag in DOM - html

I was validating my moodle website with the w3c validation service. in it, there is this code that caused a lot of problems:
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script><script type="text/javascript">
my question is, can a div tag be inside a tag, but not in a body??

No it can not - it is not proper HTML,
of course it will still work in almost any browser , as most modern browsers are very lenient with improper HTML
It looks like you have it positioned absolutely, maybe I'm assuming because you want it way up on top above anything else. Don't worry - you can still accomplish this behavior inside the <body> tag

While HTML is a flexible and browsers are forgiving, HTML does specify a basic structure. Content in the header contains meta data about the page, as well as resources like CSS the browser should get. The part of the document tree used by the browser to paint the web page should be based on content in the body tag.
Here is a revised sample of your markup to show one way to improve it.
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
</body>
</html>

Answer is No its improper way of doing it The page may or may not break depending on browser

No, div tag must be inside body tag.

Related

Google tries to translate English HTML subscripts from Arabic

I have a simple HTML page with some <sub> elements in it. For some reason, Google Translate offers to translate the subscripts from Arabic to English (despite being English to begin with), only moving them down a little when translated. The HTML page language is set to en-US. Is this just my computer being weird, or is there a code-related reason?
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--<meta name="google" content="notranslate"> (this successfully gets rid of the translate popup, commented out for testing purposes)-->
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<title>test</title>
<link rel="icon" href="favicon.svg" type="image/svg"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="functions.js"></script>
<script src="main.js" defer></script>
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
Added to #test by JS:
<div class="letter">A<sub>1</sub></div>
Website: https://test.edgeloop.repl.co
Screenshot: screenshot
Are you sure that this is the correct code? You seem to have a <html...>-tag inside your <head>-tag. Remove the duplicate html-tag inside your head, and instead add the lang="en"-attribute to your outer-most html-tag.
Your code should thus look as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>test</title>
....
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
If this does not immediately solve your problem, try clearing the google chrome cache as follows:
Press F12 to open the dev tools menu
Right-click your refreh-button
Select the option empty cache and hard refresh:
If your webpage uses HTML and XML interchangably, you might need to add the following to your opening <html>-tag (see this link):
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
...
</html>
If your Google Translate does still pop up, you have the following options:
add translate="no" to your root html-tag
add the class notranslate to your root html-tag
add <meta name="google" content="notranslate"> to your head-tag
Your code should look as follows:
<html lang="en" translate="no" class="notranslate">
<head>
<meta name="google" content="notranslate"/>
....
</head>
....
</html>
#Lawrence Cherone's comment about adding more text seems to fix the problem, as does #unknown6656's suggestion of adding <meta name="google" content="notranslate">. I still don't know why subscripts are considered Arabic text, but adding English text seems to fix the problem. Thanks for all the answers.

Quotation marks inside <pre> element showing as “ or similar character

I'm just trying to post a simple html file consisting mainly of some prose I wrote inside of <pre> elements.
Interestingly, when I view the file on my computer with my browser, the quotation marks display fine. But when I upload it to my website, quotation marks are rendered as something like “ or â€. I have looked around the web for solutions but they were few and in between.
I tried to use the meta tag and included
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
to my header but to no avail. Any ideas on how to solve this? It just wouldn't make sense to go back to the content inside the elements and code it into html as the prose is a draft and will go through many changes in the future.
The <!doctype html> tag indicates the file is HTML5 - so the browser will render it as such. lang="en" should be set to the language you are working with. Be sure to use the <meta charset="utf-8"> tag to set the character set in the <head>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
</head>
<body>
<pre>This is my stuff</pre>
</body>
</html>
Check your code with the browser's View Source and use the Validator at https://validator.w3.org/ to check the page.
Here what I tried.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
</html>
I also tried only this
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
Still working

pinch zoom with no javascript

How can I achieve pinch-zoom functionality on a mobile device at a local level (i.e. not the whole page) without needing to use Javascript? So far I can pinch-zoom the whole page through the use of the META viewport tag.
I have looked at CSS touch-action: pinch-zoom but bizarrely it doesn't do what its name suggests at all but apparently serves solely as a modified to other actions which have nothing to do with zooming. However, this page talks about how touch-action is supposed to work to allow native pinch zoom capability in the browser itself, which suggests that it should somehow be possible.
I have already tried to do this with IFRAMEs, but have apparently not hit on the right attributes needed to make it work:
pztest1.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinch-Zoom Test IFRAME contents</title>
</head>
<body>
<H1>This is a test</H1>
<p>Test, test, test.</p>
</body>
</html>
This page by itself pinch-zooms, but only the entire page. So I put the contents in an IFRAME in another page:
pztest2.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Pinch-Zoom Test</title>
</head>
<body>
<h1>IFRAME test</h1>
<iframe src="pztest.html" height="640" width="480">
</iframe>
</body>
</html>
I am unable to pinch zoom at all in pztest2.html, neither in the body (which is expected) or in the IFRAME itself. If I remove the meta tag from pztest2.html, then I can zoom the body of pztest.html and the iframe with it, but I am unable to just zoom the IFRAME itself, which is the goal.

Send HTML Email that contains stylesheet

I send an email but Gmail don't read my html head.
I need to use from #font-face.
I send this HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="http://myAddress.com/style.css" rel="stylesheet" />
</head>
<body>
<h1 class="style1">Hello</h1>
</body>
</html>
I want to see this:
image is here
but i see this:
image is here
Gmail's CSS support is very... limited to say: The Ultimate Guide to CSS. So you are probably out of luck here and need to rewrite the code.
Also see Understanding Gmail and CSS: Part 1 for more details on how to solve this. You need to inline all your CSS, but there are tools available.

How to disable Google translate from HTML in Chrome

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>