SlideShare a Scribd company logo
2
Most read
3
Most read
4
Most read
HTML5
New Tags
Welcome To Ducat India
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
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.
Differences between HTML5 and 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.
Following are some of the major characteristics that distinguish HTML5
from HTML4.
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
Semantics of HTML 5 tags
Consider an example of HTML 4
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.
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:
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.
THANK YOU
CONTACT
MOB:- 70-70-90-50-90
Email:- info@ducatindia.com

More Related Content

PPT
Brief on Html5
PPTX
What are new added in HTML5?
DOCX
PDF
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
PDF
HTML5 Introduction – Features and Resources for HTML5
PPT
An Overview of RoboHelp 7
PPTX
Html Concept
PPTX
Chapter 2 introduction to html5
Brief on Html5
What are new added in HTML5?
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
HTML5 Introduction – Features and Resources for HTML5
An Overview of RoboHelp 7
Html Concept
Chapter 2 introduction to html5

What's hot (20)

PDF
Vskills certified html designer Notes
PDF
Web engineering notes unit 4
PPTX
SharePoint 2010 Web Standards & Accessibility
PPTX
Web topic 2 html
PPSX
HTML & JAVA Script
PDF
Iwt module 1
PDF
OpenCms Days 2013 - Social Connect for OpenCms Portal
PDF
Web engineering UNIT IV as per RGPV syllabus
DOCX
What is html xml and xhtml
PPTX
Hypertext markup language (html)
PDF
OpenCms Days 2012 - OpenCms 8 as a JSR-286 compliant portlet server
PDF
Html Tutor
PPT
Xhtml
PDF
Rc064 010d Core Html 1
PDF
HTML5 and XHTML2
PDF
Rails Girls - Introduction to HTML & CSS
PDF
jackylopez.com - Virtual Assistant and Web Development
PDF
Html tutorial
PPTX
HTML5 introduction for beginners
PPTX
Website development courses
Vskills certified html designer Notes
Web engineering notes unit 4
SharePoint 2010 Web Standards & Accessibility
Web topic 2 html
HTML & JAVA Script
Iwt module 1
OpenCms Days 2013 - Social Connect for OpenCms Portal
Web engineering UNIT IV as per RGPV syllabus
What is html xml and xhtml
Hypertext markup language (html)
OpenCms Days 2012 - OpenCms 8 as a JSR-286 compliant portlet server
Html Tutor
Xhtml
Rc064 010d Core Html 1
HTML5 and XHTML2
Rails Girls - Introduction to HTML & CSS
jackylopez.com - Virtual Assistant and Web Development
Html tutorial
HTML5 introduction for beginners
Website development courses
Ad

Similar to HTML5 New Tags (20)

DOC
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
PPTX
DOCX
Report html5
PPT
HTML 5 Complete Reference
PPT
1._Introduction_tyytggyyyyy666o_HTML5.ppt
PPT
1._Introduction_to_HTML5 powerpoint presentation
PPT
HTML_new_one is a ppt in markup language
PPT
1._Introduction_to_HTML5 les fonction et les balises
PPT
1._Introduction_to_HTML5 Web Designing.ppt
PPTX
PPT
Introduction to html55
PPT
1. Introduction to HTML5.ppt
PPT
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
PPT
Introduction to HTML5
PPT
Introduction to html5
PPTX
Delhi student's day
PPTX
HTML - 5 - Introduction
PPTX
INTRUDUCTION TO HTML 5
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
Report html5
HTML 5 Complete Reference
1._Introduction_tyytggyyyyy666o_HTML5.ppt
1._Introduction_to_HTML5 powerpoint presentation
HTML_new_one is a ppt in markup language
1._Introduction_to_HTML5 les fonction et les balises
1._Introduction_to_HTML5 Web Designing.ppt
Introduction to html55
1. Introduction to HTML5.ppt
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
Introduction to HTML5
Introduction to html5
Delhi student's day
HTML - 5 - Introduction
INTRUDUCTION TO HTML 5
Ad

More from Ducat (20)

PPTX
Dot net training institute
PPTX
Mis certification
PDF
Devops certification
PDF
Best ethical hacking course online
PPTX
React js training course in noida
PPTX
Java for beginners
PPTX
Benfits of python
PPTX
Interactive reports development
PPTX
Abap report
PPTX
Sap abap database table
PPTX
Sap s4 hana saps next generation business suite
PPTX
Connect dashboard designer
PPTX
Major components of sap hana
PPTX
Schema in sap hana
PPTX
Sap hana attribute view
PPTX
Sap hana studio administration console
PPTX
What is ebs
PPTX
Introduction to mern
PPTX
Selenium tutorials
PPTX
Waits alerts and switch windows
Dot net training institute
Mis certification
Devops certification
Best ethical hacking course online
React js training course in noida
Java for beginners
Benfits of python
Interactive reports development
Abap report
Sap abap database table
Sap s4 hana saps next generation business suite
Connect dashboard designer
Major components of sap hana
Schema in sap hana
Sap hana attribute view
Sap hana studio administration console
What is ebs
Introduction to mern
Selenium tutorials
Waits alerts and switch windows

Recently uploaded (20)

PDF
Computing-Curriculum for Schools in Ghana
PDF
Anesthesia in Laparoscopic Surgery in India
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PDF
Sports Quiz easy sports quiz sports quiz
PDF
RMMM.pdf make it easy to upload and study
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
PDF
TR - Agricultural Crops Production NC III.pdf
PDF
Classroom Observation Tools for Teachers
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PDF
Complications of Minimal Access Surgery at WLH
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PPTX
Lesson notes of climatology university.
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Computing-Curriculum for Schools in Ghana
Anesthesia in Laparoscopic Surgery in India
STATICS OF THE RIGID BODIES Hibbelers.pdf
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Sports Quiz easy sports quiz sports quiz
RMMM.pdf make it easy to upload and study
Module 4: Burden of Disease Tutorial Slides S2 2025
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
TR - Agricultural Crops Production NC III.pdf
Classroom Observation Tools for Teachers
102 student loan defaulters named and shamed – Is someone you know on the list?
Complications of Minimal Access Surgery at WLH
Supply Chain Operations Speaking Notes -ICLT Program
Abdominal Access Techniques with Prof. Dr. R K Mishra
Lesson notes of climatology university.
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
3rd Neelam Sanjeevareddy Memorial Lecture.pdf

HTML5 New Tags

  • 2. 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
  • 3. 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. Differences between HTML5 and HTML4
  • 4. •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. Following are some of the major characteristics that distinguish HTML5 from HTML4.
  • 5. 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 Semantics of HTML 5 tags
  • 6. Consider an example of HTML 4 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.
  • 7. 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.
  • 8. 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:
  • 9. 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.