Update from HTML4.01 to HTML5

What you should know when writing new HTML5 files

With HTML5, new semantic elements were created. This makes content easier to read in the HTML file removes the need to label div elements with ids or classes. Below is a list of new semantic elements that can be used. It is recommended to view this from a desktop.

Structural Elements

Tag Name Usage Structure Notes Example (Code) Example (Live)
article This tag creates a container for smaller sections of the page, eg. blog posts, comments. <article>
<!-- Insert your content here -->
</article>
  • This is not supported on Internet Explorer 8 and earlier.
  • This can replace the usage of:
    <div class="item">
    <!-- Insert your content here -->
    </div>
<article>
<h4>This is my section title</h4>
<p>Let's write some content here!</p>
</article>

This is my section title

Let's write some content here!
aside This tag creates a section to describe content related to the main content. It is also not read by text to audio readers. <aside>
<!-- Insert your content here -->
</aside>
  • This is not supported on Internet Explorer 8 and older.
  • This can replace the usage of:
    <div class="caption">
    <!-- Insert your content here -->
    </div>
<aside>
<p>Actuarial services is defined as...</p>
</aside>
bdi This tag isolates text that could be written in a different direction (eg. Arabic) compared to the rest of the body text. <bdi><!-- Insert your content here --></bdi>

This element is not supported on Internet Explorer/Edge

 Time to learn some Arabic! Here's a word: <bdi>إيان</bdi> Time to learn some Arabic! Here's a word: إيان
details This tag specifies additional details which the user and view/hide on demand. <details>
<!-- Insert your content here -->
</details>
  • This element is not supported on Internet Explorer/Edge
  • The following attributes are used:
    Attribute Value Usage
    open no values used sets details as opened upon load
<details open>
<p>Here is a picture of me in New York City!</p>
</details>

Here is a picture of me in New York City!
dialog This tag creates a separate dialog box to contain information. <dialog><!-- Insert your content here --></dialog>
  • This element is not supported on Internet Explorer/Edge
  • The following attributes are used:
    Attribute Value Usage
    open no values used sets details as opened upon load
<p>I went to Japan last week <dialog open>I would like to go to Hokkaido in my next trip!</dialog>and will be going to China next week!</p>

I went to Japan last week

I would like to go to Hokkaido in my next trip! (this is used with the dialog tag)and will be going to China next week!
figcaption This tag is used to create a caption for a photo. <figcaption><!-- Insert your content here --></figcaption>

There are no additional notes for this tag.

 <figure>
<img src="./resources/miso_butterfly.jpg" style="width: 200px; height: 300px; object-fit: cover;" /> <figcaption>Miso dressing up as a butterfly for Halloween 2021!</figcaption>
</figure>
Miso dressing up as a butterfly for Halloween 2021!
figure This tag is used to display a photo separate from the main body. <figure>
<!-- Insert your content here -->
</figure>

This is not supported on Internet Explorer 8 and earlier.

 <figure>
<img src="./resources/miso_butterfly.jpg" style="width: 200px; height: 300px; object-fit: cover;" />
</figure>
footer This tag is used for a footer which would usually contain information about the website, page or product. <footer>
<!-- Insert your content here -->
</footer>

This is not supported on Internet Explorer 8 and earlier.

 <footer>
This page has been coded by Caitlyn Sun.
</footer>
This page has been coded by Caitlyn Sun.
header This tag is used for a header which would usually contain introductory information about the website, page or product and/or a navigation bar. <header>
<!-- Insert your content here -->
</header>

There are no additional notes for this tag.

 <header>
<div>
<img src="./resources/miso_butterfly.jpg" />
<div>Welcome to Miso's fan page!</div>
</div>
<nav>
<ul>
<a href="#"><li>About</li></a>
<a href="#"><li>News</li></a>
</ul>
</nav>
</header>
Welcome to Miso's fan page!
main This tag is used for the main body which is usuall all of the visual HTML elements with the exception of the header and footer. <main>
<!-- Insert your content here -->
</main>

This is not supported on Internet Explorer 11 and earlier.

 <main>
<p>Here is my main body!</>
</main>

Here is my main body!
mark This tag is used to highlight certain text. <mark><!-- Insert your content here --></mark>
  • This is not supported on Internet Explorer 11 and earlier.
  • The highlighted color by default is yellow
 Let's highlight this <mark>word</mark> Let's highlight this word
