HTML5 new features introduction

  • HTML5 new features

In this article we will look into new features in HTML5.  HTML is now more simpler then before and there are number of improvements in it like

  • New doctype definition;
  • The “type” attribute of elements such as <link> or <script> are now  optional;
  • The syntax constraints that have been relaxed;
  • New structural elements that have been added, etc.

Consider following HTML structure.


See the simple

Second

Next it is good to declare the character set in our document that is UTF-8

Linking CSS now we can omit type=”text/css” attribute,  and it is no longer necessary.

While including a JavaScript file we no loner need to include type=“text/javascript” tag

More simplified syntax

We can omit quotes (not always, but most of the time) and can  use uppercase or lowercase or a mix of the both. Many elements do not need a closing tag anymore like

 

But please make a habit to close tags for better practice

It is not necessary to include the attributes in double quotes if it has no space in between or have some non alpha numeric characters. now

can be written as

 

but is is good practice to use quotes.

HTML5 document structure

New structural elements added to HTML5

<header> header of page that generally appears on top of each page. or it can be or a header of a long <article> or of a long <section>
<footer> Can contain the footer of website or a long <article>, or a long <section>
<nav> A section that contains the main navigation links
<article> A section with independent content, which can be individually extracted from the document or can be a blog post
<section> A section element is used to group articles or define the different sections of a single article. Can be used with a header.
<time> Used for times and dates.
<aside> Can be used as a side menu or can provide additional information possibly not related to main article
<figure> and <figcaption> Used to encapsulate a figure as an item, and a caption for the figure.
<main> This element represents main content of the body of a document or application. There can be only one <main> element in a document. It must not be a descendant of an <article>,<aside>, <footer>, <header>, or <nav> element.

 

Difference between an article and section

  • The <article> element can work as  stand-alone parts of a document.
  • <section> elements can be used to divide a logical part into subparts.

Can we use div element still

This is a figure form http://html5doctor.com/ . This explains when to use the div tag.

HTML5 sectioning flow chart

 

 

That’s it for this article, In our next post we would look in to more detail features of HTML5.

 

No Responses