HTML5 : A Quick Look At 5 Exciting Features
HTML5 is the latest version of HTML(Hyper Text Markup Language – A web page development language). Although HTML5 has been finalized in October, 2014, we are using it five years prior to its finalization. In this article I will be covering five cool features of HTML5. Features like Input Element Type, Multimedia support, Auto-focus and Placeholder attributes, Editable content and required field. So what are we waiting for? Let’s start.
Contents
Feature #1 New HTML5 Input Element Type
Input element types plays a vital role in data driven website. Besides regular input types like text box, text area, check-box, radio button, HTML5 adds a new feature email id input type in HTML5. Let’s see how it is implemented. Here you just have to set the type attribute with email. Sample syntax is here:
<!DOCTYPE html>
<html>
<body>
<form action=”#”>
<strong>First your Email id:</strong>
<input type=”email” name=”firstname”>
<input type=”submit”>
</form>
</body>
</html>
Output
See in the above example you have to enter value in email id format otherwise it gives error.
Feature #2 Multimedia Support In HTML5
A great other feature is that HTML5 supports both video and audio files both. A sample syntax is given as under:
<!DOCTYPE html>
<html>
<body>
<audio src=”Your audio path goes here” controls>
Text to be displayed when the browser doesn’t support the video goes here.
</audio>
<video src=”your video path goes here” controls?
Text to be displayed when the browser doesn’t support the video goes here.
</video>
</body>
</html>
Output
See in the above output one side audio and other side video file is playing.
Feature #3 AutoFocus & Placeholder Attributes
When Auto-focus attribute is added then that particular attribute has been automatically given focus and when placeholder is given then your that particular input will be shown as a watermark like text. See the following syntax:
<!DOCTYPE html>
<html>
<body>
<strong> Enter you name here</strong>
<input type=”text” width=”104″ height=”142″ placeholder=”Enter your name here…” autofocus></input>
</body>
</body>
</html>
Output
See in the above output text box is focused automatically without pointing to it with a placeholder text in it.
Feature #4 Editable Content
This is a new feature in HTML5 that content itself can be editable. Look at the following code:
<!DOCTYPE html>
<html>
<body>
<p contenteditable=”true”>You can edit this content</p>
</body>
</html>
Output:
Mark that in the content we have only written “You can edit this content??? and in this content we edited after we run the example.
Feature #5 Required field in HTML5
This is a brand new feature in HTML5. Now you can set your field as a required field. See the following code:
<!DOCTYPE html>
<html>
<body>
<form action=”#”>
First name:
<input type=”text” name=”firstname” required>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Output:
See in the above output I hit submit button without entering anything in the text box and it gives me error. This HTML5 auto generated error message.
I hope that you will have found this article useful and exciting. Let me know in comments if you have any questions regarding HTML5.
Alphanso Tech is a software development firm and a website will really gear up your online presence and your business. Are you interested in your business being online? If yes then contact us soon. We will understand the requirement of yours and will help you in your business.
Post by Alphanso Tech
Created in 2013, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.
