20 Sep 2015
Home  »  Graphics & Web • HTML5   »   HTML5 new features introduction

HTML5 new features introduction

Posted in Graphics & Web, HTML5 By Maz On September 20, 2015

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


<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="utf-8">

   <title>Page Title</title>

   <link rel="stylesheet" href="customCSS.css">

   <script src="customScript.js"></script>

</head>

<body>
Content Here

</body>

</html>

See the simple

<!doctype html>

Second

<html lang="en">

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

<meta charset="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

</li>, </dt>, </dd>, </tr>, </th>, </td>, </thead>, </tfoot>, </tbody>, </option>, </optgroup>
,</p> </head> </body>, </html>

 

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

<link rel="stylesheet" href="style.css">

can be written as

<link rel = stylesheet  href = style.css>

 

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.

 

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 CSS3 Blog</title>
</head>
<body>
<header>
    <h1>HTML5 <span>CSS3</span> blog</h1>
</header>

<nav>

    <ul>

       <li><span>Home</span></li>

       <li><a href="#">About Us</a></li>

       <li><a href="#">Contact Us</a></li>

    </ul>

</nav>

<section>

     <article>
      ...
    </article>
    <article>
     ...
    </article>
   <article>
    ...
   </article>

</section>


<figure>
    <img src="images/anyImage.png"
         alt="Example of HTML5 structural tags" />
    <figcaption>
       Figure caption
    </figcaption>
</figure>
<aside>
   <h1>Tag cloud</h1>
   <ul class="tag-cloud">
       <li><a href="" rel="tag" class="w2">JavaScript</a></li>
       <li><a href="" rel="tag" class="w8">Ajax</a></li>
       <li><a href="" rel="tag" class="w3">JQuery</a></li>
       ...
   </ul>
</aside>
<footer>
   <p>2015 - HTML 5 CSS3 Blog</p>
</footer>

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.
    <article id="articel1">
       <section id="articel1part1">
         <h2>Introduction to article</h2>
       </section>
       <section id="articel1part2">
         <h2>History of HTML5</h2>
       </section>
       <section id="articel1part3">
         <h2>HTML5 Structural Elements</h2>
       </section>
    </article>

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.

 

Tags:

About Author

maz

Maz is a software engineer, and a Zend Certified Engineer . His area of expertise contains PHP /Mysql, Node JS / MongoDB, Angular JS, IOS and android.

Related Posts

No Responses