Атрибут lang у HTML — мова вмісту сторінки

<p>This paragraph is English, but the language is not specifically defined.</p>

<p lang="en-GB">This paragraph is defined as British English.</p>

<p lang="fr">Ce paragraphe est défini en français. </p>

HTML

<p lang="uk">lang="uk" — <q>цитата всередині</q></p>
<p lang="ua">lang="ua" — <q>цитата всередині</q></p>
<p lang="en">lang="en" — <q>quote inside</q></p>
<p lang="fr">lang="fr" — <q>citation</q></p>

<h3>Перенос за складами: <code>hyphens: auto</code></h3>
<div class="cols">
    <div>
        <p class="tag">lang="uk"</p>
        <p class="hy" lang="uk">Дніпропетровщина, електроенергетика, найвідповідальніший, зовнішньоекономічний.</p>
    </div>
    <div>
        <p class="tag">lang="ua"</p>
        <p class="hy" lang="ua">Дніпропетровщина, електроенергетика, найвідповідальніший, зовнішньоекономічний.</p>
    </div>
</div>

CSS

body {
    font-family: system-ui, sans-serif;
    font-size: 15px;
}

p {
    border-left: 4px solid #cfd4d9;
    padding: 6px 12px;
    margin: 10px 0;
}

p::after {
    font-size: 13px;
}

p:lang(uk) {
    border-color: #2e7d32;
}

p:lang(uk)::after {
    content: '  —  :lang(uk) спрацював';
    color: #2e7d32;
}

p:lang(en) {
    border-color: #2f6f9f;
}

p:lang(en)::after {
    content: '  —  :lang(en) спрацював';
    color: #2f6f9f;
}

p:lang(fr) {
    border-color: #7b5ea7;
}

p:lang(fr)::after {
    content: '  —  :lang(fr) спрацював';
    color: #7b5ea7;
}

p:not(:lang(uk)):not(:lang(en)):not(:lang(fr)) {
    border-color: #c0392b;
}

p:not(:lang(uk)):not(:lang(en)):not(:lang(fr))::after {
    content: '  —  жоден :lang() не спрацював: мова не розпізнана';
    color: #c0392b;
}

h3 {
    margin-top: 28px;
    font-size: 15px;
}

.cols {
    display: flex;
    gap: 24px;
}

.tag {
    border: none;
    padding: 0;
    margin: 0 0 4px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: #555;
}

.tag::after {
    content: none;
}

.hy {
    width: 170px;
    text-align: justify;
    hyphens: auto;
    border-left: 1px solid #cfd4d9;
}