HTML rendering test v2: Podcast Show Notes

May 21, 2024

Rendering HTML in description, summary, content:encoded

<p> This project is a simple test of HTML styles and elements. <a href="https://splendorous-taiyaki-c3126b.netlify.app/feed.rss">Link to RSS feed url</a>. </p> <p> The main use case for this test is to visualize how HTML is rendered in different podcast listening apps (Apple Podcasts, Spotify, YouTube Music, etc). </p> <h1>Testing an H1</h1> <p> This is an anchor tag/hyper link: <a href="https://transistor.fm/how-to-start-a-podcast/">How to start a podcast</a> </p> <p> This is a paragraph. "To record a podcast, you'll need a microphone, PC or tablet, and audio editing software. Plug your microphone into your computer (or tablet) and record your episode. Once you're done editing it, you'll export the MP3 and upload it to a podcast hosting provider (like <a href="https://transistor.fm/podcast-hosting/">Transistor.fm</a>). Your podcast host will help you distribute your podcast to Apple Podcasts, Spotify, and other listening apps." </p> <p> <strong>Here's a block quote</strong>: </p> <blockquote> <p> Man surprised me most about humanity. Because he sacrifices his health in order to make money. Then he sacrifices money to recuperate his health. And then he is so anxious about the future that he does not enjoy the present; the result being that he does not live in the present or the future; he lives as if he is never going to die, and then dies having never really lived. – James J Lachard </p> </blockquote> <h2>Testing an H2</h2> <p> <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code> </p> <p> This is a paragraph with a single line break inside of it. This is before the line break.<br>This is after the line break. </p> <p> This is a paragraph with a two line breaks inside of it. This is before the line breaks.<br><br>This is after the line breaks. </p> <h3>Testing an H3</h3> <div> This is a DIV. To record a podcast, you'll need a microphone, PC or tablet, and audio editing software. Plug your microphone into your computer (or tablet) and record your episode. Once you're done editing it, you'll export the MP3 and upload it to a podcast hosting provider (like <a href="https://transistor.fm">Transistor.fm</a>). Your podcast host will help you distribute your podcast to Apple Podcasts, Spotify, and other listening apps. </div> <div> This is another DIV with a single line break inside of it. This is before the line break.<br>This is after the line break. </div> <div> This is a DIV with a two line breaks inside of it. This is before the line breaks.<br><br>This is after the line breaks. </div> <h4>Testing an H4</h4> <p> <strong>A simple itemized lists look like this:</strong> </p> <ul> <li>this one</li> <li>that one</li> <li>the other one</li> </ul> <p>A nested list:</p> <ol> <li> First, get these ingredients: <ul> <li>carrots</li> <li>celery</li> <li>lentils</li> </ul> </li> <li>Boil some water.</li> <li>Do not bump wooden spoon or it will fall.</li> </ol> <p>A horizontal line:</p> <hr /> <p>Tables can look like this:</p> <table border="1"> <caption>Shoes, their sizes, and what they're made of</caption> <thead> <tr> <th align="left">size</th> <th align="left">material</th> <th align="left">color</th> </tr> </thead> <tbody> <tr> <td align="left">9</td> <td align="left">leather</td> <td align="left">brown</td> </tr> <tr> <td align="left">10</td> <td align="left">hemp canvas</td> <td align="left">natural</td> </tr> <tr> <td align="left">11</td> <td align="left">glass</td> <td align="left">transparent</td> </tr> </tbody> </table> <p>A horizontal rule follows.</p> <hr /> <p>Images don't generally show up in podcast show notes, but here is an image just in case:</p> <div> <img alt="example image" src="https://transistorfm.github.io/rss-html-render-test/podcast-cover.jpg" style="width:100%" title="An exemplary image" /> <p>example image</p> </div>