HTML is a Hyper Text Markup Language. It is not a programming language but it defines the structure of the text in a given document. You can check out more about understanding the basics here basic Introduction to HTML. HTML 5 new features provide definition to parts of a web page. The latest version of this markup language is totally different from previous implementations. The idea behind the updates is to give this markup language new ways so developers can use exclusive practices. The main objective to introduce these changes includes:
- Split design from content.
- Developing design receptivity.
- Promoting rich media knowledge to remove the need for plugins.
What are the new features in HTML5?
Since the change of techniques used in web development, HTML has evolved as well. A web page is not just a document but a full scale web application which is not only used by humans but also search engines to understand the content. There are three main languages that define front-end web development, i.e. HTML, CSS and JavaScript. Web Pages have header, footer, body content, navigation, sidebar and other features. In HTML, common structural elements like page headers, navigation menus and content sections were all represented in the <div> tag. New HTML5 elements provide finer structure of the document and have new features with elements, attributes and API’s. Here is a list of 10 HTML5 features to give your documents new structure, inline elements and dynamic page support.
- <Doctype>
There is no need for long form code to define your document anymore. Simply use <Doctype html> and tag will take care of it.
- <Figure>
This feature is used to display visual content like photos, diagrams or code snippets.
<figure >
<img src = “image1.png” >
</figure>
- <Header>
This element is used to group introductory elements on the website which includes logo and navigation items.
<header>
<img src = “logo.png”>
<nav>
<a href’’About.html” > About</a>
<a href’’Contact.html” >Contact </a>
</nav>
</header>
- <Footer>
This feature contains site information, social media links and privacy policy.
<Footer>
<div class = “social”>
<a href = “instagram.com/company-name”><img src = “instgram-icon.ong”></a>
<a href = “facebook.com/company-name”><img src = “facebook-icon.ong”></a>
<a href = “twitter.com/company-name”><img src = “twitter-icon.ong”></a>
</div>
</Footer>
- <Nav>
This defines the set of navigation links from the part of a website that links to the other parts on the site.
<nav>
<a href = “About . html”> About </a>|
<a href = “Register . html”> Register</a>|
<a href = “Contact. html”> Contact</a>
</nav>
- <Section>
It can be used as a container for the document. Just like the <div>tag, it can be used to organize the content on the web page.
<section class = “registration-form”>
<h2>Register here</h2>
<form> …. </form>
</section>
- <Video>
This tag specifies video streams and movie clips. Actual media is defined by “src”.
<video width = “450px” height = “350px”>
<source src = “video.mp4”>
</video>
- <Canvas>
It is a drawing panel in which you will have to use the JavaScript API to get the full functionality.
<canvas id = “myCanvas” width = “300” height = “450”> </canvas>
- <Datagrid>
It creates a table that is built from a database. It’s a representation of a list and trees.
<datagrid>
<ol style = “list-style-type:decimal;”>
<li>(row.1)</li>
<ol style = “list-style-type:lower-alpha;”>
<li> (row 1,1) </li>
<li> (row 1,2) </li>
</ol>
<li>(row.2)
<ol style = “list-style-type:lower-alpha;”>
<li> (row 2,1) </li>
<li> (row 2,2) </li>
</ol>
</li>
</ol>
</datagrid>
- <Input>
This feature is used to create forms in order to get input from users. It is one of the most popular and complex features of HTML5.
<form action = “/action_php”>
<label for = “fname”>First name: </label>
<input type = “text” id = “fname” name = “fname”>
<label for = “lname”>Last name: </label>
<input type = “text” id = “lname” name = “lname”>
<input type = “submit” value = “Submit”>
</form>
HTML5 provides impressive features that turn your page into a web application. Other than the ones mentioned above, there are additional HTML5 elements that give more functionality to your pages. But the ones listed above are the most interesting and meaningful features of HTML5. The best part of this markup language is that it makes implementing your static content a simple and straightforward process. Your web pages will run faster and smoother with less chance of mistakes.
Related Resources:
Design trends for small business websites
