HTML sitemap generator

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site map</title>
<style>
  body{font:16px/1.6 system-ui,sans-serif;max-width:860px;margin:40px auto;padding:0 16px;color:#1b2330}
  h1{font-size:1.8rem}.html-sitemap ul{list-style:none;padding-left:1.1rem;border-left:1px solid #d8d4cb;margin:.2rem 0}
  .html-sitemap>ul{border:0;padding:0}a{color:#9c3a12}span{color:#5b6472}
</style>
</head>
<body>
<h1>Site map</h1>
<nav class="html-sitemap" aria-label="Site map">
  <ul>
    <li><a href="https://www.example.com/">Home</a>
      <ul>
        <li><a href="https://www.example.com/about">About us</a></li>
        <li><a href="https://www.example.com/blog/">Blog</a>
          <ul>
            <li><a href="https://www.example.com/blog/robots-txt-mistakes">Five robots.txt mistakes</a></li>
            <li><a href="https://www.example.com/blog/xml-sitemaps-explained">XML sitemaps explained</a></li>
          </ul>
        </li>
        <li><a href="https://www.example.com/contact">Contact</a></li>
        <li><span>Services</span>
          <ul>
            <li><a href="https://www.example.com/services/seo-audits">SEO audits</a></li>
            <li><a href="https://www.example.com/services/web-design">Web design</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>