Scribd Logo
Upload

Welcome to Scribd!

  • 15 views

    HTML 5

    Uploaded by

    akash chandankar
    HTML5 is the new standard for HTML that delivers almost everything you want to do online without requiring additional plugins. It supports animation, apps, music, movies and more complex applications that run in the browser across platforms. Key differences from HTML4 include new elements like <canvas> for drawings and <audio> and <video> for multimedia. Browser support is still evolving but major browsers continue adding HTML5 features.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    HTML 5

    Uploaded by

    akash chandankar
    15 views31 pages
    HTML5 is the new standard for HTML that delivers almost everything you want to do online without requiring additional plugins. It supports animation, apps, music, movies and more complex applications that run in the browser across platforms. Key differences from HTML4 include new elements like <canvas> for drawings and <audio> and <video> for multimedia. Browser support is still evolving but major browsers continue adding HTML5 features.

    Original Description:

    html 5 chapter 1

    Original Title

    html5

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    HTML5 is the new standard for HTML that delivers almost everything you want to do online without requiring additional plugins. It supports animation, apps, music, movies and more complex applications that run in the browser across platforms. Key differences from HTML4 include new elements like <canvas> for drawings and <audio> and <video> for multimedia. Browser support is still evolving but major browsers continue adding HTML5 features.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    15 views31 pages

    HTML 5

    Uploaded by

    akash chandankar
    HTML5 is the new standard for HTML that delivers almost everything you want to do online without requiring additional plugins. It supports animation, apps, music, movies and more complex applications that run in the browser across platforms. Key differences from HTML4 include new elements like <canvas> for drawings and <audio> and <video> for multimedia. Browser support is still evolving but major browsers continue adding HTML5 features.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 31

    HTML5

    What is HTML5?
    What is HTML5?
    HTML5 is the new standard for HTML.

    The previous version of HTML was – HTML 4.01, came in 1999.

    HTML5 is designed to deliver almost everything you want to do


    online without requiring additional plugins. It does everything from
    animation to apps, music to movies, and can also be used to build
    complicated applications that run in your browser.

    HTML5 is also cross-platform (it does not care whether you are using
    a tablet or a smartphone, a notebook, notebook or a Smart TV).
    Differences Between HTML4 and
    HTML5
    Differences Between HTML4 &
    HTML5
    1. HTML5 is a work in progress
    2. Simplified Syntax
    3. The New <canvas> Element for 2D drawings
    4. New content-specific elements, like <article>,
    <header>, <footer>, <nav>, <section>
    5. New <menu> and <figure> Elements
    6. New <audio> and <video> Elements
    7. New form controls, like calendar, date, time, email,
    url, search
    8. No More <frame>, <center>, <big>, and <b>, <font>
    9. Support for local storage
    Browser Support for HTML5
    Browser Support for HTML5
    HTML5 is not yet an official standard, and no
    browsers have full HTML5 support.

    But all major browsers (Safari, Chrome, Firefox,


    Opera, Internet Explorer) continue to add new
    HTML5 features to their latest versions.
    HTML5 Document
    The HTML5 <!DOCTYPE>
    In HTML5 there is only one <!doctype>
    declaration, and it is very simple:

    <!DOCTYPE html>
    Minimum HTML5 Document
    Below is a simple HTML5 document, with the minimum of required
    tags:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    </head>
    <body>
    Content of the document......
    </body>
    </html>
    HTML5 New Elements
    • New Elements in HTML5
    • Semantics is the study of the meanings of
    words and phrases in language.
    • Semantic elements are elements with a
    meaning.
    • A semantic element clearly describes its
    meaning to both the browser and the
    developer.
    • Examples of non-semantic elements: <div>
    and <span> - Tells nothing about its content.
    • Examples of semantic elements: <form>,
    <table>, and <img> - Clearly defines its
    content.
    New Semantic Elements in HTML5

    HTML5 offers new semantic elements to define different parts of a web page:
    • HTML5 <section> Element
    • The <section> element defines a section in a
    document.
    • "A section is a thematic grouping of content,
    typically with a heading."
    • A Web site's home page could be split into
    sections for introduction, content, and contact
    information.
    • Example
    • <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF)
    is....</p>
    </section>
    • HTML5 <article> Element
    • The <article> element specifies independent, self-contained
    content.
    • An article should make sense on its own, and it should be
    possible to read it independently from the rest of the web
    site.
    • Examples of where an <article> element can be used:
    • Forum post
    • Blog post
    • Newspaper article
    • Example
    • <article>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission is to stop the degradation of our
    planet's natural environment,
    and build a future in which humans live in harmony with
    nature.</p>
    </article>
    • HTML5 <header> Element
    • The <header> element specifies a header for a document or
    section.
    • The <header> element should be used as a container for
    introductory content.
    • You can have several <header> elements in one document.
    • The following example defines a header for an article:
    • Example
    • <article>
    <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
    </header>
    <p>WWF's mission is to stop the degradation of our
    planet's natural environment,
    and build a future in which humans live in harmony with
    nature.</p>
    </article>
    • HTML5 <footer> Element
    • The <footer> element specifies a footer for a
    document or section.
    • A <footer> element should contain information about
    its containing element.
    • A footer typically contains the author of the
    document, copyright information, links to terms of
    use, contact information, etc.
    • You can have several <footer> elements in one
    document.
    • Example
    • <footer>
    <p>Posted by: vinayak</p>
    <p>Contact
    information: <a href="mailto:someone@example.com
    ">
    someone@example.com</a>.</p>
    </footer>
    • HTML5 <nav> Element
    • The <nav> element defines a set of navigation
    links.
    • The <nav> element is intended for large blocks of
    navigation links. However, not all links in a
    document should be inside a <nav> element!
    • Example
    • <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>
    • HTML5 <aside> Element
    • The <aside> element defines some content aside
    from the content it is placed in (like a sidebar).
    • The aside content should be related to the
    surrounding content.
    • Example
    • <p>My family and I visited The Epcot center this
    summer.</p>
    <aside>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney
    World, Florida.</p>
    </aside>
    • HTML5 <figure> and <figcaption> Elements
    • In books and newspapers, it is common to have captions
    with images.
    • The purpose of a caption is to add a visual explanation to an
    image.
    • With HTML5, images and captions can be grouped together
    in <figure> elements:
    • Example
    • <figure>
    <img src="pic_mountain.jpg" alt="The Pulpit
    Rock" width="304" height="228">
    <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
    </figure>
    • The <img> element defines the image,
    the <figcaption> element defines the caption.
    Semantic Elements in HTML5

    Index Semantic Tag Description


    1. <article> Defines an article
    2. <aside> Defines content aside from the page content
    3. <details> Defines additional details that the user can view or hide

    4. <figcaption> Defines a caption for a <figure> element


    5. <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings,
    etc.
    6. <footer> Defines a footer for a document or section
    7. <header> Specifies a header for a document or section
    8. <main> Specifies the main content of a document
    9. <mark> Defines marked/highlighted text

    10. <nav> Defines navigation links


    11. <section> Defines a section in a document
    12. <summary> Defines a visible heading for a <details> element

    13. <time> Defines a date/time


    <header></header>
    <section>
    <article>
    <figure>
    <img>
    <figcaption>
    </figcaption>
    </figure>
    </article>
    </section>
    <footer></footer>
    • Whilst this second block of code uses non-semantic
    elements:
    <div id="header">
    </div>
    <div class="section">
    <div class="article">
    <div class="figure">
    <img>
    <div class="figcaption">
    </div>
    </div>
    </div>
    </div>
    <div id="footer"></div>
    The New <canvas> Element
    The <canvas> element is used to draw graphics,
    on the fly, via scripting (usually JavaScript).
    New Media Elements
    Tag Description
    <audio> Defines sound content
    <video> Defines a video or movie
    <source> Defines multiple media resources for <video> and <audio>
    <embed> Defines a container for an external application or interactive
    content (a plug-in)
    <track> Defines text tracks for <video> and <audio>
    New Form Elements
    Tag Description
    <datalist> Specifies a list of pre-defined option for input controls
    <keygen> Defines a key-pair generator field (for forms)
    <output> Defines the result of a calculation
    New Semantic/Structural Elements
    Tag Description
    <article> Defines an article
    Defines content aside from the page
    <aside>
    content
    Isolates a part of text that might be
    <bdi> formatted in a different direction from
    other text outside it
    Defines a command button that a user
    <command>
    can invoke
    Defines additional details that the user
    <details>
    can view or hide
    <dialog> Defines a dialog box or window
    Defines a visible heading for a <details>
    <summary>
    element
    New Semantic/Structural Elements
    Tag Description
    Specifies self-contained content, like
    <figure> illustrations, diagrams, photos, code
    listings, etc.
    <figcaption> Defines a caption for a <figure> element
    Defines a footer for a document or
    <footer>
    section
    Defines a header for a document or
    <header>
    section
    <mark> Defines marked/highlighted text
    Defines a scalar measurement within a
    <meter>
    known range (a gauge)
    <nav> Defines navigation links
    New Semantic/Structural Elements
    Tag Description
    <progress> Represents the progress of a task
    Defines a ruby annotation (for East Asian
    <ruby>
    typography)
    Defines an explanation/pronunciation of
    <rt>
    characters (for East Asian typography)
    Defines what to show in browsers that do
    <rp>
    not support ruby annotations
    <section> Defines a section in a document
    <time> Defines a date/time
    <wbr> Defines a possible line-break
    Removed Elements
    The following HTML 4.01 elements are removed from HTML5:
    • <acronym>
    • <applet>
    • <basefont>
    • <big>
    • <center>
    • <dir>
    • <font>
    • <frame>
    • <frameset>
    • <noframes>
    • <strike>
    • <tt>

    You might also like