meter This tag is used to display a visual gauge of a number within a range. <meter></meter>
  • This element is not supported on Internet Explorer, Edge 12, Safari 5 and earlier.
  • This should not be used for a progress bar as there is an existing element for this.
  • The following attributes are used:
    Attribute Value Usage
    form name of form specifies form element uses
    high number specifies minimum for high range
    low number specifies maximum for low range
    max number specifies maximum value in range
    min number specifies minimum value in range
    optimum number specifies optimum value in range
    value number specifies value in gauge
10 <meter low="40" high="90" min="10" max="110" optimum="80" value="60"></meter> 110 10 110
nav This tag is used as a container for navigation elements. <nav>
<!-- Insert your content here -->
</nav>

This is not supported on Internet Explorer 8 and earlier.

 <header>
<div>
<img src="./resources/miso_butterfly.jpg" />
<div>Welcome to Miso's fan page!</div>
</div>
<nav>
<ul>
<a href="#"><li>About</li></a>
<a href="#"><li>News</li></a>
</ul>
</nav>
</header>
Welcome to Miso's fan page!
progress This tag is used to display the progress of a task. <progress></progress>
  • This element is not supported on Internet Explorer 9 and earlier.
  • The following attributes are used:
    Attribute Value Usage
    max number specifies maximum value in range
    value number specifies value in gauge
0 <progress max="100" value="60"></progress> 100 0 100
rp This tag is used to display parentheses if the browser does not support ruby annotations. <rp></rp> <ruby>今日<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>、<ruby>猫<rp>(</rp><rt>ねこ</rt><rp>)</rp></ruby>ちゃんは<ruby>魚<rp>(</rp><rt>さかな</rt><rp>)</rp></ruby>を<ruby>食<rp>(</rp><rt>た</rt><rp>)</rp></ruby>べました。 今日(きょう)、猫(ねこ)ちゃんは魚(さかな)を食(た)べました。
rt This tag is used to indicate ruby characters that would be displayed above a character. <rt></rt> <ruby>今日<rt>きょう</rt></ruby>、<ruby>猫<rt>ねこ</rt></ruby>ちゃんは<ruby>魚<rt>さかな</rt></ruby>を<ruby>食<rt>た</rt></ruby>べました。 今日きょう、猫ねこちゃんは魚さかなを食たべました。
ruby This tag is used to indicate ruby characters will be used. <ruby></ruby> <ruby>今日<rt>きょう</rt></ruby>、<ruby>猫<rt>ねこ</rt></ruby>ちゃんは<ruby>魚<rt>さかな</rt></ruby>を<ruby>食<rt>た</rt></ruby>べました。 今日きょう、猫ねこちゃんは魚さかなを食たべました。
section This tag is used as a space for a section, such has chapters. <section></section>

This is not supported on Internet Explorer 8 and earlier.

 <section>
<h4>Here is a section!</h5>
<p>Add some text</p>
</section>

Here is a section!

Add some text
summary This tag sets a visible heading for the details element it is inside. <summary><!-- Insert your content here --></summary>

This element is not supported on Internet Explorer/Edge

 <details open>
<summary>Photo Caption<summary>
<p>Here is a picture of me in New York City!</p>
</details>
Photo Caption

Here is a picture of me in New York City!
time This tag is used to encode date and time values. <time></time>
  • This is not supported on Internet Explorer 8 and earlier.
  • Although the code does not render anything, the encoding allows machines to read the date to offer reminders on the user's calendar
 I need to remember to go to the dentist on <time datetime="2022-01-20 15:00">Thursday</time>. I need to remember to go to the dentist on Thursday.
wbr This tag is indicates where word breaks are fine, particularly when the string is too long. <wbr>

This is not supported on Internet Explorer 11 and earlier.

 Ishallmake<wbr>thisthelongest<wbr>tablecellever<wbr>youcannot<wbr>stopmehahaha<wbr>hhahahahaha<wbr>hahahaha Ishallmakethisthelongesttablecelleveryoucannotstopmehahahahhahahahahahahahaha

Form Elements

Tag Name Usage Structure Notes Example (Code) Example (Live)
datalist This tag is used to provide an autocomplete feature on an input list with a list name corresponding to the id used for the datalist. <datalist id="input-name">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
</datalist>

