By Web Developer Fort Davis Texas
Samples of HTML5 Coding
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
<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
<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
<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
<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
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)
HTML Specification
<command> [+/-]
defines a command button that a user can invoke
HTML5 Source
<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
<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
<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
HTML Sample (if supported by your browser)
HTML Specification
<figcaption> [+/-]
defines a caption for a <figure> element
HTML5 Source
<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)

HTML Specification
<figure> [+/-]
specifies self-contained content, like illustrations, diagrams, photos etc.
HTML5 Source
<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)

HTML Specification
<footer> [+/-]
defines a footer for a document or section
HTML5 Source
<p>Posted by: WLWeb.US</p>
<p><time datetime=”2012-12-01″>December 2012</time></p>
</footer>
HTML Sample (if supported by your browser)
HTML Specification
<header> [+/-]
defines a header for a document or section
HTML5 Source
<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
<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
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><meter value=”35″ min=”0″ max=”100″>35 out of 100</meter></p>
HTML Sample (if supported by your browser)
Display a gauge:
HTML Specification
<nav> [+/-]
defines navigation links
HTML5 Source
<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
<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)
HTML Specification
<progress> [+/-]
represents the progress of a task
HTML5 Source
HTML Sample (if supported by your browser)
HTML Specification
<rp> [+/-]
defines what to show in browsers that do not support ruby annotations
HTML5 Source
HTML Sample (if supported by your browser)
HTML Specification
<rt> [+/-]
defines an explanation/pronunciation of characters (for East Asian typography)
HTML5 Source
HTML Sample (if supported by your browser)
HTML Specification
<ruby> [+/-]
defines a ruby annotation (for East Asian typography)
HTML5 Source
HTML Sample (if supported by your browser)
HTML Specification
<section> [+/-]
defines a section in a document
HTML5 Source
<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
<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
<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
<p>Posted by: WLWeb.US</p>
<p><time datetime=”2012-12-01″>December 2012</time></p>
</footer>
HTML Sample (if supported by your browser)
HTML Specification
<track> [+/-]
defines text tracks for <video> and <audio>
HTML5 Source
<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
<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
<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…
Taumata
HTML Specification
The current HTML5 working draft removes these elements from HTML:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>