asimpletune/semantic.html

## semantic.html
<!doctype html>
<html lang="en">

<head>
  <title>Semantic HTML for "reader mode"</title>
  <meta name="description" content="For an example visit https://spenc.es/writing">
</head>

<body>
  <header>
    <nav id="primary-nav">
      <div id="mobile-nav"></div>
      <div id="desktop-nav"></div>
    </nav>
  </header>
  <main>
    <!-- Everything within <article> is what the reader will render, if done correctly -->
    <article>
      <!-- The header can have quite a number things if done right, including an image, a share menu, some detail elements for table of continues and other things that can be optionally opened. This is obviously where you'd also put the author's name and the date of the article. -->
      <header id="title-and-article-nav-and-related-stuff">
        <h1 id="title">How to Write HTML for 'Readers'</h1>
        <h2>An Example of Semantic HTML, the Key to Writing HTML that Renders Well for Readers</h2>
        <div id="meta-data">
          <div id="article-metadata">
            <time datetime="2023-11-25" id="article-date">📅 November 25, 2023</time>
            <time datetime="PT6M" id="article-read-time">
              <span>|</span>⏱ 6 minute read
            </time>
          </div>
          <nav id="share-menu">
            <a href="mailto:" id="email-share">email</a>
            <a href="https://news.ycombinator.com" id="hackernews-share" target="_blank">HN</a>
          </nav>
        </div>
        <figure>
          <img src="/foo.svg" alt="A description of the banner" aria-labelledby="banner-caption" id="image-banner-h">
          <img src="/foo.svg" alt="A description of the banner" aria-labelledby="banner-caption" id="image-banner-v">
          <figcaption id="banner-caption">(A caption on the article's banner image)</figcaption>
        </figure>
        <details id="tldr" open>
          <summary>tl;dr</summary>
          <blockquote>
            <p>A details element for the 'tl;dr' of the article. This will actually get rendered by most readers,
              including Apple's Safari.</p>
          </blockquote>
        </details>
        <nav id="table-of-contents">
          <details>
            <summary>Table of Contents</summary>
            <ol>
              <li>
                <a href="#introduction">Introduction</a>
              </li>
              <li>
                <a href="#main-thoughts">Main Thoughts</a>
              </li>
              <li><a href="#conclusion">Conclusion</a></li>
            </ol>
          </details>
        </nav>
      </header>
      <!-- You can put a text based divider between the <header> and <section> elements if you like -->
      <p>-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</p>

      <!-- Now begins the "main" article. Note that you must not have any H1 headers -->
      <section id="content">
        <h2 id="introduction">Introduction</h2>
        <p>This is an introduction to my topic of how to write semantic html that renders well for readers, such as the
          one that includes Safari. In the sections that follow you can pretty much include anything that would be
          rendered HTML from markdown, except H1 headers. Don't include those.</p>
        <h2 id="main-thoughts">Main Thoughts</h2>
        <p>In your article's content section, you can and should put images, tables, code snippets, and paraphrases.
          These will all render fine.</p>
        <h2 id="conclusion">Conclusion</h2>
        <p>If you follow this basic structure, your content will be rendered nicely, and you will be able to to place
          all the necessary navs and non-content stuff around it.</p>
      </section>

      <!-- You can put another text based divider to signify the end of the article -->
      <p>- ♤♧♡♢ -</p>
    </article>
  </main>
  <div id="comments">
    <!-- Left empty as an exercise. In any case, these will NOT be included in the reader view, which is correct and expected -->
  </div>
  <footer>
    <!-- blah blah copyright stuff, etc... -->
  </footer>
</body>

</html>
	<!doctype html>
	<html lang="en">

	<head>
	<title>Semantic HTML for "reader mode"</title>
	<meta name="description" content="For an example visit https://spenc.es/writing">
	</head>

	<body>
	<header>
	<nav id="primary-nav">
	<div id="mobile-nav"></div>
	<div id="desktop-nav"></div>
	</nav>
	</header>
	<main>
	<!-- Everything within <article> is what the reader will render, if done correctly -->
	<article>
	<!-- The header can have quite a number things if done right, including an image, a share menu, some detail elements for table of continues and other things that can be optionally opened. This is obviously where you'd also put the author's name and the date of the article. -->
	<header id="title-and-article-nav-and-related-stuff">
	<h1 id="title">How to Write HTML for 'Readers'</h1>
	<h2>An Example of Semantic HTML, the Key to Writing HTML that Renders Well for Readers</h2>
	<div id="meta-data">
	<div id="article-metadata">
	<time datetime="2023-11-25" id="article-date">📅 November 25, 2023</time>
	<time datetime="PT6M" id="article-read-time">
	<span>\|</span>⏱ 6 minute read
	</time>
	</div>
	<nav id="share-menu">
	<a href="mailto:" id="email-share">email</a>
	<a href="https://news.ycombinator.com" id="hackernews-share" target="_blank">HN</a>
	</nav>
	</div>
	<figure>
	<img src="/foo.svg" alt="A description of the banner" aria-labelledby="banner-caption" id="image-banner-h">
	<img src="/foo.svg" alt="A description of the banner" aria-labelledby="banner-caption" id="image-banner-v">
	<figcaption id="banner-caption">(A caption on the article's banner image)</figcaption>
	</figure>
	<details id="tldr" open>
	<summary>tl;dr</summary>
	<blockquote>
	<p>A details element for the 'tl;dr' of the article. This will actually get rendered by most readers,
	including Apple's Safari.</p>
	</blockquote>
	</details>
	<nav id="table-of-contents">
	<details>
	<summary>Table of Contents</summary>
	<ol>
	<li>
	<a href="#introduction">Introduction</a>
	</li>
	<li>
	<a href="#main-thoughts">Main Thoughts</a>
	</li>
	<li><a href="#conclusion">Conclusion</a></li>
	</ol>
	</details>
	</nav>
	</header>
	<!-- You can put a text based divider between the <header> and <section> elements if you like -->
	<p>-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</p>

	<!-- Now begins the "main" article. Note that you must not have any H1 headers -->
	<section id="content">
	<h2 id="introduction">Introduction</h2>
	<p>This is an introduction to my topic of how to write semantic html that renders well for readers, such as the
	one that includes Safari. In the sections that follow you can pretty much include anything that would be
	rendered HTML from markdown, except H1 headers. Don't include those.</p>
	<h2 id="main-thoughts">Main Thoughts</h2>
	<p>In your article's content section, you can and should put images, tables, code snippets, and paraphrases.
	These will all render fine.</p>
	<h2 id="conclusion">Conclusion</h2>
	<p>If you follow this basic structure, your content will be rendered nicely, and you will be able to to place
	all the necessary navs and non-content stuff around it.</p>
	</section>

	<!-- You can put another text based divider to signify the end of the article -->
	<p>- ♤♧♡♢ -</p>
	</article>
	</main>
	<div id="comments">
	<!-- Left empty as an exercise. In any case, these will NOT be included in the reader view, which is correct and expected -->
	</div>
	<footer>
	<!-- blah blah copyright stuff, etc... -->
	</footer>
	</body>

	</html>