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
    color Input Color Field
    date A Date (Format: Year, Month, Day)
    datetime-local A date and time with no time zone information
    email To accept only email value
    month Date contains Year & Month
    number To accept only numerical value
    range To accept value from a range of numbers
    search It is used for search fields
    tel To accept only telephone number
    time Time contains (Hour, Minute, Seconds, Fractional Seconds)
    url To accept only URL value
    week To 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
receipt