davestewart/acceptable github html.html

## acceptable github html.html
<p>See: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a></p>

<section>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</section>

<section>
  <h1>Formatting</h1>

  <h2>paragraph and span</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida
    luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae. <br>
    <span> span </span>
  </p>

  <h2>b, i, em, u, strike, link</h2>
  <b>Bold word</b>
  <i>italic</i>
  <em>emphasis</em>
  <u> Statements... </u>
  <strike> strikethrough </strike>
  <a href="#link">link</a>

  <h2>small, sub, sup</h2>
  <small> small </small>
  <sub> sub </sub>
  <sup> sup </sup>

  <h2>s, del, ins</h2>
  <s>s</s>
  <del>del</del>
  <ins>ins</ins>

  <h2>breaks</h2>
  <hr>
  <br>

  <h2>mark, cite, abbr</h2>
  <mark>mark</mark>
  <cite>cite</cite>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr>

  <h2>ruby, tb, rt</h2>
  <ruby>
    <rb>ruby base</rb>
    <rt>annotation</rt>
  </ruby>

  <h2>kbd</h2>
  <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>CANC</kbd>

  <h2>quotes</h2>
  <p> This is a <q>short quote</q></p>
  <blockquote>
    This instead is a long quote that is going to use a lot of words and also cite who said that. —<cite>Some People</cite>
  </blockquote>

  <h2>ordered list</h2>
  <ol>
    <li>
      <data value="21053">data tag</data>
    </li>
    <li>
      <data value="23452">data tag</data>
    </li>
    <li>
      <data value="42545">data tag</data>
    </li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ol>

  <h2>unordered list</h2>
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>

  <h2>definition</h2>
  <dl>
    <dt>Published</dt>
    <dd>17 August 2020</dd>
    <dt>Tags</dt>
    <dd>Sample Posts, html example</dd>
  </dl>

</section>

<section>
  <h1>Media</h1>

  <h2>img</h2>
  <img src="https://via.placeholder.com/350x150" alt="placeholder-image">

  <map name="shapesmap">
    <area shape="rect" coords="29,32,230,215" href="#square" alt="Square">
    <area shape="circle" coords="360,130,100" href="#circle" alt="Circle">
  </map>

  <h2>video</h2>
  <video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls>
    <track kind="subtitles" src="subtitles_de.vtt" srclang="de">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
    <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja">
    Sorry, your browser doesn't support HTML5 <code>video</code>, but you can
    download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet
    Archive</a>.
  </video>

  <h2>object</h2>
  <object data="flashmovie.swf" width="600" height="800" type="application/x-shockwave-flash">
    Please install the Shockwave plugin to watch this movie.
  </object>

  <h2>audio</h2>
  <audio controls>
    I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.
    <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg" type="audio/ogg">
    <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3" type="audio/mpeg">
  </audio>

  <h2>svg</h2>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
  </svg>

  <h2>iframe</h2>
  <iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</section>

<section>
  <h1>Code</h1>

  <h2>pre</h2>
  <pre>

                                                                               _,'/
                                                                      _.-''._:
                                                      ,-:`-.-'    .:.|
                                                   ;-.''       .::.|
                      _..------.._  / (:.       .:::.|
               ,'.   .. . .  .`/  : :.     .::::.|
           ,'. .    .  .   ./    \ ::. .::::::.|
       ,'. .  .    .   . /      `.,,::::::::.;\
      /  .            . /       ,',';_::::::,:_:
   / . .  .   .      /      ,',','::`--'':;._;
  : .             . /     ,',',':::::::_:'_,'
  |..  .   .   .   /    ,',','::::::_:'_,'
  |.              /,-. /,',':::::_:'_,'
  | ..    .    . /) /-:/,'::::_:',-'
  : . .     .   // / ,'):::_:',' ;
   \ .   .     // /,' /,-.','  ./
      \ . .  `::./,// ,'' ,'   . /
       `. .   . `;;;,/_.'' . . ,'
          ,`. .   :;;' `:.  .  ,'
       /   `-._,'  ..  ` _.-'
      (     _,'``------''
       `--''

  </pre>

  <h2>code</h2>
  <code>
    // code tag
    #include
    <iostream>

      using namespace std;

      int main()
      {
      cout << "Hello World!" << endl; return 0; }
  </code>

  <h2>var + samp</h2>
  <p>
    <var> variable </var> = 1000;
    <samp>Traceback (most recent call last):<br>NameError: name 'variabl' is not defined</samp>
  </p>
</section>

<section>
  <h1>Information</h1>

  <h2>table</h2>
  <table>
    <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
      <th>Colors</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
      <td>123</td>
      <td>ABC</td>
      <td>RGB</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
      <td>1</td>
      <td>A</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
      <td>Green</td>
    </tr>
    <tr>
      <td>3</td>
      <td>C</td>
      <td>Blue</td>
    </tr>
    </tbody>
  </table>

  <h2>details</h2>
  <details>
    <summary>Summary of content below</summary>
    <p>Content 1</p>
    <p>Content 2</p>
    <p>Content 3</p>
    <p>Content 4</p>
  </details>
</section>

<section>
  <h1>Form controls</h1>

  <h2>form with fieldset and legend</h2>
  <form>
    <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Name</label><br>
      <input name="name" id="name"><br>
      <label for="dob">Date of Birth</label>
      <input name="dob" id="dob" type="date">
    </fieldset>
  </form>

  <h2>form with dataset</h2>
  <form action="" method="get">
    <label for="browser">Choose your browser from the list:</label>
    <input list="browsers" name="browser" id="browser">
    <datalist id="browsers">
      <option value="Edge">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    <input type="submit">
  </form>

  <h2>textarea</h2>
  <textarea id="textarea" name="textarea" rows="4" cols="50">Write something in here</textarea>

  <h2>time</h2>
  <time datetime="2020-08-17 08:00">Monday at 8:00 AM</time>

  <h2>progress</h2>
  <progress value="33" max="100"></progress>

  <h2>meter</h2>
  <meter value="11" min="0" max="45" optimum="40">25 out of 45</meter>

  <h2>select</h2>
  <select>
    <optgroup label="Choice [1-3]">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </optgroup>
    <optgroup label="Choice [4-6]">
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
    </optgroup>
  </select>

  <h2>output</h2>
  <p> 2+2 = <output>4</output></p>

</section>

<section>
  <h1>Layout</h1>

  <h2>nav, menu</h2>
  <nav>
    <menu type="context" id="navmenu">
      <menuitem label="Home" icon="icon.png"><a href="#">Home</a></menuitem>
    </menu>
  </nav>

  <h2>figure</h2>
  <figure>
    <img src="https://via.placeholder.com/350x150" alt="placeholder-image">
    <figcaption> Caption.</figcaption>
  </figure>

  <h2>header</h2>
  <header>
    <h2>Title of Article</h2>
    <span>by Arthur T. Writer</span>
  </header>

  <h2>footer</h2>
  <footer>
    <p>This is a footer</p>
  </footer>

  <h2>Aside</h2>
  <aside>
    <p> P inside ASIDE tag </p>
  </aside>

  <footer>
    <address> relevant contacts <a href="mailto:mail@example.com">mail</a>.</address>
    <div> created by <a href="https://blazardsky.space">@blazardsky</a></div>
  </footer>
</section>


## example.md

      
    Raw
  

              example.md
            
          
    See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  Heading 1

  Heading 2

  heading 3

  Heading 4

  Heading 5

  Heading 6


  Formatting

  paragraph and span

  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida
    luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae. 

     span 
  
  b, i, em, u, strike, link

  Bold word
  italic
  emphasis
   Statements... 
   strikethrough 
  link
  small, sub, sup

   small 
  _sub
  ^sup
  s, del, ins

  s
  del
  ins
  breaks

  
  mark, cite, abbr

  mark
  cite
  NASA
  ruby, tb, rt

  
    ruby base
    annotation
  
  kbd

  CTRL+ALT+CANC
  quotes

   This is a short quote
  
    This instead is a long quote that is going to use a lot of words and also cite who said that. —Some People
  
  ordered list

  
      data tag
    
    
      data tag
    
    
      data tag
    
    List item
    List item
    List item
  
  unordered list

  
    List item
    List item
    List item
    List item
    List item
    List item
  
  definition

  
    Published
    17 August 2020
    Tags
    Sample Posts, html example
  

  Media

  img

  
  video

  
  object

  
    Please install the Shockwave plugin to watch this movie.
  
  audio

  
    I'm sorry. You're browser doesn't support HTML5 audio.
    
    
  svg

  
  iframe

  <iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>


  Code

  pre

                                                                             _,'/
                                                                  _.-''._:
                                                  ,-:`-.-'    .:.|
                                               ;-.''       .::.|
                  _..------.._  / (:.       .:::.|
           ,'.   .. . .  .`/  : :.     .::::.|
       ,'. .    .  .   ./    \ ::. .::::::.|
   ,'. .  .    .   . /      `.,,::::::::.;\
  /  .            . /       ,',';_::::::,:_:

/ . .  .   .      /      ,',','::--'':;._; : .             . /     ,',',':::::::_:'_,' |..  .   .   .   /    ,',','::::::_:'_,' |.              /,-. /,',':::::_:'_,' | ..    .    . /) /-:/,'::::_:',-' : . .     .   // / ,'):::_:',' ; \ .   .     // /,' /,-.','  ./ \ . .  ::./,// ,'' ,'   . /
. .   . ;;;,/_.'' . . ,'
,. .   :;;' :.  .  ,'
/   -._,'  ..   _.-'
(     _,'``------''
`--''
  
  code

  
    // code tag
    #include
    
  using namespace std;

  int main()
  {
  cout << "Hello World!" << endl; return 0; }

  
  var + samp

  
     variable  = 1000;
    Traceback (most recent call last):
NameError: name 'variabl' is not defined
  

  Information

  table

  
      Numbers
      Letters
      Colors
    
    
      123
      ABC
      RGB
    
    
      1
      A
      Red
    
    
      2
      B
      Green
    
    
      3
      C
      Blue
    
    
  details

  
    Summary of content below
    Content 1
    Content 2
    Content 3
    Content 4
  

  Form controls

  form with fieldset and legend

  
      Personal Information
      Name

      
      Date of Birth
      
    
  form with dataset

  
    Choose your browser from the list:
    
    
  textarea

  <textarea id="textarea" name="textarea" rows="4" cols="50">Write something in here</textarea>
  time

  Monday at 8:00 AM
  progress

  
  meter

  25 out of 45
  select

  
      One
      Two
      Three
    
    
      Four
      Five
      Six
    
  
  output

   2+2 = 4


  Layout

  nav, menu

  
      Home
    
  
  figure

  
     Caption.
  
  header

  
    Title of Article

    by Arthur T. Writer
  
  footer

  
    This is a footer
  
  Aside

  
     P inside ASIDE tag 
  
  
     relevant contacts mail.
     created by @blazardsky
	<p>See: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a></p>

	<section>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	</section>

	<section>
	<h1>Formatting</h1>

	<h2>paragraph and span</h2>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida
	luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae. <br>
	<span> span </span>
	</p>

	<h2>b, i, em, u, strike, link</h2>
	<b>Bold word</b>
	<i>italic</i>
	<em>emphasis</em>
	<u> Statements... </u>
	<strike> strikethrough </strike>
	<a href="#link">link</a>

	<h2>small, sub, sup</h2>
	<small> small </small>
	<sub> sub </sub>
	<sup> sup </sup>

	<h2>s, del, ins</h2>
	<s>s</s>
	<del>del</del>
	<ins>ins</ins>

	<h2>breaks</h2>
	<hr>
	<br>

	<h2>mark, cite, abbr</h2>
	<mark>mark</mark>
	<cite>cite</cite>
	<abbr title="National Aeronautics and Space Administration">NASA</abbr>

	<h2>ruby, tb, rt</h2>
	<ruby>
	<rb>ruby base</rb>
	<rt>annotation</rt>
	</ruby>

	<h2>kbd</h2>
	<kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>CANC</kbd>

	<h2>quotes</h2>
	<p> This is a <q>short quote</q></p>
	<blockquote>
	This instead is a long quote that is going to use a lot of words and also cite who said that. —<cite>Some People</cite>
	</blockquote>

	<h2>ordered list</h2>
	<ol>
	<li>
	<data value="21053">data tag</data>
	</li>
	<li>
	<data value="23452">data tag</data>
	</li>
	<li>
	<data value="42545">data tag</data>
	</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	</ol>

	<h2>unordered list</h2>
	<ul>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	</ul>

	<h2>definition</h2>
	<dl>
	<dt>Published</dt>
	<dd>17 August 2020</dd>
	<dt>Tags</dt>
	<dd>Sample Posts, html example</dd>
	</dl>

	</section>

	<section>
	<h1>Media</h1>

	<h2>img</h2>
	<img src="https://via.placeholder.com/350x150" alt="placeholder-image">

	<map name="shapesmap">
	<area shape="rect" coords="29,32,230,215" href="#square" alt="Square">
	<area shape="circle" coords="360,130,100" href="#circle" alt="Circle">
	</map>

	<h2>video</h2>
	<video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls>
	<track kind="subtitles" src="subtitles_de.vtt" srclang="de">
	<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
	<track kind="subtitles" src="subtitles_ja.vtt" srclang="ja">
	Sorry, your browser doesn't support HTML5 <code>video</code>, but you can
	download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet
	Archive</a>.
	</video>

	<h2>object</h2>
	<object data="flashmovie.swf" width="600" height="800" type="application/x-shockwave-flash">
	Please install the Shockwave plugin to watch this movie.
	</object>

	<h2>audio</h2>
	<audio controls>
	I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.
	<source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg" type="audio/ogg">
	<source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3" type="audio/mpeg">
	</audio>

	<h2>svg</h2>
	<svg width="100" height="100">
	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
	</svg>

	<h2>iframe</h2>
	<iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
	</section>

	<section>
	<h1>Code</h1>

	<h2>pre</h2>
	<pre>

	_,'/
	_.-''._:
	,-:`-.-' .:.\|
	;-.'' .::.\|
	_..------.._ / (:. .:::.\|
	,'. .. . . .`/ : :. .::::.\|
	,'. . . . ./ \ ::. .::::::.\|
	,'. . . . . / `.,,::::::::.;\
	/ . . / ,',';_::::::,:_:
	/ . . . . / ,',','::`--'':;._;
	: . . / ,',',':::::::_:'_,'
	\|.. . . . / ,',','::::::_:'_,'
	\|. /,-. /,',':::::_:'_,'
	\| .. . . /) /-:/,'::::_:',-'
	: . . . // / ,'):::_:',' ;
	\ . . // /,' /,-.',' ./
	\ . . `::./,// ,'' ,' . /
	`. . . `;;;,/_.'' . . ,'
	,`. . :;;' `:. . ,'
	/ `-._,' .. ` _.-'
	( _,'``------''
	`--''

	</pre>

	<h2>code</h2>
	<code>
	// code tag
	#include
	<iostream>

	using namespace std;

	int main()
	{
	cout << "Hello World!" << endl; return 0; }
	</code>

	<h2>var + samp</h2>
	<p>
	<var> variable </var> = 1000;
	<samp>Traceback (most recent call last):<br>NameError: name 'variabl' is not defined</samp>
	</p>
	</section>

	<section>
	<h1>Information</h1>

	<h2>table</h2>
	<table>
	<thead>
	<tr>
	<th>Numbers</th>
	<th>Letters</th>
	<th>Colors</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	<td>123</td>
	<td>ABC</td>
	<td>RGB</td>
	</tr>
	</tfoot>
	<tbody>
	<tr>
	<td>1</td>
	<td>A</td>
	<td>Red</td>
	</tr>
	<tr>
	<td>2</td>
	<td>B</td>
	<td>Green</td>
	</tr>
	<tr>
	<td>3</td>
	<td>C</td>
	<td>Blue</td>
	</tr>
	</tbody>
	</table>

	<h2>details</h2>
	<details>
	<summary>Summary of content below</summary>
	<p>Content 1</p>
	<p>Content 2</p>
	<p>Content 3</p>
	<p>Content 4</p>
	</details>
	</section>

	<section>
	<h1>Form controls</h1>

	<h2>form with fieldset and legend</h2>
	<form>
	<fieldset>
	<legend>Personal Information</legend>
	<label for="name">Name</label><br>
	<input name="name" id="name"><br>
	<label for="dob">Date of Birth</label>
	<input name="dob" id="dob" type="date">
	</fieldset>
	</form>

	<h2>form with dataset</h2>
	<form action="" method="get">
	<label for="browser">Choose your browser from the list:</label>
	<input list="browsers" name="browser" id="browser">
	<datalist id="browsers">
	<option value="Edge">
	<option value="Firefox">
	<option value="Chrome">
	<option value="Opera">
	<option value="Safari">
	</datalist>
	<input type="submit">
	</form>

	<h2>textarea</h2>
	<textarea id="textarea" name="textarea" rows="4" cols="50">Write something in here</textarea>

	<h2>time</h2>
	<time datetime="2020-08-17 08:00">Monday at 8:00 AM</time>

	<h2>progress</h2>
	<progress value="33" max="100"></progress>

	<h2>meter</h2>
	<meter value="11" min="0" max="45" optimum="40">25 out of 45</meter>

	<h2>select</h2>
	<select>
	<optgroup label="Choice [1-3]">
	<option value="1">One</option>
	<option value="2">Two</option>
	<option value="3">Three</option>
	</optgroup>
	<optgroup label="Choice [4-6]">
	<option value="4">Four</option>
	<option value="5">Five</option>
	<option value="6">Six</option>
	</optgroup>
	</select>

	<h2>output</h2>
	<p> 2+2 = <output>4</output></p>

	</section>

	<section>
	<h1>Layout</h1>

	<h2>nav, menu</h2>
	<nav>
	<menu type="context" id="navmenu">
	<menuitem label="Home" icon="icon.png"><a href="#">Home</a></menuitem>
	</menu>
	</nav>

	<h2>figure</h2>
	<figure>
	<img src="https://via.placeholder.com/350x150" alt="placeholder-image">
	<figcaption> Caption.</figcaption>
	</figure>

	<h2>header</h2>
	<header>
	<h2>Title of Article</h2>
	<span>by Arthur T. Writer</span>
	</header>

	<h2>footer</h2>
	<footer>
	<p>This is a footer</p>
	</footer>

	<h2>Aside</h2>
	<aside>
	<p> P inside ASIDE tag </p>
	</aside>

	<footer>
	<address> relevant contacts <a href="mailto:mail@example.com">mail</a>.</address>
	<div> created by <a href="https://blazardsky.space">@blazardsky</a></div>
	</footer>
	</section>