HTML 5 for Geeks – Features and Elements
HTML5 has a new attribute, charset, which makes it easier to define charset: HTML 4.01: <Meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> HTML5: <meta charset=”UTF-8”> <script> : The “type” attribute is required in…
From our archive. Written in 2014; some details may have moved on.
HTML5 has a new attribute, charset, which makes it easier to define charset:
HTML 4.01: <Meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
HTML5: <meta charset=”UTF-8”>
- <script> : The “type” attribute is required in HTML 4, but optional in HTML5.
- <small > : In HTML 4.01 the small element is displayed as smaller text. In HTML5 the small element defines small text and other side comments, and is displayed as smaller text.
- <table>: Only the “border” attribute is supported in HTML5, and it only allows the values “” or “1”.
New Semantic/Structural Elements
HTML5 offers new elements for better structure:
|
Tag |
Description |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <command> | Defines a command button that a user can invoke |
| <details> | Defines additional details that the user can view or hide |
| <summary> | Defines a visible heading for a <details> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <figcaption> | Defines a caption for a <figure> element |
| <footer> | Defines a footer for a document or section |
| <header> | Defines a header for a document or section |
| <hgroup> | Groups a set of <h1> to <h6> elements when a heading has multiple levels |
| <mark> | Defines marked/highlighted text |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <progress> | Represents the progress of a task |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <section> | Defines a section in a document |
| <time> | Defines a date/time |
| <wbr> | Defines a possible line-break |
New Media Elements
HTML5 offers new elements for media content:
| Tag | Description |
| <audio> | Defines sound content |
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for <video> and <audio> |
| <embed> | Defines a container for an external application or interactive content (a plug-in) |
| <track> | Defines text tracks for <video> and <audio> |
Examples :
<video> :
<!DOCTYPE html>
<html>
<body>
<DIV id=’abc’ style=”z-index:2; position:relative; right:0px; top:10px; background-color:#E42B39; width:400px; height:45px; text-align:center; padding:10px; color:White; border:#ffffcc 1px dashed; font-size:xx-large;”>Code Red Marketing Australia</DIV><br>
<VIDEO src=”coderedmarketing.mp4″ width=”400″ height=”250″ controls autoplay></VIDEO>
</body>
</html>
<audio>:
<!DOCTYPE html>
<html>
<body>
<DIV id=’abc’ style=”z-index:2; position:relative; right:0px; top:10px; background-color:#E42B39; width:400px; height:110px; padding:10px; color:White; border:#ffffcc 1px dashed; font-size:xx-large;”>Melbourne Web Design and Development Services intellecta.com.au</DIV>
<br>
<audio controls=”controls”><source src=”audio.ogg” type=”audio/ogg” />
<source src=”audio.mp3″ type=”audio/mpeg” />Your browser does not support the audio element.
</audio>
</body>
</html>
The new <canvas> Element
Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
Example:
<!DOCTYPE html>
<html>
<body>
<DIV id=’abc’ style=”z-index:2; position:relative; right:0px; top:10px; background-color:#E42B39; width:400px; height:110px; padding:10px; color:White; border:#ffffcc 1px dashed; font-size:xx-large;”>Melbourne Web Design and Development Services intellecta.com.au</DIV>
<br>
<div style=” font-size:x-large; background-color:#444444; color:White; border:#ffffcc 1px solid; width:200px; height:40px;”>Canvas Example:</div>
<br>
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>Your browser does not support the HTML5 canvas tag.</canvas>
<<script type=”text/javascript”>var c=document.getElementById(“myCanvas”);var ctx=c.getContext(“2d”); ctx.fillStyle=”#64BDCB”; ctx.fillRect(0,0,150,75);</script>
</body>
</html>
SVG:(Scalable Vector Graphics)
<!DOCTYPE html>
<html>
<body>
<DIV id=’abc’ style=”z-index:2; position:relative; right:0px; top:10px; background-color:#E42B39; width:400px; height:110px; padding:10px; color:White; border:#ffffcc 1px dashed; font-size:xx-large;”>Melbourne Web Design and Development Services intellecta.com.au</DIV>
<br>
<div style=” font-size:x-large; background-color:#444444; color:White; border:#ffffcc 1px solid; width:200px; height:40px;”>SVG Example:</div>
<br>
<svg version=”1.1″ height=”190″><polygon points=”100,10 40,180 190,60 10,60 160,180″ style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” /></svg>
</body>
</html>
New Form Elements
HTML5 offers new form elements, for more functionality:
Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
Removed Elements
The following HTML elements are removed from HTML5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
Useful resources:
1. HTML5 Demos and Examples:
http://html5demos.com/
2. Differences Between HTML and HTML5 You Should To Know:
/articles/differences-html-html-5-know/
More articles
Choosing a CRM for a manufacturing business: what actually matters
Manufacturing sales is long-cycle and relationship-heavy. Most CRMs are built for neither. Here is what to look for, what to ignore, and how to tell the difference before you sign up.
Read article →
Neural Habitats: Designing Websites That Evolve With Each Visitor
The Web Is About to Get Wild In 2025, static websites feel like museum pieces. Even “personalized” pages — swapping banners or changing a hero image — are beginning to…
Read article →
Digital Fireflies: How Micro-Animations Spark Engagement in a Crowded Online Jungle
In the endless scroll of the internet, attention is fleeting. A tap, a swipe, and your carefully crafted message disappears into the digital undergrowth. Yet, just like fireflies glowing in…
Read article →