This is not supported on Safari or on Internet Explorer 9 and earlier.

 Favorite foods: <input list="foods">

<datalist id="foods">
 <option value="Pizza">
 <option value="Sushi">
 <option value="Cookies">
</datalist> 		Favorite foods:
output This tag calculates a value based on the formula and inputs entered. <output name="<!-- Insert name here -->" for="<!-- Insert variables here -->"></output>
  • This is not supported on Edge 12 or Internet Explorer and earlier.
  • The following attributes are used:
    Attribute Value Usage
    for id of elements used for calculation separated by spaces connects calculation with data source
    form id of form specifies the form this output is used for
    name any value specifies name of output for form
<form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="20">
+
<input type="number" id="b" value="50">
=
<output name="x" for="a b"></output>
</form>
+ =

Input Types/Attributes

Type/Attribute Usage Structure Notes Example (Code) Example (Live)
color This input type is used to allow the user to choose from a color picker. <input type="color">
  • This is not supported on Internet Explorer 11 and earlier and Safari 9.1 and earlier.
  • Default value should be ended with a Hex value.
 Select a color: <input type="color" value="#FF3BAC"> Select a color:
date This input type is used to create a date picker. <input type="date">
  • This is not supported on Internet Explorer 11 and earlier and Safari.
  • Default value must be written in yyyy-mm-dd format (eg. 2021-02-08).
  • Minimum and maximum dates can be set with the min/max attributes.
 Select a date: <input type="date" value="2000-01-02" min="1950-03-01" max="2022-05-01"> Select a date:
autocomplete This input attribute indicates if the fields in the form or the individual field should allow autocompletion. <input autocomplete="on">

Autocomplete value choices are "on" or "off"

 <form autocomplete="on">
First Name: <input type="text">
Last Name: <input type="text" autocomplete="off">
</form>
First Name: Last Name:
novalidate This input attribute indicates if the information does not need to be validated upon submission. <form novalidate>

This is not supported on Internet Explorer 9 and earlier and Safari 10 and earlier.

 <form novalidate>
First Name: <input type="text">
Last Name: <input type="text">
</form>
First Name: Last Name:

Graphics

Tag Usage Structure Notes Example (Code) Example (Live)
canvas This tag is used to draw graphics through scripting (eg. JavaScript) <canvas id="<!-- Insert name here -->"><!-- Insert text here --></canvas>
  • This is not supported on Internet Explorer 8 and earlier.
  • canvas is only used as a container and does not render any graphics by itself.
  • Text between the opening and closing tags will be displayed if the canvas fails to load.
 <canvas id="canvasSpace">Your browser does not support this tag</canvas>
<script>
const canvSpace = document.getElementById("canvasSpace");
const shape = canvSpace.getContext("2d");
shape.fillStyle = "rgb(33, 53, 153)";
shape.fillRect(10, 5, 200, 300);
</script> 		Your browser does not support this tag
svg This tag creates a canvas to draw a vector image. <svg>
<!-- Insert vector code here -->
</svg>
  • This supports many types of shapes such as circle and path.
  • The text within the svg tag will only be shown if the vector fails to render.
 <svg width="300" height="300">
<defs>
<linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255, 0, 0);stop-opacity:1" />
<stop offset="17%" style="stop-color:rgb(255, 166, 0);stop-opacity:1" />
<stop offset="33%" style="stop-color:rgb(255, 251, 0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(43, 255, 0);stop-opacity:1" />
<stop offset="67%" style="stop-color:rgb(0, 195, 255);stop-opacity:1" />
<stop offset="83%" style="stop-color:rgb(0, 4, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(140, 0, 255);stop-opacity:1" />
</linearGradient>
</defs>
<circle id="head" cx="150" cy="150" r="100" stroke="black" stroke-width="5" fill="url(#rainbow)" />
<circle id="leye" cx="120" cy="120" r="5" fill="black" />
<circle id="reye" cx="180" cy="120" r="5" fill="black" />
<path id="mouth" fill="none" stroke="black" stroke-width="5" d="M100,180, Q150,240 200,180" />
</svg>

Media Elements

