How do I declare the language of an HTML page? 

Set the lang attribute on the root element to a BCP 47 language tag:

<!doctype html>
<html lang="de">

That is the declaration browsers and assistive technology actually read. The HTML standard derives the language of every node from the nearest lang attribute on the element or its ancestors and lists what user agents use it for: font selection, pronunciation, dictionary selection and the UI of form controls such as date pickers. Screen readers pick their voice from it (WCAG 3.1.1 requires a programmatically determinable page language), CSS hyphens: auto only hyphenates when lang is present, and :lang() selectors key off it.

Change the language inline wherever the text switches, and declare direction separately, because lang does not imply direction:

<p>The German word for butterfly is <span lang="de">Schmetterling</span>.</p>
<p dir="rtl" lang="ar">محتوى بالعربية</p>

For a page that is mostly right-to-left, put dir="rtl" on <html> next to lang.

What about the alternatives?

• <meta http-equiv="content-language" content="de"> is marked non-conforming in the HTML standard, which tells authors to use lang instead. If present, it sets a "pragma-set default language" that only applies to nodes with no lang anywhere in their ancestry, a value containing a comma is ignored entirely, and only the first of several space-separated tokens counts.
• The Content-Language HTTP header describes the audience the resource is intended for and may list several languages (Content-Language: de-DE, en-CA); it says nothing about the language the document is written in. The HTML standard uses it only as a last-resort fallback, and only when it carries a single tag.
• Google states that it determines page language from the visible content and does not use code-level information such as lang attributes, so lang serves users and browsers, not rankings.

If the same page exists in several languages, link the versions to each other with hreflang in <head>. Each page lists itself and all others, with x-default for the language-selection page:

<link rel="alternate" hreflang="de" href="https://example.com/de/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

The hreflang generator builds this block for a list of URLs. Values everywhere are BCP 47 tags: de, en-GB, zh-Hant.