Quick Contact

    HTML5 New Tags

    HTML5, the latest version of the Hypertext Markup Language (HTML), is the most radical revision of the language to date. It introduces many new features in a variety of areas. Some of the more notable additions include:

    • Built-in multimedia tags for audio and video
    • A canvas tag for drawing content in the browser
    • Smarter forms that let you do things such as validation through the use of a required attribute
    Differences between HTML5 and HTML4

    HyperText Markup Language or simply HTML is the markup language used by web developers to create web pages.

    HTML 4 amplifies HTML with systems for templates, scripting, outlines, installing objects, enhanced backing for the right to left and blended course message, wealthier tables, and upgrades to structures, offering enhanced openness for individuals with handicaps. HTML 4.01 is an amendment of HTML 4.0 that redresses mistakes and rolls out a few improvements since the past modification

    HTML5 is the fifth version of HTML and is a core technology markup language of internet that is used for structuring and presenting the content for WWW. It is the latest, final and complete version of HTML standard of the W3C (World Wide Web Consortium). It is the successor of HTML4 that was standardized in 1997. The aim of HTML5 is to improve the language by support of latest multimedia while keeping it user friendly and easily readable by humans and consistently understood by computers and devices such as web browsers parser, etc. HTML5 is intended to subsume not only HTML4, but also XHTML 1 and DOM Level 2 HTML. HTML5 is a response to the fact that the HTML and XHTML in common use on the WWW are mixture of features launched by multiple specifications, along with those launched by software products such as web browsers, those established by common practice. HTML5 is a markup dialect utilized for organizing and displaying content on the World Wide Web. As the name implies, the HTML 5 is the fifth and current form of the HTML standard. It was distributed in October 2014 by the World Wide Web Consortium (W3C) to enhance the dialect with backing for the most recent interactive media, though keeping it effortlessly coherent by people, and reliably comprehended by PCs and gadgets, for example, web programs, parsers, and so on.

    Following are some of the major characteristics that distinguish HTML5 from HTML4.
    • Simplified and Clear Syntax The syntax in HTML5 is extremely clear and simple as compared to HTML4. One example of this is the DOCTYPE element. In HTML4 the DOCTYPE declaration was too messy and lengthy and used to refer an external source. However in HTML5 DOCTYPE element has been made extremely simple. For instance a mere <!DOCTYPE html> is enough to specify the document type.
    • Multimedia Elements HTML5 contains built in support for integrated multimedia files into web page via video and audio tags. Previously, in HTML4, the multimedia content was integrated in web pages via third party plugins such as Silverlight and flash.
    • Accessing User Geographical location Previously in HTML4, it was an extremely cumbersome task to get the geographical locations of the visitors visiting the site. It was even difficult when the website was accessed through mobile devices. On the other hand, in HTML5 is extremely easy to get the user location. HTML5’s JS GeoLocation can be leveraged to identify the location of the user accessing the website.
    • Client Side storage In HTML4, in order to store important data on client side, browser’s cache was used. However, that cache is limited and doesn’t support relational storage mechanism. In HTML5, this issue has been addressed via Web SQL database and application cache that can be access via HTML5’s JavaScript interface.
    • Client Server Communication In HTML4 the communication between the client and server was done through streaming and long polling, since there are no web sockets available in HTML4. On the contrary, HTML5 contains web sockets that allow full duplex communication between clients and servers.
    • JavaScript Threading Mechanism In HTML4, JavaScript and the browser interface with which user interacts, run in the same thread which affects performance. HTML5 contains JS Web Worker API which allows JavaScript and Browser interface to run in separate threads.
    • Browser Compatibility As aforementioned, HTML4 is an established standard for developing browser applications and has been in use for more than 10 years. For this reason, HTML4 is compatible with almost all web-browsers. On the other hand, HTML5 is still in the process of evolution and the currently available tags are being modified and also new tags are being added. Therefore, HTML5 lags behind HTML4 in terms of compatibility with the browsers.
    Semantics of HTML 5 tags

    The HTML 5 tags are explanatory itself. They reveal their functionality with their syntax. For example:

    • Header tag is used for header . In case of HTML 4 we used id or class to define header.
    • Footer tag is used for footer part . In case of HTML 4 we used id or class to define footer.
    HTML5 New Tags

    With a new set of structural tags, HTML5 revises the way that HTML documents are structured. The new structural tags focus on dividing an HTML document into logical parts.

    These, and other sections and page elements, are quite common, so HTML5 includes tags that break documents into the common sections and indicates the content contained in each section. The new tags are:

    • header
    • section
    • article
    • aside
    • footer
    • nav

    Consider an example of HTML 4

    Example 1:
    <!DOCTYPE html>
    <html>
      <head>
        <title>
          A Simple HTML Page Using Divs
        </title>
      </head>
      <body>
        <div id='header'>Header</div>
        <div id='content'>Content</div>
        <div id='footer'>Footer</div>
      </body>
    </html>
    

    Let’s learn about the above HTML5 tags in brief where we have explained using above example.

    The header tag

    Header tag is used for define a header section. Header is always used top of the any html documents or page.

    Note: Header tag never use within other tag like within footer tag, section tag, nav tag.

    Generally header area contains following information.

    • Wesite logo
    • Contact us
    • Login
    • List of menu
    • Social media links

    Below is the code from previous example, modified to use a header tag.

    Example 2:
    <!DOCTYPE html>
    <html>
      <head>
        <title>
          A Simple HTML Page
        </title>
      </head>
      <body>
        <header>Header</header>
        <div id='content'>Content</div>
        <div id='footer'>Footer</div>
      </body>
    </html>
    

    The doctype in example above is also changed to indicate that the browser should use HTML5 to render the page.

    The section tag

    Html <section> tag are used to defined sections in a document, such as chapters, headers, footers, or any other sections of the document on the web page.

    Adding a section tag to the code in Example 1 results in the following code:

    <!DOCTYPE html>
    <html>
      <head>
        <title>
          A Simple HTML Page
        </title>
      </head>
      <body>
        <header>Header</header>
          <section>
            <p>
              This is an important section of the page.
            </p>
          </section>
        <div id='footer'>Footer</div>
      </body>
    </html>
    
    The article tag

    Html <article> tag an independent self-contained content in a document, page, application or a site. <article> tag is generally used on Blog post, News story, Forum post, comment etc.

    Adding article tags to the code Example 1 results in the code shown below.

    <!DOCTYPE html>
    <html>
      <head>
        <title>
          A Simple HTML Page
        </title>
      </head>
      <body>
        <header>Header</header>
          <section>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
            </article>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
            </article>
          </section>
        <div id='footer'>Footer</div>
      </body>
    </html>
    
    The aside tag

    Html5 introduce new tag <aside> which provides information about the main content. According to W3C (World Wide Web Consortium) definition, the <aside> element represents content that forms the main textual flow of a document.

    Adding an aside tag to the code Example 1 results in the below code.

    Example 4
    <!DOCTYPE html>
    <html>
      <head>
        <title>
          A Simple HTML Page
        </title>
      </head>
      <body>
        <header>Header</header>
          <section>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
              <aside>
                <p>
                  This is an aside for the first blog post.
                </p>
              </aside>
            </article>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
            </article>
          </section>
        <div id='footer'>Footer</div>
      </body>
    </html>
    
    The footer tag

    Footer tag is used for define a footer section. Footer is always used below of the any html documents or page.

    Generally footer area contains following information.

    • Author name
    • Sitemap
    • Contact information
    • Copyright information
    • Related links
    • Social media links

    Adding footer tag to the code Example 1 results in the code shown below.

    Example 5
    <!DOCTYPE html>
    <html>
      <head>
        <title>
          A Simple HTML Page
        </title>
      </head>
      <body>
        <header>Header</header>
          <section>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
              <aside>
                <p>
                  This is an aside for the first blog post.
                </p>
              </aside>
            </article>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
            </article>
          </section>
        <footer>Footer</footer>
      </body>
    </html>
    
    The nav tag

    Html5 introduce new tag

    Note: Not all links of a document should be inside a

    Adding a nav tag to the code Example 1 results in the below code.

    Example 6
    <!DOCTYPE html>
    <html>
      <head>
        <title>
          A Simple HTML Page
        </title>
      </head>
      <body>
        <header>Header
          <nav>
            <a href='#'>Some Nav Link</a>
            <a href='#'>Some Other Nav Link</a>
            <a href='#'>A Third Nav Link</a>
          </nav>
        </header>
          <section>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
              <aside>
                <p>
                  This is an aside for the first blog post.
                </p>
              </aside>
            </article>
            <article>
              <p>
                This is an important section of content on the page.
                Perhaps a blog post.
              </p>
            </article>
          </section>
        <footer>Footer</footer>
      </body>
    </html>
    
    HTML 5 Forms

    HTML 5 forms contains the all the basics elements of HTML forms as well as new form attributes added in HTML 5

    The traditonal attributes are

    • The <input> Element <input>
    • Text Input <input tye=”text”>
    • Radio Button Input <input type=”radio”>
    • The Submit Button <input type=”submit”>
    • The Action Attribute <form action=”/action_page.php”>
    • The Target Attribute <form action=”/action_page.php” target=”_blank”>

    Here are the new form attributes in HTML 5

    Attribute Description
    accept-charset Specifies the charset used in the submitted form (default: the page charset).
    action Specifies an address (url) where to submit the form (default: the submitting page).
    autocomplete Specifies if the browser should autocomplete the form (default: on).
    enctype Specifies the encoding of the submitted data (default: is url-encoded).
    method Specifies the HTTP method used when submitting the form (default: GET).
    name Specifies a name used to identify the form (for DOM usage: document.forms.name).
    novalidate Specifies that the browser should not validate the form.
    target Specifies the target of the address in the action attribute (default: _self).
    HTML5 Element

    The <output> element represents the result of a calculation (like one performed by a script).

    Example

    Perform a calculation and show the result in an <output> element:

    <form action="/action_page.php"
      oninput="x.value=parseInt(a.value)+parseInt(b.value)">
      0
      <input type="range"  id="a" name="a" value="50">
      100 +
      <input type="number" id="b" name="b" value="50">
      =
      <output name="x" for="a b"></output>
      <br><br>
      <input type="submit">
    </form>
    
    Output Tag

    The output will be

    Following are the new form tags of HTML 5

    Tag Description
    <form> Defines an HTML form for user input
    <input> Defines an input control
    <textarea> Defines a multiline input control (text area)
    <label> Defines a label for an <input> element
    <fieldset> Groups related elements in a form
    <legend> Defines a caption for a <fieldset> element
    <select> Defines a drop-down list
    <optgroup> Defines a group of related options in a drop-down list
    <option> Defines an option in a drop-down list
    <button> Defines a clickable button
    <datalist> Specifies a list of pre-defined options for input controls
    <output> Defines the result of a calculation
    Summary

    The new HTML5 tags describe the types of content that they contain, and they help divide the document into logical sections.

    Once again let’s see the HTML5 tags that we have covered in this chapter:

    • The header tag is intended to mark a section of the HTML page as the header.
    • The section tag is meant to identify significant portions of the content on the page.
    • The article tag identifies major sections of content within a web page.
    • The aside tag indicates that the content contained within the tag is related to the main content of the page but is not part of it.
    • The footer tag marks the contained content of the element as the footer of the document.
    • The content contained within the nav tag is intended for navigational purposes.

    Copyright 1999- Ducat Creative, All rights reserved.