I am starting a project and I want to know if I can declare more than 1 lang in html??
The idea is to make a landing page in different languages
lang="pt-br, en-us"
If you have multiple languages on that page, you first define the main language of the page on the html element (<html lang="en-US">)
And for the elements that have a different language from the page, you add a lang attribute:
<section lang="pt-BR"> ... </section>
But it would still show all languages on the page. The lang attribute is just for SEO and accessibility/screenreaders. It won't hide languages.
Related
I have a CMS template that adds lang="en" to the html element because most pages and the template are in English, but users can create a page (really just main content area content) and specify another language. Thus, the template with header/navigation/footer is still in English, but the main page content can be in another language.
If I set <div id="main-content" lang="es">…</div>, will that lang attribute cascade down to all the sub elements within that div or does each child element also need that lang attribute? Does it vary by screen reader?
An alternative would be to set the <html lang="es"> and add lang="en" for all the non-user-editable template elements such as the header/nav/footer but that would get rather cumbersome.
All the lang stuff I've found is for top-level elements <span lang="en">only some text and no other tags</span> and doesn't address/mention a whole tree.
Yes, it cascades down.
https://www.w3.org/TR/html53/dom.html#the-lang-and-xmllang-attributes
The lang attribute (in no namespace) specifies the primary language for the element’s contents (my emphasis)...
The "element's contents" can be any element nested under it.
It then says,
If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any.
That essentially addresses the "whole tree".
It comes in handy so that you can set the language for the whole page and then if you have small snippets that are in another language, each little snippet can have their own lang attribute and a screen reader will switch dialects and accents and read the words natively (or as native as a computer voice can sound).
To see an example, go to UPS's global page, https://www.ups.com/us/en/global.page. If you expand, say, Europe, view the source code for each choice and you'll see the lang attribute all over the place.
<li lang="nl">
<a href="http://www.ups.com/be/nl/Home.page" ...>België - Nederlands</a>
</li>
<li lang="fr">
<a href="http://www.ups.com/be/fr/Home.page" ...>Belgique - Français</a>
</li>
Background Info:
I am following along with a Lynda tutorial and the instructor used < navigation > tags for creating his navigation section.
A condensed version of his code:
<html>
<body>
<header>
<h1>Global Bank</h1>
</header>
<navigation> <=== Valid?
<ul><li>Menu</li><ul>
</navigation> <=== Valid?
<footer>
</footer>
</body>
</html>
My Problem
However, I don't know how this is possible. I know that a navigation section is created by using the < nav > tag, not < navigation >.
I looked through these following places before asking - the W3C HTML5 Documentation, W3Schools, Google, and on here.
But all I see is using < nav > to create a navigation section, nothing with < navigation >.
Normally, I would look past this as maybe a mistake of some kind, but the editor that the instructor is using (Atom) was able to identify < navigation > as an HTML tag AND the instructor says that the tag is HTML5. But I am unable to find anything on this < navigation > tag.
My Question(s):
Does anyone know where I can find information on < navigation > tag, if any? A link would be appreciated.
If not, how would it be possible for < navigation > to be a valid HTML5 tag, as the instructor said? Is there some way of having user-defined tags? If this is possible, a link with details on this would also be appreciated.
Thank you very much for your time and attention!
As you point out, <navigation> is not a HTML5 tag, but <nav> is. Why your teacher would use the custom <navigation> instead of the standard <nav>, I don't know.
The HTML specification allows the use of custom elements, as it is explained here:
Custom elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard elements in their documents, with application-specific behavior added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.
Custom elements are part of a larger effort to "rationalise the platform", by explaining existing platform features (like the elements of HTML) in terms of lower-level author-exposed extensibility points (like custom element definition). Although today there are many limitations on the capabilities of custom elements—both functionally and semantically—that prevent them from fully explaining the behaviors of HTML's existing elements, we hope to shrink this gap over time.
But those custom elements must have a name following the pattern [a-z] (PCENChar)* '-' (PCENChar)* as specified on the standard. That means that it has to be a letter followed by an undefined number of characters, a hyphen (-) and more characters (more details on the valid characters on the link).
<navigation> does not follow that pattern, and if you try on the HTML validator, you will see that it throws an error and indicates that it is not valid HTML.
The tag defines a set of navigation links.
Ex:
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
I have never come across <navigation> tag. But you can always create it as a user defined tag. You will get all needed help from :
https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
I would like to create some kind of API where people can include a hidden information inside a website, so that a bot can read the information.
I know it is possible with meta-tags, but I am considering using some kind of individual tag, because then I can use DOM which is a bit more comfortable to work with, and it is easier to read by humans.
Example:
<html>
...
<body>
...
<mytag id="123" foo="bar" bar="foo"></mytag>
...
<mytag id="345" foo="bar" bar="foo"></mytag>
...
</body>
</html>
My question is, if it is possible to make this individual tag somehow conform to the standards, maybe by creating some kind of DTD ?
I would like to support HTML 4.01, XHTML and HTML 5, if possible.
Having to support HTML 4.01 and HTML5 makes this hard. You can’t use meta-name elements (would work for HTML 4.01, but they have to be registered for HTML5), you can’t use custom data-* attributes (not allowed in HTML 4.01), you can’t use Microdata (only defined for HTML5+), you can’t use custom elements (only defined for HTML5+).
I can think of two ways.
script element as data block
In HTML5, the script element can also be used for data blocks. Examples: text/html, text/plain.
The HTML 4.01 spec doesn’t define it like that, but it should still be possible/valid (it’ll understand it as "script", but user agents are not expected to try to run it if they don’t recognize the content type as possible for scripts).
Drawback: The content is not part of the document’s DOM.
RDFa
It’s allowed in HTML 4.01 and HTML5 (you might have to adapt the DOCTYPE for the older HTML versions, e.g., for XHTML).
You can’t use custom elements, but you can add property and content attributes (for name-value pairs), and you could use typeof for "items" (e.g., what you would use the element name for), and you can make use of meta and link elements (visually hidden by default) in the body.
<div vocab="https://api.example.com/voc#" class="the-hidden-information">
<div typeof="Item-123">
<meta property="foo1" content="bar1" />
<meta property="foo2" content="bar2" />
</div>
<div typeof="Item-345">
<meta property="foo1" content="bar1" />
<link property="foo5" href="/some-url" />
</div>
</div>
(when using RDFa 1.0 instead of 1.1, you’d have to use xmlns instead of vocab)
This may seem to be a very basic question. But I need some clarification here in this topic.
In HTML,
Generic attributes - eg: align, bgcolor etc.
Core attributes - eg: id, style etc. (This may be used as main or major attributes needed for any tag)
Internationalization attributes - eg: dir, lang
I also understood that all the above attributes are common to all tags (If I am right), then what is the basic difference between these three attributes?
Thanks in Advance.
Your concept of understanding between generic and core attributes is fine..
Internationalization attributes are available for almost XHTML elements
eg.1 Lang Attribute
It focuses specifically on advice about specifying the language of content.
eg.2 Dir Attribute
The dir attribute allows you to indicate to the browser the direction in which the text should flow. The dir attribute can take one of two values.
ltr - Left to right (the default value)
rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)
EXAMPLE
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
This will produce following result:
This is how IE 5 renders right-to-left directed text.
I'm trying to create a website that supports multiple languages with the help of the HTML lang attribute. I've found this example here:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p lang="fr">Ceci est un paragraphe.</p>
</body>
</html>
I've defined german as language in my OS and tried this with different browsers, but I always see the french paragraph as well. That's what I see:
This is a paragraph.
Ceci est un paragraphe.
The lang attribute specifies the language of the element’s content. Everything else is up to the user-agent resp. the webmaster.
Example uses:
a screen reader may use it to use the appropriate pronounciation
a browser may use it to use syllabification
a search engine may use it to find relevant content
a webmaster may use it to style content accordingly, e.g. using the correct quotation marks for the q element with CSS’s quotes
By no means should user-agents hide content in a different language by default. Think of these examples:
<p lang="en">I met a nice guy there. His name was <span lang="de">Max Mustermann</span>.
<p lang="en">He said to me <q lang="de">Halt! Stopp!</q>.</p>
<p lang="en">The original title is <cite>Faust. Eine Tragödie.</cite>.</p>
When content in different languages would be hidden, they would read:
I met a nice guy there. His name was .
He said to me .
The original title is .
It seems you want to use it to realize a multilingual page. While this is possible with JS/CSS, it’s usually not the best way. Typically you might want to use separate pages for each language and link the translation with the link type alternate and the corresponding hreflang:
<!-- on the page <example.com/en/about-me>, you could link to the German translation -->
<link rel="alternate" hreflang="de" href="/de/ueber-mich" />
The lang attribute goes on the HTML tag for the whole page, and specifies what the default language of the page is. It's metadata that describes the content. What you're trying to do with it isn't what it does.
You could do what you're trying to do by using JQuery to hide all tags in the page which have a lang attribute not equal to something you specify, but you'd have to research how to discover what the system language is in the browser (assuming that's possible). If you don't want to drag JQuery into it, you could just walk the DOM yourself.