HTML

HTML 5 - Elements

anchor

The anchor element is nothing new. It is a tag that can be either the origin or the target (destination) of a hyperlink. However, in HTML 5 the name attribute has been removed, use an id attribute instead.

W3C

<a id="content">Content</a>

article

The article element is a new element to define an independent item of content.

W3C MDN

<article>Article content ...</article>

aside

The aside element is a new element to define an independent item of content that is to to one side; out of the way.

W3C MDN

<aside>Aside content ...</aside>

audio

The audio element is a new element to define a sound or audio stream.

W3C MDN

<audio src="audiofile.mp3" control autoplay>
    audio element unsupported by this browser
</audio>

bdi

The bdi element is a new element to define bidirectional text formatting.

W3C MDN

<bdi>text for direction formatting</bdi>

canvas

The canvas element is a new element to dynamically render graphics.

W3C MDN

<canvas id="canvas" width="300" height="300">canvas element unsupported by this browser</canvas>

datalist

The datalist element is a new element to specify options for other controls.

W3C MDN

<input name="sex" list="sexlist">
<datalist id="sexlist">
    <option value="Female">
    <option value="Male">
</datalist>

details

The details element is a new element to define additional content that can be toggled by the user.

W3C MDN

<details>
    <summary>Details</summary>
    More info ...
</details>

embed

The embed element is an element to define an integration point for an external application or interactive content. 

W3C MDN

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

figcaption

The figcaption element is new element to define the caption text for a figure. 

W3C MDN

<figcaption>Etching. Anonymous, ca. 1423.</figcaption>

figure

The figure element is new element to define a figure.

W3C MDN

<figure>
    <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
    <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
</figure>

footer

The footer element is new element to define footer content for respective parent content.

W3C MDN

<footer>
    <nav>
        <p>
            <a href="/credits.html">Credits</a> —
            <a href="/tos.html">Terms of Service</a> —
            <a href="/index.html">Blog Index</a></p>
    </nav>
    <p>Copyright © 2009 Gordon Freeman</p>
</footer>

header

The header element is a new element to define introductory or navigational content.

W3C MDN

<header>
    <h1>
        Welcome to this super site!
    </h1>
</header>

keygen

The keygen element is new element to define a key pair generator control as part of an HTML form.

W3C MDN

<form action="processkey.php" method="post" enctype="multipart/form-data">
    <p><keygen name="key"></p>
    <p><input type=submit value="Submit key..."></p>
</form>

main

The main element is new element to define the primary content in a document. There is only one main element in a document.

MDN

<main id="content" class="group" role="main">
    the primary content
</main>

mark

The mark element is new element to define text marked or highlighted for reference purposes.

W3C MDN

<p>The <mark> element is used to <mark>highlight</mark> text</p>

menu

The menu element is new element to define an unordered list of interactive items.

W3C MDN

<menu type="toolbar">
  <li>
    <menu label="Edit">
      <button type="button" onclick="cut()">Cut...</button>
      <button type="button" onclick="copy()">Copy...</button>
      <button type="button" onclick="paste()">Paste...</button>
    </menu>
  </li>
</menu>

menuitem

The menuitem element is new element to define a command.

W3C MDN

<menuitem type="command" label="Save" icon="icons/save.png" onclick="save()">

meter

The meter element is new element to define a scalar value within a known range or a fractional value.

W3C MDN

<p>He bowled a <meter min="0" max="300" value="250">game</meter>.</p>

nav

The nav element is new element to define a section with navigation links.

W3C MDN

<nav>
  <ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Sitemap</a></li>
  </ul>
</nav>

progress

The progress element is new element to define completion progress of a task.

W3C MDN

<progress value="150" max="200">75 %</progress>

rp, rt, ruby

These elements define Ruby annotations.

W3C MDN

<ruby>?<rt>??</ruby><ruby>?<rt>?</ruby>?<ruby>?<rt>?</ruby>??<ruby>?<rt>??</ruby>

section

The section element is new element to define a generic section in a document.

W3C MDN

<section>
    <h2>sub heading</h2>
    section content
</section>

source

The source element is new element to define a media resource.

W3C MDN

<video controls>
  <source src="foo.ogg" type="video/ogg"> <!-- Firefox -->
  <source src="foo.mov" type="video/quicktime"> <!-- Safari -->
  html5 video unsupported by this browser
</video>

summary

The summary element is new element to define a summary, caption or legend for the content of a details element.

W3C MDN

<details>
    <summary>Details</summary>
    More info ...
</details>

time

The time element is new element that encodes modern dates and times in a machine-readable way.

W3C MDN

<time datetime="2013-09-23T10:15Z">
    September 23rd, 2013 at 10:15
</time>

track

The track element is new child element of the audio and video media elements.

W3C MDN

<video src="videofile.webm">
    <track kind="captions" src="sampleCaptions.srt" srclang="en">
    <track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
    <track kind="chapters" src="sampleChapters.srt" srclang="en">
    <track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
</video>

video

The video element is a new element to define video content.

W3C MDN

<video src="videofile.webm" autoplay poster="videostill.jpg">
    video element unsupported by this browser
</video>

wbr

The wbr (word break opportunity) element is a new element to define an optional line break.

W3C MDN

www.simply<wbr>orange<wbr>juice.com

HTML 4.01 elements removed from HTML5

  • acronym,
  • applet,
  • basefont,
  • big,
  • center,
  • dir,
  • font,
  • frame,
  • frameset,
  • noframes,
  • strike,
  • tt

Resources

comments powered by Disqus