zicht / htmldev-bundle

Library - Easy living styleguides with Symfony and Twig
MIT License
4 stars 1 forks source link

Add lang attribute on html tag #63

Closed 7ochem closed 3 years ago

7ochem commented 3 years ago

We already do this in many projects and if we add it here, than we have it in all our projects and we have a central place where it can be maintained and improved. Having this lang attribute is a best practice and also better for SEO.

In projects we have:

{% block html_attributes %}lang="{{ app.request.locale|lower }}"{% endblock %}
{% block html_attributes %}lang="{{ app.request.locale }}"{% endblock %}
{% block html_attributes %}lang="{{ app.request.locale|lower }}-{{ app.request.locale|upper }}"{% endblock %}
{% block html_attributes %}lang="nl" xml:lang="nl"{% endblock %}
{% block html_attributes %}lang="{{ app.request.locale }}" xml:lang="{{ app.request.locale }}"{% endblock %}

The xml:lang attribute is for XML documents, so we don't need it. When specifying both lang and xml:lang, then lang is being used, so in any way, it is not necessary to use xml:lang.

The value of the lang attribute must comply to the BCP47 specification, which in short says that there are 3 parts, separated by dashes: language-script-region. Only the first is required (en or nl). Above you see {{ app.request.locale|lower }}-{{ app.request.locale|upper }} is being used somewhere (resulting in en-EN or nl-NL). This might cause issues, because app.request.locale is the language, but app.request.locale might not be equal to the script in many cases: en-GB, en-US, fr-CA. Since only the language is required, I propose to only use that.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax