Web Developer Fort Davis Texas

HTML5 by Example

By Web Developer Fort Davis Texas

Samples of HTML5 Coding

HTML5, W3C Validated

Web Developer Fort Davis Texas on HTML5, the W3C specification that defines the fifth major revision of the Hypertext Markup Language for web page source.

HTML5 is the W3C specification that defines the fifth major revision of the Hypertext Markup Language or HTML, the semantic and syntactic lexicon of the World Wide Web. The development of HTML5 is a joint effort of the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The current working draft adds the following new elements to HTML along with many new attributes for existing elements:

<article> [+/-]
defines an article

HTML5 Source

<article>
  <h4>This Is My Title</h4>
  <p>This is my content.</p>
</article>

HTML Sample (if supported by your browser)

This Is My Title

This is my content.

HTML Specification

<aside> [+/-]
defines content aside from the page content

HTML5 Source

<aside>
  <h4>This Is My Heading</h4>
  <p>This is my content.</p>
</aside>

HTML Sample (if supported by your browser)

HTML Specification

<audio> [+/-]
defines sound content

HTML5 Source

<audio id=”Marias_Theme” controls=”controls”>
  <source src=”https://whitelabelwebdeveloper.com/html5_audio/Marias_Theme.ogg”>
  <source src=”https://whitelabelwebdeveloper.com/html5_audio/Marias_Theme.mp3″>
  Your browser does not support HTML5 audio.
</audio>

HTML Sample (if supported by your browser)

HTML Specification

<bdi> [+/-]
isolates text that might be formatted in a different direction

HTML5 Source

<ul>
  <li>User <bdi>jcranmer</bdi>: 12 posts.
  <li>User <bdi>hober</bdi>: 5 posts.
  <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

HTML Sample (if supported by your browser)

  • User jcranmer: 12 posts.
  • User hober: 5 posts.
  • User إيان: 3 posts.

HTML Specification

<canvas> [+/-]
draws graphics on the fly using JavaScript

HTML5 Source

