Beginner's Guide to HTML5 CSS3 - Building the Basics

Ravi Gadag

4.85/5 (20 votes)

31 Mar 2014CPOL7 min read

43.6K

475

Modern Web applications with HTML5 and CSS3

Download HTML5BasicStructure.zip - 3.4 KB

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:

NotePad++ (free) http://notepad-plus-plus.org/download/v6.5.5.html
Microsoft Visual Studio Web Express (free) http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
Sublime text Editor (paid)Plnkr - Online Editor http://plnkr.co/
JsFiddle.net http://jsfiddle.net/

Let's Get Started with HTML5

Basic Structure of Good HTML5 Page

HTML

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Demo: Adaptive Design With Media Queries</title>
<!-- main css -->
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<!-- all information goes here --> 
</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:

HTML

<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.

HTML

<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.

HTML

<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.

HTML

<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:

HTML

 <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.

HTML

<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/]

HTML

 <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" 
    type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" 
        value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <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:

New Input tags

The complete source code for new input tags is as given below:

HTML

<!doctype html>
<html lang="en">
    
    <head>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
    </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.

HTML

<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

HTML

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

HTML

    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.

HTML

Basic eg : <a href="ListPage.html" >ListPage</a>

Different Type of Hyperlinks

HTML

<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

HTML

<!--  --> : Multiline comments.

Conditional comments: This is a special type of comment, where based on conditions comments are executed, even though comments are ignorable.

HTML

!--[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.

HTML

<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.

HTML

<OL>
<li>first</li>
<li>second</li>
</ol>

Complete Source Code for Sample HTML5 Page

HTML

<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <!-- disable iPhone inital scale -->
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <title>Demo: Adaptive Design With Media Queries</title>
        <!-- main css -->
        <link href="style.css" rel="stylesheet" type="text/css">
        <!-- html5.js for IE less than 9 -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </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>
                    <!-- /#main-nav -->
                </nav>
                <form id="searchform">
                    <input type="search" id="s" placeholder="Search">
                </form>
            </header>
            <!-- /#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>
                <!-- /.post -->
            </div>
            <!-- /#content -->
            <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>
                <!-- /.widget -->
                <section class="widget clearfix">
                        <h4 class="widgettitle">RandomWidgetr</h4>
                </section>
                <!-- /.widget -->
            </aside>
            <!-- /#sidebar -->
            <footer id="footer">
                <p>Responsive</p>
            </footer>
            <!-- /#footer -->
        </div>
        <!-- /#pagewrap -->
    </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

Browser Support

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.

HTML

<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script> //polyfill html5 features to older browsers
<![endif]-->

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)