Introduction
HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard. It’s still in draft mode in W3C standards.
New Features Added to HTML5
- Semantics: allowing you to describe more precisely what your content is.
- Connectivity: allowing you to communicate with the server in new and innovative ways
- Offline & Storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
- Multimedia: making video and audio first-class citizens in the Open Web.
- 2D/3D Graphics & Effects: allowing a much more diverse range of presentation options.
- Device Access: allowing for the usage of various input and output devices.
Tools Required
I am using Visual Studio as the editor. There are other alternatives like:
Let's Get Started with HTML5
Basic Structure of Good HTML5 Page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Demo: Adaptive Design With Media Queries</title>
<!--
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
</body>
</html>
Let's explain each of the tags used in the above example:
DocType
: When performing HTML validation testing on a web page, it tells the HTML (HyperText Markup Language) validator which version of (X)HTML standard the web page coding is supposed to comply with. When you validate your web page, the HTML validator checks the coding against the applicable standard, then reports which portions of the coding do not pass HTML validation (are not compliant).
Head
: The head
element represents a collection of metadata for the Document. Meta
: These are the extra information about the page. It’s used by the browser, search engines to understand the page. Eg: meta name="viewport
": Viewport
meta tag is generally used for responsive design to set the viewport width and initial-scale on mobile devices. link
: Your external resources such as stylesheets. body
: This is the entire container of the HTML page.
As I mentioned in the above HTML5 features, one of the main features is Semantic Markup.
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.
New Semantics Tags Introduced
Header: Before HTML5, we used to design our layout with div
tag (div
is a generic container to hold other elements of the page). Eg: <div id="header">
we are explicitly telling it as header and based on the id or class, we used to style it. But in HTML5, it’s all about semantic. If the same example is written in HTML5, then it would be like this:
<header>
<h1>your headings</h1>
</header>
Article: Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.
<article >
<header>
<h1 class="post-title"><a href="#">Just a Post Title</a></h1>
<p class="post-meta"><time class="post-date"
datetime="2011-05-08" pubdate>May 8, 2011</time>
<em>in</em> <a href="#">Category</a></p>
</header>
<figure class="post-image">
<img src="images/sample-image.jpg" />
</figure>
</article>
Nav: Represents navigation for a document. The nav
element is a section containing links to other documents or to parts within the current document. Not all groups of links on a page need to be in a nav
element — only groups of primary navigation links.
<nav>
<ul id="main-nav" class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Contactus</a></li>
</ul>
</nav>
Aside: Represents a section of a page consisting of content that is tangentially related to the content around the aside
element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
<aside id="sidebar">
<section class="widget">
<h4 class="widgettitle">Sidebar</h4>
<ul>
<li><a href="#">SomeTage 1</a> (3)</li>
<li><a href="#">Some Tag 2 </a> (23)</li>
<li><a href="#">Some Tg 3</a>(18)</li>
</ul>
</section>
</aside>
Footer: The footer
element typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc. <div id="footer">
we are explicitly telling it as footer
and based on the id or class, we used to style it. But in HTML5, it’s all about semantic. If the same example is written in HTML5, then it would be like this:
<footer>
<p>footer notes</p>
</footer>
Video: represents video file. src
attribute will tell the video file. Controls
attribute will display the control bar (play, pause and volume buttons). Still video tag is not fully supported in all browsers, you can use polyfills or fallback to run in across the browser.
<video id="video" src="movie.webm" autoplay controls></video>
Fallback code would be like this [ http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/]
<!--
<!--
<video width="640" height="360" controls>
<!--
<source src="__VIDEO__.MP4" type="video/mp4" /><!--
<source src="__VIDEO__.OGV" type="video/ogg" /><!--
<!--
<object width="640" height="360"
type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!--
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars"
value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!--
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
Input Tags: HTML5 has introduced lot of new input tags. Let's explain each of them.
- Speech input:
<input type="text" x-webkit-speech />
- Required attribute:
<input type="text" required />
- Email input:
<input type="email" value="some@email.com" />
- Date input:
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
- Search Input:
<input type="search" results="10" placeholder="Search..." />
- Number input:
<input type="number" step="1" min="-5" max="10" value="0" />
Screenshot of final output is as follows:
The complete source code for new input tags is as given below:
<!doctype html>
<html lang="en">
<head>
<!--
</head>
<body>
<form>• Speech input :
<input type="text" x-webkit-speech />
<br/>Auto complete :
<input list="cars" />
<br/>
<datalist id="cars">
<option value="BMW" />
<option value="Ford" />
<option value="Volvo" />
</datalist>
<input type="text" required />
<br/>
<input type="email" value="some@email.com" />
<br/>
<input type="date" min="2010-08-14"
max="2011-08-14" value="2010-08-14" />
<br/>
<input type="range" min="0" max="50" value="10" />
<br/>
<input type="search" results="10" placeholder="Search..." />
<br/>
<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<br/>
<input type="color" placeholder="e.g. #bbbbbb" />
<br/>
<input type="number" step="1" min="-5"
max="10" value="0" />
<br/>
<input type="submit" />
</form>
</body>
</html>
Images
Img
: Image element is used to display the images. It has two properties.
<img src="source file" alt="altText" />
Src
=”file path of the image” Alt
=”alternative text of the image” if image is not found, then this alternative text will be displayed. But in HTML5, they introduced one more property for img
tag called “srcset
”. Srcset
= srcset
attribute allowed developers to specify a list of sources for an image attribute, to be delivered based on the pixel density of the user’s display
Eg : <img src="low-res.jpg" srcset="high-res.jpg 2x">
The above example tells us to use low-res.jpg as the source for this img
on low-resolution displays, and for any browser that doesn’t understand the srcset
attribute. Use high-res.jpg as the source for this img
on high-resolution displays in browsers that understand the srcset
attribute.
Figure
: The figure
element can be used to annotate illustrations, diagrams, photos, code listings, etc., that are referenced in the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content.
Emphasis Tags
Bold : <b> This text is bold </b>
Italic : <i>italics</i>
Strike : <strike>Today's Special: Salmon</strike> NO LONGER AVAILABLE<br />
<span style="text-decoration:line-through;">Today's Special: Salmon</span> SOLD OUT
Hyperlinks
<a>
: If the a
element has an href
attribute, then it represents a hyperlink (a hypertext anchor). If the a
element has no href
attribute, then the element represents a placeholder for where a link might otherwise have been placed.
Basic eg : <a href="ListPage.html" >ListPage</a>
Different Type of Hyperlinks
<a href=’#Top’>Jump To Top </a> // this will jump to the place holder with id of "top" in the page
<a href="./page2.html" rel=next media="not print">next</a> rel will tell the relation of the page.
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/>
<link rel="icon" href="/favicon.ico"/>
<link rel="pingback" href="http://myblog.com/xmlrpc.php"/>
<link rel="prefetch" href="http://myblog.com/main.php"/>
<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>
Comments
<!-- : Multiline comments.
Conditional comments: This is a special type of comment, where based on conditions comments are executed, even though comments are ignorable.
!--[if lt IE 9]>
If IE is lesser than 9 do some thing <![endif]-->
Lists
UL
: Unordered list. The ul
element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the list. Most of the UL
are used for building the menubars.
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Contactus</a></li>
</ul>
OL
: The ol
element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the list.
<OL>
<li>first</li>
<li>second</li>
</ol>
Complete Source Code for Sample HTML5 Page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Demo: Adaptive Design With Media Queries</title>
<!--
<link href="style.css" rel="stylesheet" type="text/css">
<!--
<!--
</head>
<body>
<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo"><a href="#">Demo</a></h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav>
<ul id="main-nav" class="clearfix">
<li><a href="#">Home</a>
</li>
<li><a href="#">about</a>
</li>
<li><a href="#">Contactus</a>
</li>
</ul>
<!--
</nav>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
</header>
<!--
<div id="content">
<article class="post clearfix">
<header>
<h1 class="post-title">
<a href="#">Just a Post Title</a></h1>
<p class="post-meta">
<time class="post-date" datetime="2011-05-08"
pubdate>May 8, 2011</time> <em>in</em>
<a href="#">Category</a>
</p>
</header>
<figure class="post-image">
<img src="images/sample-image.jpg" />
</figure>
<p> SomeParagarph.</p>
</article>
<!--
</div>
<!--
<aside id="sidebar">
<section class="widget">
<h4 class="widgettitle">Sidebar</h4>
<ul>
<li><a href="#">SomeTage 1</a> (3)</li>
<li><a href="#">Some Tag 2 </a> (23)</li>
<li><a href="#">Some Tg 3</a>(18)</li>
</ul>
</section>
<!--
<section class="widget clearfix">
<h4 class="widgettitle">RandomWidgetr</h4>
</section>
<!--
</aside>
<!--
<footer id="footer">
<p>Responsive</p>
</footer>
<!--
</div>
<!--
</body>
</html>
Tips for Structuring Code
Use HTML5 Boilerplates, as it’s industry standard boilerplate template for the HTML5: http://html5boilerplate.com/ as it includes all the basic setup and browser compatibility supports built in. Use online HTML validators for any errors http://validator.w3.org/#validate_by_inputUse HTML5 semantic tags to give the semantic meanings, so that other devices such as handheld, mobile, screen reader can understand the markup
As HTML5 is still in draft mode, many browser vendors have not fully supported all the HTML 5 features.
You may now have a few questions like this in your mind...
So how do I test whether my browser supports HTML5 features?
The answer is: Visit http://html5test.com/ (below is the snapshot of html5Test.com)
How do I know which tags/HTML5 features are supported across the browser?
There are many sites which tell browser compatibility, but my personal choices are below. http://caniuse.com/: This site gives the browser compatibility chart across the browsers. For eg: Let's take canvas feature of HTML5.
http://html5please.com/: The site is maintained by one of the prominent web experts "Paul Irish". This site will give the polyfills information. For example, let's take number input, which is not supported in few browsers, but it suggests to use polyfill to get the same exact feature in all browsers.
Now, we came to know that some HTML5 features are not supported in some browsers, so what’s the next solution?
Polyfill: A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expects the browser to provide natively. Let's take an example. HTML5 tags such as section
, aside
, header
are not supported in older browsers. To work in older browsers, we will include a polyfill.
<!--
<!--
Popular polyfills for cross browser: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Points of Interest
While writing this article, I learnt new SRCSet, Polyfills, Modernizer In future, HTML5, ECMASCRIPT 6, CSS3 will give a solid platform for web
References
History
- Initial version 1.0: Added all relevant information required for the article