The significance of possessing an online and mobile presence isn’t hidden from anyone. With the constantly flourishing mobile and web technology, there have been some apparent changes in the way websites are being designed. Also, with the rapidly growing number of mobile users across the globe, it has become vital for every business organization to own a mobile-friendly website that can cater to a gigantic audience base. If you’re a website developer then you’d have definitely got a faint idea about the thing that I’ll be discussing in this blog. Well, here I’ll be making you familiar with the vitality of using HTML5 and CSS3 for creating web pages that need to be incorporated into a mobile-compatible website.
Why choose HTML5 and CSS3 for developing web pages?
HTML5 and CSS3 have actually taken the web development world by a wave. Backed by a slew of elegant features such as XML-style tags, alternative media and several input attributes, HTML5 and CSS3 have become two of the most used and recommended software programs for web designers. Quite simple to use, both HTML5 and CSS3 have been allowing designers to build standard, streamlined HTML5/CSS3 web pages.
Using HTML5 for marking up the navigation
In HTML5, you’d be marking up the navigation just the way you do in HTML4 or XHTML. Here, an unordered list will be placed inside the nav-tags. The code snippet for the same is shown below:
<nav>
<ul>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Archives</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Subscribe via. RSS</a></li>
</ul>
</nav>
Using HTML5 for marking up the main content area
The main content area of every website comprises of three sections viz: blog post, comments and comment form. You can use the basic concepts of structural tags in HTML5 for marking up each section individually.
- Code involved for marking up the Blog Post is shown below:
<section>
<article>
<header>
<h2>This is the title of a blog post</h2>
<p>Posted on <time datetime=”2009-06-29T23:31:45+01:00″>June 29th 2009</time> by <a href=”#”>Mads Kjaer</a> – <a href=”#comments”>3 comments</a></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio…</p>
</article>
</section>
- Code involved for marking up the Comments section is shown below:
<section>
<article>
<header>
<h2>This is the title of a blog post</h2>
<p>Posted on <time datetime=”2009-06-29T23:31:45+01:00″>June 29th 2009</time> by <a href=”#”>Mads Kjaer</a> – <a href=”#comments”>3 comments</a></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio…</p>
</article>
</section>
- Code involved for marking up the Comments Form is shown below:
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for=”name”>Name</label>
<input name=”name” id=”name” type=”text” required />
</p>
<p>
<label for=”email”>E-mail</label>
<input name=”email” id=”email” type=”email” required />
</p>
<p>
<label for=”website”>Website</label>
<input name=”website” id=”website” type=”url” />
</p>
<p>
<label for=”comment”>Comment</label>
<textarea name=”comment” id=”comment” required></textarea>
</p>
<p><input type=”submit” value=”Post comment” /></p>
</form>
A brief on styling web pages using CSS3
Clearfix styles is a neat approach to building standards-compliant web pages for a mobile-friendly website. As per this concept, you’ll need to target two <section> elements viz: #left and #right so as to correspond to the side of the respective web page. You need to set each web page with a specific width and floating left. By loading the container div#core with clearfix class, you can easily move around the internal content as per your choice, thereby leading to automatic clearing up of extra spaces.
Well, that’s not all. With CSS3, you can easily define specific styles that are based on HTML attributes including href, type, title etc. For example, you can define title attribute for a particular target link and assign it a specific background icon. The code snippet associated with this process is shown below:
ul li[title^="ico"] {
background: url('my-icon.gif');
}
Wrapping Up
With crispness being the core of HTML5 and CSS3 web pages, it is beneficial for website builders to leverage best features of both for developing full-functional and eye-appealing web portals.
About Author:
Emily Heming is an expert in HTMl5 and is associated with Xicom – an iPhone app development services provider from where you can also avail the best service to hire iPhone developers.She can assist you best in case you are looking to hire iPhone app programmer.
Nice post. Thanks for sharing your knowledge with us.