I need to display a string in two languages: English and Dutch.

It would be nice to show an English flag at the start of the English sentence, and a Dutch flag at the start of the Dutch sentence. For example:

This is an English text.

Dit is een Nederlandse text.

What I currently use is an Image. But I was wondering if there are other ways to do it. For example through HTML Entities? Or maybe something else?

Updated Answer (2024)

You may use Unicode 6.0 'Regional Indicator Symbols' (also known as "flag emojis") and a combination of HTML lang attribute and CSS :lang selector to display flags.

To fix the browsers which do not display flag emojis (e.g. Chromium-based ones), you may use a polyfill.

Example:

body {
  /* Polyfill for flag emojis: */
  font-family: 'Twemoji Country Flags', sans-serif;
}

p:lang(en):before,
p:lang(en):after
{
  /* Note the special flag character!
     Some browsers may display this character as "GB" in source code.
  */
  content: '🇬🇧';
}

p:lang(nl):before,
p:lang(nl):after
{
  /* Note the special flag character!
     Some browsers may display this character as "NL" in source code.
  */
  content: '🇳🇱';
}

<script type="module">
  // Polyfill for flag emojis:
  import { polyfillCountryFlagEmojis } from "https://cdn.skypack.dev/country-flag-emoji-polyfill";
  polyfillCountryFlagEmojis();
</script>

<p lang="en">This is an English text.</p>
<p lang="nl">Dit is een Nederlandse text.</p>

Original Answer (from 2015)

HTML, CSS or Unicode have no native way to display national flags.

It is possible to render flags with pure CSS (see Phoca CSS Flags library). But I do not recommend using it for practical purposes.

Just use images for national flags.

Reasons:

• CSS was never meant to render flags, it's just a wrong tool for that.
• Complexity and size of CSS — a PNG image may turn out smaller than a CSS,
• Complexity of processing of this CSS — may degrade browser performance,
• Search engines may be able to recognize images as national flags, but are unlikely to recognize fancy-styled empty boxes as flags.

That said, you don't have to use <img> elements in HTML to display flags. Define lang attributes on content and use :lang selector to display images in front of and/or after paragraphs in specific languages.

An example (note that HTML markup only contains semantic lang attributes, and no flag images):

p:lang(en):before,
p:lang(en):after
{
  content: url(https://i.sstatic.net/wJ384.gif);
}

p:lang(nl):before,
p:lang(nl):after
{
  content: url(https://i.sstatic.net/CKGZe.gif);
}

<p lang="en">This is an English text.</p>
<p lang="nl">Dit is een Nederlandse text.</p>