My simple question is, how can I use multiple languages in one HTML page?
Something like
<div>
<p>This text is in English</p>
</div>
<div>
<p>This text in Japanese</p>
</div>
<div>
<p>This text in French</p>
</div>
It's for a language selector. The page is pure HTML.
Yes. It is possible. You can have the other language text in Unicode. Check out an example I created for you here:
Code:
Welcome
नमस्कार
வணக்கம்
Just use UTF-8 for your page encoding and it will all work. Browsers do this naturally; Unicode (of which UTF-8 is a representation) was invented for this.
The same was as you use one language. You just have the limitation that an HTML document has one character encoding, so you cannot use, for example, ISO-8859-1 encoding for French text and some JIS encoding for Japanese text, as you could if you wrote two separate pages.
The conclusion is that you should normally use UTF-8 if possible, and use workarounds like character references if not.
You can, and should, use the lang attribute to indicate the language of each part. But this is not necessary for basic functionality, and it’s really just good authoring habit more than anything else for now.
One tricky way to do it, is to set your CSS with, for example:
[lang=en-GB] [lang=fr-FR],
[lang=en-GB] [lang=ja-JP],
[lang=fr-FR] [lang=en-GB],
[lang=fr-FR] [lang=ja-JP],
[lang=ja-JP] [lang=en-GB],
[lang=ja-JP] [lang=fr-FR]
{
display: none !important;
}
And then mark your HTML with the lang attribute, such as:
<div lang="en-GB">
<p>This text is in English</p>
</div>
<div lang="ja-JP">
<p>This text in Japanese</p>
</div>
<div lang="fr-FR">
<p>This text in French</p>
</div>
You can have a simple javascript that detects the language selected and change the HTML root document :root.
Using jQuery, it would be like this:
$(document).on('change', 'select[name="lang"]', function(e)
{
$(':root').attr('lang', $(this).val() );
});
And automatically, the correct localised version only would be displayed and the other would not be visible.
Related
so I have this huge amount of text from several documents that i'd like to insert on my webpages. When i copy paste the text into my <p>element, it works fine and all, but it looks messy in my html-file.
Is there any other way to transfer my written document to my html-file, for instance link the document to the html-file, or maybe there's a way to hide or separate the <p> so the html-file looks neat even though there's a huge amount of text in my html-file. Any advice?
I do not know about any way to include html in another html (something like php's include), but it could be done with JQuery:
index.html:
<html>
<head>
<!-- link jquery -->
<script>
$(function(){
$("#fileContent").load("doc.html");
});
</script>
</head>
<body>
<div id="fileContent"></div>
</body>
</html>
doc.html (file that contains your text)
There's a lot you could do to separate these blocks of text.
Firstly, I'd recommend using <div>..</div> tags to divide the content into separate semantic sections. There are a bunch of different tags that aim to divide the content of the page semantically: <aside>, <main>, <header>, <nav>, and so on. I'd recommend reading up on these tags and using them appropriately.
However, to answer your question more directly, you should separate each block of text into separate <p> tags. After all, the <p> tag is meant for defining separate paragraphs. While the HTML document may not look pretty when indented and filled with multiple different tags like <div> a <p>, it is the best way to do it.
Unless the HTML page is going to be presented in its core (code) format, then how the <p> tags look in the .html file is unnecessary because after all these are what define how the page is presented and rendered in the browser.
I have an HTML file like this:
<html>
<body>
<p>Some text...</p>
<img src="data:image/png;base64
<!-- Some really ugly base64 -->
">
<p>Some text...</p>
</body>
</html>
By default, a base64-encoded file really clutters an HTML document.
I am wondering, if there is a method to have an image that links to another place at the HTML file, rather than pasting the base64 directly between the important content, to improve readability in the raw file. I know, this is possible with some kind of JavaScript solution, but I would prefer not to use it.
Inspired by this answer, it is possible to specify image contents via CSS using the all-purpose content attribute.
I do not know which browsers support this behaviour, although I strongly suspect most modern ones do.
Example modified from that answer:
<img src="#" class="myImage" />
<style type="text/css">
.myImage {
content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw==');
}
</style>
Placing style elements in the body is illegal in HTML4, and dubious in HTML 5. However, every browser I know of supports it.
Remember that having inline images in HTML documents comes with some massive downsides, most prominently impaired cacheability.
I'm working on some oracle code to generate an HTML eMail. It's mostly working, but I took the resulting HTML and placed it in Dreamweaver CS6 to use the validation. I get a few errors:
1) No Character encoding declared at document level [HTML 4.01]
2) element "U" undefined [HTML 4.01]
The html code is generated automatically by a rich text editor widget. Should I use something other than HTML 4.01? I'm not too savvy with HTML Header code.
Here's the HTML code that is generated from my test.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saint Susanna Parish Mailing</title>
</head>
<body>
<p>This is normal text</p>
<p>
<strong>This is bold</strong>
</p>
<p>
<u>This is Underscored</u>
</p>
<ol>
<li>
<span style="color:#ff0000;">This is numbered</span>
</li>
</ol>
<ul>
<li>This is bulleted</li>
</ul>
<p style="text-align: center;">This is centered</p>
<p>
<span style="font-size:18px;"><span style="font-family: times new roman,times,serif;">This is a new font</span></span>
</p>
<p style="text-align: right;">This is right justified</p>
<p> </p>
</body>
</html>
Thanks for looking at this.
I think the encoding can -and must- be specified in the mail headers, so I would ignore that warning.
The article The Importance of Content-Type Character Encoding in HTML Emails says:
[The client] will display the email based on what Content-Type has been set.
However, email clients read the Content-Type value that is set in the
email header and they completely ignore the META tag that is within
the HTML.
So that suggests that you should add the proper header, and can safely ignore the validator's warning, although it can't hurt at all to add the meta tag as well.
If you want a second opinion, you can try the W3C Markup Validation Service, although that one might also complain about missing content types. After all, these validators don't know what headers you are going to supply.
Different rules apply to HTML mail anyway. Clients ignore basically everything that is outside of the body. They also filter out all kinds of attributes, won't allow JavaScript and fully ignore external stylesheets and inline style tags.
The <u> tag was deprecated in HTML 4.01 but not obsolete. In that case the validator seems to be wrong, so I would ignore that warning as well. I wouldn't underline text at all though, because obviously that text could easily be mistaken for a link. If you need to, and you don't want to use <u>, you can use an inline text-decoration style.
Some suggestions:
U can do a lot of control by using classes etc - declared in a style.css file that u call first as well.
<!DOCTYPE HTML> - HTML 5
<b> and </b> can replace strong to save characters
<link rel="stylesheet" type="text/css" href="../style.css" title="Standard Style">
im looking for a way to show html as html without the browser reading it,
i found <plainttext> but once i start it i can't stop it
for example:
<plaintext>
<span> dobeediedabiedadadee olleeeeee</span>
</plaintext>
<h1>hi</h1>
in this example the span had to be shown as text and the h1 as a header, but the output is:
<span> dobeediedabiedadadee olleeeeee</span>
</plaintext>
<h1>hi</h1>
</body>
</html>
here a JSFiddle link:
JSFiddle
a other solution as plaintext is also welcome
thanks for your time.
plaintext has long been deprecated, just use > and <
<span> dobeediedabiedadadee olleeeeee</span>
DEMO: Fiddle
You could always use javascript to escape the HTML. Here is a fiddle.
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
The following link describes the difficulty in using <plaintext>. long story short it is not fully supported in any browser and you should be using <pre> instead.
http://reference.sitepoint.com/html/plaintext
<plaintext> is not a pair tag. From that tag to the rest of the page, everything is interpreted as text. However, this is not standard and obsolette in HTML5:
Examples
No, really. don't use it.
It is literally written in the w3 reference
Use PRE
<pre>
<span> dobeediedabiedadadee olleeeeee</span>
</pre>
<h1>hi</h1>
it is compatibility issue some browser completely ignores coding of
have a look at this link http://reference.sitepoint.com/html/plaintext
i would suggest you use instead
While messing around with Twitter markup i just found out that they placed HTML Markup within the data-expanded-footer and it looks something like this:
data-expanded-footer="<div class="js-tweet-details-fixer tweet-details-fixer">
<div class="js-tweet-media-container "></div>
<div class="entities-media-container " style="min-height:0px">
</div>
<div class="js-machine-translated-tweet-container"></div>
<div class="js-tweet-stats-container tweet-stats-container ">
</div>
<div class="client-and-actions">
<span class="metadata">
<span title="12:11 PM - 10 Apr 13">12:11 PM - 10 Apr 13</span>
· <a class="permalink-link js-permalink js-nav" href="/****/status/****" >Details</a>
</span>
</div>
</div>"
Is this a valid html element (this attribute is child of a div element with class tweet)
If this is valid, is this a good idea, if not why?
Is this so bad for SEO ?
EDIT
Just tried to parse HTML from data attribute and it worked but there should be a single quotation if you want to make it work like :
http://jsfiddle.net/burimshala/crEXU/
And if you leave like twitter using double quotes within the markup and if you open the data-markup attribute with double quotes it does not work :
http://jsfiddle.net/burimshala/crEXU/1/
How does Twitter parse this ?
data-* attributes are valid HTML5, see:
http://ejohn.org/blog/html-5-data-attributes/
and http://www.w3.org/TR/2010/WD-html5-20101019/elements.html
It's main use is for data storage (in this case of HTML code). It all depends on your situation if this is a good idea, but it definitely serves a purpose. I use it often when I want to 'clone' dynamic content.
It's an 'invisible' element, so SEO should not really be affected, I am however, no expert on this.
It's good declared, I would not say its bad for SEO because others SEO factors like Microformats for SEO (hCard, vCard or schema) all use HTML attributes.
As long your site is valid to W3C, and dont have any markup error (Check here): http://validator.w3.org/, than you are good with SEO.
The only small problem for SEO friendly this will be if your HTML markup code will always beat the website TEXT.
Remmeber for SEO always is better that minimum 51% of website to be Text, and others HTML atributes.