Did you know these 67

💡 HTML5 tags 😲

and how they look?

<a>

A link to the <a href="https://github.com/vanzelleb/htmlparade" target="_blank">Github repository</a>.

A link to the Github repository.

<abbr>

<abbr title="Hyper Text Markup Language">HTML</abbr> is an abbreviation.

HTML is an abbreviation.

<address>

<address>Lake view 5, 12345 Uptown</address>

Lake view 5, 12345 Uptown

<article>

<article> This page lists all visible HTML5 tags and shows a preview of their look &amp; feel. The HTML tags are shown without any CSS styling. </article>

This page lists all visible HTML5 tags and shows a preview of their look & feel. The HTML tags are shown without any CSS styling.

<audio>

<audio controls=""> <source src="/audio.cbb655a3."> Your browser does not support the audio element. </audio>

<b>

This is <b>fat text</b>

This is fat text

<bdo>

<bdo dir="rtl">Inverses text direction</bdo>

Inverses text direction

<blockquote>

<blockquote cite="http://htmlparade.netlify.app"> This page lists all visible HTML5 tags and shows a preview of their look &amp; feel. The HTML tags are shown without any CSS styling. </blockquote>

This page lists all visible HTML5 tags and shows a preview of their look & feel. The HTML tags are shown without any CSS styling.

<button>

<button type="button">A button</button>

<canvas>

<canvas width="300" height="150"></canvas>

<cite>

<cite>"Love is a serious mental disease."</cite>

"Love is a serious mental disease."

<code>

Use this for code: <code>println("Hello world")</code>

Use this for code: println("Hello world")

<dl>

<dl> <dt>Point</dt> <dd>Subpoint</dd> <dt>Point</dt> <dd>Subpoint</dd> </dl>

Point: Subpoint
Point: Subpoint

<del>

This word was <del>deleted</del>

This word was ~~deleted~~

<details>

<details> <summary>Click for details</summary> <p>This page lists all visible HTML5 tags and shows a preview of their look &amp; feel. The HTML tags are shown without any CSS styling.</p> </details>

Click for details

This page lists all visible HTML5 tags and shows a preview of their look & feel. The HTML tags are shown without any CSS styling.

<dfn>

A definition of <dfn title="HyperText Markup Language">HTML</dfn>

A definition of HTML

<dialog>

<dialog open=""> A dialog window <button onclick="this.parentNode.close()">Close</button> </dialog>

<em>

This word is <em>emphasized</em>

This word is emphasized

<embed>

<embed type="image/png" src="/image.cac63c4a.png" width="200">

<fieldset>

<fieldset> <legend>Why?</legend> There was no such site yet so I made it. </fieldset>

Why? There was no such site yet so I made it.

<footer>

<footer> © No copyright reserved :-) </footer>

<h1>

<h1>HTML Parade</h1>

HTML Parade

<h2>

<h2>HTML Parade</h2>

HTML Parade

<h3>

<h3>HTML Parade</h3>

HTML Parade

<h4>

<h4>HTML Parade</h4>

HTML Parade

<h5>

<h5>HTML Parade</h5>

HTML Parade

<h6>

<h6>HTML Parade</h6>

HTML Parade

<header>

<header> A header text looks just like normal text. </header>

A header text looks just like normal text.

<hr>

<hr>

<i>

Fancy looking <i>italic text.</i>

Fancy looking italic text.

<iframe>

<iframe src="https://htmlparade.netlify.app" title="A page in a page"></iframe>

<img>

<img src="/image.cac63c4a.png" width="200" alt="profile image">

<input>

<input type="text" placeholder="Enter your name">

<input>

<input type="checkbox" checked="">

<input>

<input type="color">

<input>

<input type="date">

<input>

<input type="file">

<input>

<input type="radio" checked="">

<input>

<input type="range">

<input>

<input type="month">

<input>

<input type="time">

<input>

<input type="week">

<ins>

Something got <ins>inserted here</ins>

Something got inserted here

<kbd>

Press <kbd>CTRL+Shift+P</kbd>

Press CTRL+Shift+P

<label>

<label>Label for an input tag:</label>

Label for an input tag:

<mark>

This text is <mark>highlighted.</mark>

This text is highlighted.

<meter>

<meter value="0.8">80% done</meter>

80% done

<object>

<object data="/image.cac63c4a.png" width="200"></object>

<p>

This is another <p>paragraph of this text.</p>

This is another

paragraph of this text.

<picture>

<picture> <source media="(min-width:650px)" srcset="/image.cac63c4a.png"> <img src="/image.cac63c4a.png" style="width:200px;"> </picture>

<pre>

<pre>          This HTML element preserves 
          line breaks
          and    blank spaces in 
          the text.
          </pre>

          This HTML element preserves 
          line breaks
          and    blank spaces in 
          the text.

<progress>

<progress value="66" max="100"> 66% </progress>

66%

<q>

He said: <q>Use this for short quotes.</q>

He said: Use this for short quotes.

<s>

HTML is <s>difficult</s> easy

HTML is ~~difficult~~ easy

<samp>

Computer says <samp>no</samp>

Computer says no

<select>

<select> <optgroup label="Like"> <option>I like</option> <option>I like a lot</option> <option>Great</option> </optgroup> <optgroup label="Dislike"> <option>Don't like</option> <option>Don't like at all</option> <option>Horrible</option> </optgroup> </select>

<small>

<small>Small text</small>

Small text

<strong>

<strong>Bookmark this page</strong>

Bookmark this page

<sub>

Normal text <sub>and lower text.</sub>

Normal text _{and lower text.}

<sup>

Normal text <sup>and higher text</sup>

Normal text ^{and higher text}

<svg>

<svg width="100" height="100"><circle cx="50" cy="50" r="30" stroke="orange" stroke-width="16" fill="#00f"></circle></svg>

<table>

<table> <thead> <tr> <th>Month</th> <th>Costs</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>$150</td> </tr> </tfoot> </table>

Month	Costs
January	$100
February	$50
Total	$150

<textarea>

<textarea rows="4" cols="50">This element is for entering a lot of text. It overflows automatically when you enter more text than there is space.
          </textarea>

<time>

The time is <time>10:10</time>

The time is 10:10

<u>

This text is <u>underlined</u>

This text is underlined

<ul>

<ul> <li>An</li> <li>Unordered</li> <li>List</li> </ul>

An
Unordered
List

<video>

<video width="300" controls=""> <source src="/video.f2816d80.mp4"> Your browser does not support the video tag. </video>

Twitter vanzelleb