Tag Usage Structure Notes Example (Code) Example (Live)
audio This tag creates a music player to play audio. <audio>
<source src="<!-- Insert file path -->">
</audio>
  • This is not supported on Internet Explorer 8 and earlier.
  • The following attributes are used:
    Attribute Value Usage
    autoplay no value audio will play as soon as it is loaded
    controls no value creates basic audio controls
    loop no value makes audio loop
    muted no value mutes audio on default
    preload choice of: auto, metadata or none
    • auto: browser will load entire audio file
    • metadata: browser will only load metadata
    • none: browser will not load the audio file
    src URL identifies audio to play
Song: What Have You Done (feat. Keith Caputo) by Within Temptation
<audio controls>
<source src="./resources/02 - What Have You Done (feat. Keith Caputo).mp3" type="audio/mp3"> Your browser does not support this audio tag.
</audio> 		Song: What Have You Done (feat. Keith Caputo) by Within Temptation
embed This tag renders most media. <embed src="<!-- Insert file path -->">
  • This tag is not used as much as the other media tags. It is recommended to use the other media tags instead of embed.
  • The following attributes are used:
    Attribute Value Usage
    height number specifies height of media box
    src URL specifies media to add to box
    type any media type listed here specifies the file type of the media
    width number specifies width of media box
<embed type="video/mp4" src="./resources/miso_trouble.mp4">
source Allows list of different sources for media elements such as video, audio and picture. The browser will render the first source that renders successfully. <source src="<!-- Insert file path -->">
  • This is not supported on Internet Explorer 8 and earlier.
  • The following attributes are used:
    Attribute Value Usage
    src URL identifies media to play (required for <audio> and <video>)
    srcset URL identifies media to display (required for <picture>)
    media media settings defined in CSS creates basic audio controls
    sizes media condition-length pair of numbers sets size of media, srcset must be defined with pixel ration values in order to use sizes
    type any media type listed here specifies the file type of the media
<picture>
<source media="(min-width: 1000px)" srcset="./resources/miso_butterfly.jpg">
<source media="(min-width: 800px)" srcset="./resources/miso_butterfly2.jpg">
<img src="./resources/Miso Donut.jpg" alt="Miso wearing a donut" style="width: 200px; height: 300px; object-fit: cover;" />
</picture> 		Miso wearing a donut
track This tag adds subtitles to the <audio> and <video> tags. <track src="<!-- Insert URL here -->"> The following attributes are used:
Attribute Value Usage
default no value track is enabled based on user's preferences
kind choice between: captions, chapters, descriptions, metadata, subtitles
  • captions: translation of dialogue and sound effects
  • chapters: chapter titles
  • descriptions: description of content
  • metadata: content used by scripts
  • subtitles: subtitles for video
label any name specifies the title of the text track
src URL url of text file (required)
srclang any two-letter language code indicates language used in text file (required for subtitles kind)
<video width="280" height="210" controls>
<source src="./resources/miso_trouble.mp4" type="video/mp4">
<track src="./resources/miso_trouble_subtitle.vtt" kind="subtitles" srclang="en" label="English" default>
Your browser does not support this video!
</video>
video This tag renders a video. <video>
<source src="<!-- Insert file path -->">
</video>
  • This is not supported on Internet Explorer 8 and earlier.
  • Only the following video formats are supported:
    Browser MP4 WebM Ogg
    Internet Explorer Yes No No
    Chrome Yes Yes Yes
    Firefox Yes Yes Yes
    Safari Yes No No
    Opera Yes Yes Yes
    MIME Type for Video (not browser) video/mp4 video/webm video/ogg
  • The following attributes are used:
    Attribute Value Usage
    autoplay no value audio will play as soon as it is loaded
    controls no value creates basic audio controls
    height numerical value representing pixels specifies height of video player
    loop no value makes video loop
    muted no value mutes audio on default
    poster URL sets an image to be displayed while video is downloading or until the user hits the play button
    preload choice of: auto, metadata or none
    • auto: browser will load entire video file
    • metadata: browser will only load metadata
    • none: browser will not load the video file
    src URL identifies video to play
    width numerical value representing pixels specifies width of video player
<video width="280" height="210" controls poster="./resources/miso_butterfly.jpg">
<source src="./resources/miso_trouble.mp4" type="video/mp4"> Your browser does not support this video!
</video>