Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • An Overview to HTML5 Elements

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 262
    Comment on it

    Hello readers, Today in this blog we will discuss about HTML5 various elements, its syntax and various tags that are used in it.

    Features included in HTML5 -

    • The tag name remains uppercase.
    • For attributes the quotes remains optional.
    • The attributes value also remains optional.
    • The closing empty elements remains optional.

    Below is the syntax to the various tags used in HTML5 -

     

    HTML5 Document:-

    In HTML5, the syntax to the doctype is <!DOCTYPE html>

     

    Meta Tag :-

    The syntax to the character encoding in HTML5 is

    <meta charset = “UTF-8”>

     

    Script Tag :-

    The syntax of the script tag does not includes a type attribute containing some extra information. We can simply write it as

    <script src=”scriptfile.js”></script> 
    

     

    Link Tag :-

    The syntax to write link in HTML5 is as follows -

    <link rel=”stylesheet” href=”stylefile.css”>

     

    New and Updated HTML5 Elements :-

    HTML5 has introduces 28 new elements , these are as follows -

    <section>, <article>, <aside>, <header>, <footer>, <nav>, <figure>, <figcaption>,<video>, <audio>, <source>, <embed>, <mark>, <progress>, <meter>, <time>, <ruby>, <rt>, <rp>, <wbr>, <canvas>, <command>, <details>, <summary>, <datalist>, <keygen> and <output>

    HTML5 has updated some of the previous existing elements which is useful for creating an effective website. These are :-

    • The <a> element now contain flow content instaed of just using phrasing content.
    • The <hr> element represent a paragraph-level now.
    • The <cite> element represents the title of a work.
    • The <strong> element represents importance rather than strong emphasis.

     

    Below is the list of various new elements of HTML5 -

    • Graphic Elements -
    1. <canvas> - It defines the graphic design using javascript.

    2. <svg> - It defines multimeda and graphic content using SVG.

     

    • Media Elements -
    1. <audio> - It defines the sound or some music content.

    2. <video> - It defines a movie or video content.

    3. <track> - It defines tracks for <video> and <audio> contents.

    4. <source> - It defines the source for the <video> and <audio> content.

    5. <embed> - It represents containers for some external applications such as plugins.

     

    • New Semantic / Structural Elements -
    1. <article> - It defines the article of the content.

    2. <aside> - It defines the content that is aside from the rest of the page.

    3. <bdi> - It defines to the part of a text that might be formatted in some other direction from the remainning text.

    4. <details> - It defines to the additional details that a user can view or hide.

    5. <dialog > - It represents to a dialog box or a window.

    6. <figcaption> - It defines caption to the imgae used.

    7. <figure> - It defines to some code listing , diagram or photos used in the content.

    8. <footer> - It defines to the content representing the footer part.

    9. <header> - It defines header for the document or some section of a content.

    10. <main> - It represents the main content of a document.

    11. <mark> - It represents to the highlighted text in the content.

    12. <meter> - It defines to the scalar measurement to the content.

    13. <nav> - It represents to the navigation link in a document.

    14. <progress> - It represents to the progress showing by any task.

    15. <time> - It represents to the time/date in a document.

    16. <wbr> - It represents to the link break in a content.

    17. <section> - It define to a section in a document.

    18. <ruby > - It defines to a ruby annotation.

     

    • Forms Elements -
    1. <datalist > - It defines to the pre- defined options for input controls in a form.

    2. <keygen> - It represents to a key pair generated field in a form.

    3. <output> - It represent to result of some calculation.

     

    Some new Input types updated in HTML5 are -:

    1. color

    2. date

    3. datetime

    4. datetime-local

    5. email

    6. month

    7. number

    8. range

    9. search

    10. tel

    11. time

    12. url

    13. week

     

    Below is the list of some removed elements these are -:

    1. <acronym>

    2. <applet>

    3. <basefont>

    4. <big>

    5. <center>

    6. <dir>

    7. <form>

    8. <frameset>

    9. <noframes>

    10. <strike>

    11. <tt>

     

    Some of the removed elements from HTML4.1 are used in HTML5 with a different name or in CSS.

    Conclusion :-

    Hence, HTML5 elements are easy to learn and understand for creating an effective websites having various features in it.

    Note :- In the next blog we will discuss about the various attributes used in HTML5.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: