HTML5 Tags – Complete List of New HTML5 Tags


Today we are going to take a look at the new HTML5 Tags. HTML5 introduced many new awesome tags and attributes that will make developing website more easy and fun.

The Hyper Text Markup language (HTML) was developed in 1993 for creating web pages and web applications. Later, CSS (Cascading Style Sheet) improved the way content presented to the user and made web pages more responsive. The most up to date version of HTML is HTML5. Earlier websites only used text and images data, but as the world has grown we needed support for audios, videos, maps, location services etc, which were not provided or handled properly in previous versions. So the latest release is suitable to develop any kind of web app you want to build.

With the initial release of HTML, developer needed much more functionality to improve the layouts, make web pages more users friendly and attractive. Thanks to HTML5 all their dreams now can come to reality.

All New HTML5 Tags:

Here is the lists of new HTML5 tags you must know. With the help of theses elements you will be able to make your web pages more beautiful and responsive.

  1. <aside>: adding something aside the content on web page.
  2. <article>: defines an article like blog posts,or information or data.
  3. <audio>: to add audio files like mp3 etc.
  4. <bdi>: Bi-directional Isolation, to change the text direction left to right or right to left etc.
  5. <canvas>: add graphics with the help of JavaScript
  6. <command>: a command that can be invoked
  7. <dialog>: for adding a dialog box
  8. <datalist>: list of pre-defined options for input controls
  9. <datagrid>
  10. <embed>: container for external application
  11. <figcaption>: for adding caption to picture
  12. <footer>: defining a footer (bottom area of web page)
  13. <hgroup>: defines header (top area of a web page) with multiple headers
  14. <header>: group of navigational links
  15. <meter>: represent measurements 
  16. <main>: main content of document
  17. <mark>: highlighting text for reference purpose
  18. <nav>: defining navigational section
  19. <output>: represents output as from a function
  20. <progress>: shows progress of complex/lengthy tasks
  21. <rt>: pronunciation of text
  22. <rp>: what to show in browsers that do not support ruby annotations
  23. <ruby>: marking up ruby annotations
  24. <svg>: add vector graphics in HTML pages.
  25. <summary>: visible heading for detail element
  26. <source>: when adding media files, it defines their sources
  27. <section>: defines a section of content
  28. <time>: to add date/time in website
  29. <track>: adding text tracks from media elements
  30. <video>: add videos in web pages.
  31. <wbr>: to break long words according to screen size.
Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *