API tools faq
paste
Guest User

HTML5 PAGE WITH ALL TAGS

a guest
Aug 16th, 2020
3,711
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title> TEST HTML PAGE </title>
  5.     <meta charset="UTF-8">
  6.     <meta name="description" content="Most of HTML5 tags">
  7.     <meta name="keywords" content="HTML5, tags">
  8.     <meta name="author" content="http://blazardsky.space">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. </head>
  11. <body>
  12.     <header>
  13.       <nav>
  14.         <p>HEADER</p>
  15.         <menu type="context" id="navmenu">
  16.           <menuitem label="Home" icon="icon.png"> <a href="#">Home</a> </menuitem>
  17.         </menu>
  18.       </nav>
  19.     </header>
  20.     <main>
  21.       <h1> Heading... </h1>
  22.       <h2> Heading... </h2>
  23.       <h3> Heading... </h3>
  24.       <h4> Heading... </h4>
  25.       <h5> Heading... </h5>
  26.       <h6> Heading... </h6>
  27.       <p>
  28.         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>
  29.         <span> span </span>
  30.         <b>Bold word</b>
  31.         <i>italic</i>
  32.         <em>emphasis</em>
  33.         <mark>mark</mark>
  34.         <small> small </small>
  35.         <sub> sub </sub>
  36.         <sup> sup </sup>
  37.         <u> Statements... </u>
  38.         <abbr title="National Aeronautics and Space Administration">NASA</abbr>
  39.         <strike> strikethrough </strike>
  40.         <span><del> deprecated info </del> <ins> new info </ins> </span>
  41.         <s> not relevant </s>
  42.         <a href="#link">link</a>
  43.         <time datetime="2020-08-17 08:00">Monday at 8:00 AM</time>
  44.         <ruby><rb>ruby base<rt>annotation</ruby>
  45.         <br>
  46.         <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>CANC</kbd>
  47.       </p>     
  48.     </main>
  49.    
  50.     <p> This is a <q>short quote</q> </p>
  51.     <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>
  52.  
  53.     <ol>
  54.       <li><data value="21053">data tag</data></li>  
  55.       <li><data value="23452">data tag</data></li>
  56.       <li><data value="42545">data tag</data></li>  
  57.       <li>List item</li>
  58.       <li>List item</li>  
  59.       <li>List item</li>
  60.     </ol>
  61.    
  62.     <ul>
  63.       <li>List item</li>  
  64.       <li>List item</li>
  65.       <li>List item</li>  
  66.       <li>List item</li>
  67.       <li>List item</li>  
  68.       <li>List item</li>
  69.     </ul>
  70.    
  71.     <hr>
  72.    
  73.     <template>
  74.       <h2>Hidden content (after page loaded).</h2>
  75.     </template>
  76.    
  77.     <video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls>
  78.       <track kind="subtitles" src="subtitles_de.vtt" srclang="de">
  79.       <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
  80.       <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja">
  81.       Sorry, your browser doesn't support HTML5 <code>video</code>, but you can
  82.       download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet Archive</a>.
  83.     </video>
  84.  
  85.     <object data="flashmovie.swf" width="600" height="800" type="application/x-shockwave-flash">
  86.     Please install the Shockwave plugin to watch this movie.
  87.     </object>
  88.    
  89.     <pre>
  90.  
  91.                                        _,'/
  92.                                   _.-''._:
  93.                           ,-:`-.-'    .:.|
  94.                          ;-.''       .::.|
  95.           _..------.._  / (:.       .:::.|
  96.        ,'.   .. . .  .`/  : :.     .::::.|
  97.      ,'. .    .  .   ./    \ ::. .::::::.|
  98.    ,'. .  .    .   . /      `.,,::::::::.;\
  99.   /  .            . /       ,',';_::::::,:_:
  100.  / . .  .   .      /      ,',','::`--'':;._;
  101. : .             . /     ,',',':::::::_:'_,'
  102. |..  .   .   .   /    ,',','::::::_:'_,'
  103. |.              /,-. /,',':::::_:'_,'
  104. | ..    .    . /) /-:/,'::::_:',-'
  105. : . .     .   // / ,'):::_:',' ;
  106.  \ .   .     // /,' /,-.','  ./
  107.   \ . .  `::./,// ,'' ,'   . /
  108.    `. .   . `;;;,/_.'' . . ,'
  109.     ,`. .   :;;' `:.  .  ,'
  110.    /   `-._,'  ..  ` _.-'
  111.   (     _,'``------''
  112.    `--''
  113.  
  114.     </pre>
  115.  
  116.     <code>
  117.     // code tag
  118.     #include <iostream>
  119.  
  120.     using namespace std;
  121.  
  122.     int main()
  123.     {
  124.         cout << "Hello World!" << endl;
  125.         return 0;
  126.     }
  127.     </code>
  128.     <p>
  129.       <var> variable </var> = 1000;
  130.       <samp>Traceback (most recent call last):<br>NameError: name 'variabl' is not defined</samp>
  131.     </p>
  132.     <table>
  133.       <thead>
  134.         <tr>
  135.           <th>Numbers</th>
  136.           <th>Letters</th>
  137.           <th>Colors</th>
  138.         </tr>
  139.       </thead>
  140.       <tfoot>
  141.         <tr>
  142.           <td>123</td>
  143.           <td>ABC</td>
  144.           <td>RGB</td>
  145.         </tr>
  146.       </tfoot>
  147.       <tbody>
  148.         <tr>
  149.           <td>1</td>
  150.           <td>A</td>
  151.           <td>Red</td>
  152.         </tr>
  153.         <tr>
  154.           <td>2</td>
  155.           <td>B</td>
  156.           <td>Green</td>
  157.         </tr>
  158.         <tr>
  159.           <td>3</td>
  160.           <td>C</td>
  161.           <td>Blue</td>
  162.         </tr>
  163.       </tbody>
  164.     </table>
  165.  
  166.     <p> A <dfn>definition</dfn> is an explanation of the meaning of a word or phrase. </p>
  167.  
  168.     <details>
  169.       <summary>Summary of content below</summary>
  170.       <p>Content 1</p>
  171.       <p>Content 2</p>
  172.       <p>Content 3</p>
  173.       <p>Content 4</p>
  174.     </details>
  175.     <section>
  176.       <h1>Content</h1>
  177.       <p>Informations about content.</p>
  178.     </section>
  179.  
  180.     <progress value="33" max="100"></progress>
  181.     <meter value="11" min="0" max="45" optimum="40">25 out of 45</meter>
  182.    
  183.     <p> 2+2 = <output>4</output> </p>
  184.  
  185.     <select>
  186.      <optgroup label="Choice [1-3]">
  187.        <option value="1">One</option>
  188.        <option value="2">Two</option>
  189.        <option value="3">Three</option>
  190.      </optgroup>
  191.      <optgroup label="Choice [4-6]">
  192.        <option value="4">Four</option>
  193.        <option value="5">Five</option>
  194.        <option value="6">Six</option>
  195.      </optgroup>
  196.     </select>
  197.    
  198.     <div>
  199.       <div>
  200.         <p> div > div > p </p>
  201.       </div>
  202.      
  203.     <br>
  204.    
  205.    
  206.     </div>
  207.      <svg width="100" height="100">
  208.       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  209.     </svg>
  210.    
  211.     <br>
  212.    
  213.     <textarea id="textarea" name="textarea" rows="4" cols="50">
  214.       Write something in here
  215.     </textarea>
  216.    
  217.     <br>
  218.    
  219.     <audio controls>
  220.       I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.
  221.       <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg" type="audio/ogg">
  222.       <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3" type="audio/mpeg">
  223.     </audio>
  224.     <p>This is a recording of a talk called <cite>Reclaim HTML5</cite> which was orinally delieved in Vancouver at a <a href="http://www.meetup.com/vancouver-javascript-developers/" taget="_blank">Super VanJS Meetup</a>. It is hosted by <a href="https://archive.org/details/ReclaimHtml5" target="_blank">The Internet Archive</a> and licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">CC 3.0</a>.</p> 
  225.    
  226.     <iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
  227.        
  228.     <article>
  229.       <header>
  230.         <h2>Title of Article</h2>
  231.         <span>by Arthur T. Writer</span>
  232.       </header>
  233.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat sollicitudin nisi, at convallis nunc semper et. Donec ultrices odio ac purus facilisis, at mollis urna finibus.</p>
  234.       <figure>
  235.         <img src="https://placehold.it/600x300" alt="placeholder-image">
  236.         <figcaption> Caption.</figcaption>
  237.       </figure>
  238.       <footer> <dl> <dt>Published</dt> <dd>17 August 2020</dd> <dt>Tags</dt> <dd>Sample Posts, html example</dd> </dl> </footer>
  239.     </article>
  240.    
  241.     <form>
  242.      <fieldset>
  243.       <legend>Personal Information</legend>
  244.       <label for="name">Name</label><br>
  245.       <input name="name" id="name"><br>
  246.       <label for="dob">Date of Birth<label><br>
  247.       <input name="dob" id="dob" type="date">
  248.      </fieldset>
  249.     </form>
  250.    
  251.     <aside>
  252.       <p> P inside ASIDE tag </p>
  253.     </aside>
  254.     <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>
  255.    
  256.     <img src="https://placehold.it/100x100" alt="placeholder-image">
  257.    
  258.     <form action="" method="get">
  259.       <label for="browser">Choose your browser from the list:</label>
  260.       <input list="browsers" name="browser" id="browser">
  261.       <datalist id="browsers">
  262.         <option value="Edge">
  263.         <option value="Firefox">
  264.         <option value="Chrome">
  265.         <option value="Opera">
  266.         <option value="Safari">
  267.       </datalist>
  268.       <input type="submit">
  269.     </form>
  270.    
  271.     <footer>
  272.       <address> relevant contacts <a href="mailto:[email protected]">mail</a>.</address>
  273.       <div> created by <a href="https://blazardsky.space">@blazardsky</a></div>
  274.     </footer>
  275.    
  276. </body>
  277. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!