Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cómo aprender HTML — Mi Blog de Programación</title>

<h1>Meta tags y el &lt;head&gt; — lo que no se ve en pantalla</h1>
    <p>
        Nada de lo que está en el &lt;head&gt; se muestra directamente en la página.
        Este ejemplo usa JavaScript para leerlo y mostrártelo, así podés ver qué
        contiene sin tener que abrir "Ver código fuente".
    </p>

<h2>Datos leídos del &lt;head&gt; de este documento</h2>
    <ul id="lista-meta"></ul>

<hr>
    <p>Mirá el código fuente de este archivo (arriba, en el editor) para ver
    cómo está escrito cada uno de estos tags en el &lt;head&gt;.</p>

const datos = [
            ["title",              document.title],
            ["meta charset",       document.characterSet],
            ["meta description",  valorMeta('meta[name="description"]', "content")],
            ["og:title",          valorMeta('meta[property="og:title"]', "content")],
            ["og:type",           valorMeta('meta[property="og:type"]', "content")],
            ["link canonical",    valorMeta('link[rel="canonical"]', "href")],
            ["theme-color",       valorMeta('meta[name="theme-color"]', "content")],
        ];

const lista = document.getElementById("lista-meta");
        datos.forEach(([nombre, valor]) => {
            const li = document.createElement("li");
            li.innerHTML = "<strong>" + nombre + ":</strong> " + valor;
            lista.appendChild(li);
        });
    </script>

</body>
</html>