<canvas id=”myCanvas” width=”120″ height=”120″ style=”border:1px solid #009900;”>
Your browser does not support HTML5 canvas.
</canvas>
<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(60, 60, 50, 0.25 * Math.PI, 1.25 * Math.PI, false);
ctx.fillStyle = “#ffff00”;
ctx.fill();
ctx.beginPath();
ctx.arc(60, 60, 50, 0.75 * Math.PI, 1.75 * Math.PI, false);
ctx.fill();
ctx.beginPath();
ctx.arc(60, 30, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = “#006600”;
ctx.fill();
</script>

HTML Sample (if supported by your browser)


Your browser does not support HTML5 canvas.

HTML Specification

<command> [+/-]
defines a command button that a user can invoke

HTML5 Source

<menu>
  <command type=”command” label=”Save” onclick=”save()”/>
</menu>

HTML Sample (if supported by your browser)

HTML Specification

<datalist> [+/-]
specifies a list of pre-defined options for input controls

HTML5 Source

<form action=”https://whitelabelwebdeveloper.com/”>
<label>
What is your favorite fruit?<br />
<input list=”browsers” name=”browser”>
<datalist id=”browsers”>
  <option value=”Apples”>
  <option value=”Oranges”>
  <option value=”Pears”>
  <option value=”Bananas”>
  <option value=”Peaches”>
</datalist>
</label>
</form>

HTML Sample (if supported by your browser)

HTML Specification

<details> [+/-]
defines additional details that the user can view or hide

HTML5 Source

<details>
  <summary>WLWeb.US</summary>
  <p>Freelance HTML5 web developer.</p>
  <p>Contract HTML5 web development.</p>
</details>

HTML Sample (if supported by your browser)

WLWeb.US

Freelance HTML5 web developer.

Contract HTML5 web development.

HTML Specification

<embed> [+/-]
defines a container for an external application or interactive content

HTML5 Source

<embed src=”https://whitelabelwebdeveloper.com/flash/BDaddyWebGuru.swf” width=”120″ height=”120″/>

HTML Sample (if supported by your browser)

HTML Specification

<figcaption> [+/-]
defines a caption for a <figure> element

HTML5 Source

<figure>
  <img src=”https://whitelabelwebdeveloper.com/images/HTML5_CSS3.gif” alt=”HTML5/CSS3 Coding” width=”120″ height=”120″/>
  <figcaption>Fig 1. HTML5/CSS3 Coding</figcaption>
</figure>

HTML Sample (if supported by your browser)

HTML5/CSS3 Coding
Fig 1. HTML5/CSS3 Coding

HTML Specification

<figure> [+/-]
specifies self-contained content, like illustrations, diagrams, photos etc.

HTML5 Source

<figure>
  <img src=”https://whitelabelwebdeveloper.com/images/HTML5_CSS3.gif” alt=”HTML5/CSS3 Coding” width=”120″ height=”120″/>
  <figcaption>Fig 1. HTML5/CSS3 Coding</figcaption>
</figure>

HTML Sample (if supported by your browser)

HTML5/CSS3 Coding
Fig 1. HTML5/CSS3 Coding

HTML Specification

<footer> [+/-]
defines a footer for a document or section

HTML5 Source

<footer>
  <p>Posted by: WLWeb.US</p>
  <p><time datetime=”2012-12-01″>December 2012</time></p>
</footer>

HTML Sample (if supported by your browser)

Posted by: WLWeb.US

HTML Specification

<header> [+/-]
defines a header for a document or section

HTML5 Source

<article>
  <header>
   <h4>HTML5 Web Development</h4>
   <p><time datetime=”2012-12-01″></time></p>
  </header>
  <p>WLWeb.US professional web developer focused on responsive web design.</p>
</article>

HTML Sample (if supported by your browser)

HTML5 Web Development

WLWeb.US is a professional web developer focused on responsive web design.

HTML Specification

<keygen> [+/-]
defines a key-pair generator field for forms

HTML5 Source

<form id=”whitelabelwebdeveloper” action=”https://whitelabelwebdeveloper.com/”>
<label>What is your favorite fruit?<br />
<input list=”browsers-too” name=”browser”>
<datalist id=”browsers-too”>
  <option value=”Apples”>
  <option value=”Oranges”>
  <option value=”Pears”>
  <option value=”Bananas”>
  <option value=”Peaches”>
</datalist>
</label><br/> <br/>
<label>Encryption:<br/>
<keygen name=”security” form=”whitelabelwebdeveloper” keytype=”rsa” challenge>
</label>
</form>

HTML Sample (if supported by your browser)


 

HTML Specification

<mark> [+/-]
defines highlighted text

HTML5 Source

<p>WLWeb.US is the <mark>front-end web developer</mark> to choose for responsive web design.</p>

HTML Sample (if supported by your browser)

WLWeb.US is the front-end web developer to choose for responsive web design.

HTML Specification

<meter> [+/-]
Defines a scalar measurement within a known range – a gauge

HTML5 Source

<p>Display a gauge:</p>
<p><meter value=”35″ min=”0″ max=”100″>35 out of 100</meter></p>

HTML Sample (if supported by your browser)

Display a gauge:

35 out of 100

HTML Specification

<nav> [+/-]
defines navigation links

HTML5 Source

<nav>
  <a href=”products.php”>Products</a> |
  <a href=”services.php”>Services</a> |
  <a href=”contact.php”>Contact</a> |
  <a href=”index.php”>Home Page</a>
</nav>

HTML Sample (if supported by your browser)

HTML Specification

<output> [+/-]
defines the result of a calculation

HTML5 Source

<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
<input title=”Apples” type=”number” min=”0″ max=”99″ name=”a” value=”0″> Apples + <input title=”Bananas” type=”number” min=”0″ max=”99″ name=”b” value=”0″> Bananas = <output name=”x” for=”a b”>0</output> Fruit
</form>

HTML Sample (if supported by your browser)

Apples + Bananas = 0 Fruit

HTML Specification

<progress> [+/-]
represents the progress of a task

HTML5 Source

Download in progress: <progress value=”35″ max=”100″></progress>

HTML Sample (if supported by your browser)

Download in progress:

HTML Specification

<rp> [+/-]
defines what to show in browsers that do not support ruby annotations

HTML5 Source

<ruby>日本<rp>(&ltl/rp><rt>にほん</rt><rp>)</rp></ruby>

HTML Sample (if supported by your browser)

日本(にほん)

HTML Specification

<rt> [+/-]
defines an explanation/pronunciation of characters (for East Asian typography)

HTML5 Source

<ruby>日本<rp>(&ltl/rp><rt>にほん</rt><rp>)</rp></ruby>

HTML Sample (if supported by your browser)

日本(にほん)

HTML Specification

<ruby> [+/-]
defines a ruby annotation (for East Asian typography)

HTML5 Source

<ruby>日本<rp>(&ltl/rp><rt>にほん</rt><rp>)</rp></ruby>

HTML Sample (if supported by your browser)

日本(にほん)

HTML Specification

<section> [+/-]
defines a section in a document

HTML5 Source

<section>
  <h4>Contract Web Development</h4>
  <p>WLWeb.US is a freelance web developer…</p>
</section>

HTML Sample (if supported by your browser)

Contract Web Development

WLWeb.US is a freelance web developer…

HTML Specification

<source> [+/-]
defines multiple media resources for <video> and <audio>

HTML5 Source

<audio id=”Marias_Theme_2” controls=”controls”>
  <source src=”https://whitelabelwebdeveloper.com/html5_audio/Marias_Theme.ogg”>
  <source src=”https://whitelabelwebdeveloper.com/html5_audio/Marias_Theme.mp3″>
  Your browser does not support HTML5 audio.
</audio>

HTML Sample (if supported by your browser)

HTML Specification

<summary> [+/-]
defines a visible heading for a <details> element

HTML5 Source

<details>
  <summary>WLWeb.US</summary>
  <p>Freelance HTML5 web developer.</p>
  <p>Contract HTML5 web development.</p>
</details>

HTML Sample (if supported by your browser)

WLWeb.US

Freelance HTML5 web developer.

Contract HTML5 web development.

HTML Specification

<time> [+/-]
defines a date/time

HTML5 Source

<footer>
  <p>Posted by: WLWeb.US</p>
  <p><time datetime=”2012-12-01″>December 2012</time></p>
</footer>

HTML Sample (if supported by your browser)

Posted by: WLWeb.US

HTML Specification

<track> [+/-]
defines text tracks for <video> and <audio>

HTML5 Source

<video controls>
  <source src=”elephants-dream.mp4″ type=”video/mp4″>
  <source src=”elephants-dream.webm” type=”video/webm”>
  <track label=”English subtitles” kind=”subtitles” srclang=”en” src=”elephants-dream-subtitles-en.vtt” default>
  <track label=”Deutsche Untertitel” kind=”subtitles” srclang=”de” src=”elephants-dream-subtitles-de.vtt”>
  <track label=”English chapters” kind=”chapters” srclang=”en” src=”elephants-dream-chapters-en.vtt”>
</video>

HTML Sample (if supported by your browser)

Not ready for prime time…

HTML Specification

<video> [+/-]
defines a video or movie

HTML5 Source

<video controls=”controls” height=”130″ width=”195″>
<source src=”https://whitelabelwebdeveloper.com/html5_video/HTML5_Mobile_App_Development.mp4″>
<source src=”https://whitelabelwebdeveloper.com/html5_video/HTML5_Mobile_App_Development.ogg”>
<source src=”https://whitelabelwebdeveloper.com/html5_video/HTML5_Mobile_App_Development.wmv”>
Your browser does not support HTML5 video
</video>

HTML Sample (if supported by your browser)

HTML Specification

<wbr> [+/-]
defines a possible line-break

HTML5 Source

<p>And the world record for the longest place name in an English-speaking country is…<br>
<em>Taumata<wbr>whakatangihanga<wbr>koauau<wbr>o<wbr>tamatea<wbr>turi<wbr>pukakapiki<wbr>maunga<wbr>horo<wbr>nuku<wbr>pokai<wbr>whenua<wbr>kitanatahu</em></p>

HTML Sample (if supported by your browser)

And the world record for the longest place name in an English-speaking country is…
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu

HTML Specification

The current HTML5 working draft removes these elements from HTML:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>