New in HTML5 ?

Next ❯New Elements
  • turned_in_notSimple DOCTYPE declarationLATEST
    <!DOCTYPE HTML>

    *Now Mostly Websites are using HTML 5

  • trending_downSimple charset declaration
    <meta charset="UTF-8">
  • trending_down New API's
    • Drag and Drop
    • Geolocation
    • SSE(Server-Sent Events)
    • WebSocket
    • Web Storage
    • Web Workers
    • WebRTC
  • trending_downRemoved some earlier HTML Elements
    <acronym>, <applet>
<basefont>, <big> 
<center>
<dir> 
<font>, <frame>, <frameset>
<noframes>
<s>, <strike> 
<tt>
<u>
<xmp>
  • trending_downAdded some NEW Elements/Tags 
    <article>, <aside>, <audio>
<bdi>
<canvas>
<datalist>, <details>, <dialog>
<embed>
<figcaption>, <figure>, <footer>
<header>
<keygen>
<main>, <mark>, <menuitem>, <meter>
<nav>
<output>
<picture>, <progress>
<rp>, <rt>, <ruby>
<section>, <source>, <summary>
<time>, <track>
<video>
<wbr>
  • trending_downCan Add Custom Tags 
    <!DOCTYPE html>
<html>
  <head>
    <title>My Custom Tags</title>
    <style>
     abc,xyz{
        display: block;
        padding: 20px;
        font-size: 20px;
      }
    abc{
       background: #73a6d5;
       color: white;
    }
    xyz{
      background: #66ef6b;
    }
    </style>
  </head>
  <body>
    <abc>My First custom tag</abc>
    <xyz>My Second custom tag</xyz>
  </body>
</html>
    OUTPUT:
    My First custom tag My Second custom tag
  • trending_downAdded New Form Input Types
    Input Type Description
    Input TypeDescription
    colorInput Color Field
    dateA Date (Format: Year, Month, Day)
    datetime-localA date and time with no time zone information
    emailTo accept only email value
    monthDate contains Year & Month
    numberTo accept only numerical value
    rangeTo accept value from a range of numbers
    searchIt is used for search fields
    telTo accept only telephone number
    timeTime contains (Hour, Minute, Seconds, Fractional Seconds)
    urlTo accept only URL value
    weekTo accept only date, contains Year & week

    *Now Mostly Websites are also using HTML5 Input Type

Page Layout

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <!--Some document head related tags are used here-->
  </head>
  <body>
    <header>...</header>
    <nav>...</nav>
    <main>
      ...........
    </main>
    <footer>...</footer>
  </body>
</html>
Example:
  • turned_in_notSimple HTML5 Script
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML 5 Sample Page</title>
 </head>
 <body>
  <header>
   <h1>HTML5 Layout Example</h1>
   <p>This page is made using no CSS</p>
  </header>
  <nav>
   <ul>
    <li><a href="http://YourSiteURL/html">HTML Tutorial</a></li>
    <li><a href="http://YourSiteURL/html5">HTML5 Tutorial</a></li>
    <li><a href="http://YourSiteURL/css">CSS Tutorial</a></li>
   </ul>
  </nav>
  <main>
   <p>This is the main content of the web page</p>
  </main>
  <footer>
   <p>Created by <a href="http://YourSiteURL">YourSiteName</a></p>
  </footer>
 </body>
</html>
  • visibilityAbove tags used Explained
    • Only described HTML5 related & new elements below
    TagDescription
    <!DOCTYPE html>Specify the document type version is HTML5
    <meta>Metadata, Here above specify the character encoding
    <header>Specify the header of the web page [TOP]
    <nav>Specify the navigation links used in web page
    <main>Specify the main(Unique) content for the web page [MIDDLE]
    <footer>Specify a footer for web page or section [BOTTOM]
  • doneOutput of above

  • New Elements
❮ Prev Getting Started
Next ❯New Elements
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