Login/Register
HTML5 page language, direction and encoding
Asked Answered
Solved htmlunicodeutf-8right-to-left
R

5

9

What is the correct way of declaring a HTML5 page to be in Hebrew, RTL and utf-8 encoded? I haven't done it in a while, but I remember that in HTML4 it involved 3 or 4 tags and attributes that seemed redundant. Is it still the same?

Relay answered 11/10, 2012 at 12:28 Comment(0)
D
10
<html dir="rtl" lang="he">
  <head>
    <meta charset="utf-8">
     ...
    </head>
  ...
</html>
Donegal answered 11/10, 2012 at 12:40 Comment(1)
would like to add that it is very important that the character encoding meta tag is the first meta tag from your document. Imagine you declare the document title before with hebrew characters. Some tools used to fetch and parse the documents will parse the title of your document in a wrong encoding, resulting in string-handling inconsistencies. This is a problem which english doesn't suffer from. – Donegal
L
9

You need the following:

  1. A <!doctype html> to indicate your page is HTML5.
  2. An <HTML> tag with the following attributes:
    • dir="rtl"
    • lang="he"
      Note: you may omit the ", or use ' instead.
  3. A <meta> tag to declare the character encoding. You can choose one of the following:
    • <meta charset="UTF-8">
      Note: you may omit the ", or use ' instead.
    • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      This is the "legacy" way of declaring character encoding. It's still allowed within HTML5, but all modern browsers support the first variant so there is no need for this.
      Note: you may omit the " for the http-equiv attribute, or use ' instead for all attributes.
    • If the browser encounters an UTF-8 byte order mark, it will treat an HTML5 file as UTF-8. This happens regardless of any character encoding declared using meta tags.

None of the tags, attributes and attribute values used here, or the DOCTYPE, are case sensitive.

Note: if the browser encounters a character encoding declaration, it will re-parse the document from the start using the specified encoding. You can put your encoding inside a Content-Type HTTP header so this won't be a problem.

Note also that the browser will only look for a character encoding declaration in the first 1024 bytes of a document.

Lasalle answered 11/10, 2012 at 12:57 Comment(1)
About those possibly omitted quotes: If you write a parser you should expect that quotes may be missing. If you write a document or a document generator, you really should include the quotes. – Rasheedarasher
M
2

You need these to create a HTML5 page with language as hebrew, direction as RTL, and utf-8 encoded

<!DOCTYPE html> For declaring it as a HTML5 page

<html dir="rtl" lang="he"> For direction and language

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> For utf-8

Mullet answered 11/10, 2012 at 12:39 Comment(0)
J
0
<html dir="rtl" lang="he">

not: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Does not work on "Chrome" and "Firefox" browsers.

Jaine answered 26/1, 2014 at 8:54 Comment(0)
M
0
<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="utf-8">
    ...
</head>

Every HTML5 must contain a DOCTYPE tag

Also, the lang attribute is not limited to just the html tag and it can be combined with multiple languages across the page

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="utf-8">
    ...
</head>
<body>
    ...
<section class="inline-translation" lang="he">
    <h1>קטע תרגום</h1>
    ...
    <h2>תרגומים מרובים</h2>
    <div lang="en">Some content translated in English</div>
    <div lang="es">Con elementos en otros idiomas <span class="tooltip" lang="jp">お知らせ</span></div>
</section>

<section class="inline-translation" lang="en">
    <h1>Translation Excerpt</h1>
    <div>Your content in another language</div>
</section>

<section class="inline-translation" lang="es">
    <h1>Fragmento de Traducción</h1>
    <div>Tu contenido en otro idioma</div>
</section>

<section class="inline-translation" lang="jp">
    <h1>翻訳抜粋</h1>
    <div>コンテンツを別の言語で</div>
</section>

Documentation:

Muddy answered 22/6, 2024 at 19:4 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.