What are the new features and elements in HTML5?

HTML5 as Successor of HTML

HTML is a markup language which is used for structuring and presenting content for the World Wide Web (WWW). It is a base of web page which is used to display text, images and links, it is the predecessor of HTML5. HTML5 is a current and fifth version of HTML (HyperText Markup Language) standard and many new advanced features have been added and some depreciated from HTML5. HTML5 is a result of mutual efforts of the World Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group (WHATWG). It is created with objective to offer advanced and better media support on mobile devices and to solve the compatibility problems via offering many new features.

New Elements in Html5

HTML5 offers new and advanced elements, here we have categorized them based on their usage:

New !Doctype

Doctype declaration for HTML5 is new and very simple to memorize as compared to old one in XHTML. In HTML, DOCTYPE is very longer because HTML4 is SGML-based, but in HTML5 DOCTYPE is required to allow standard mode for documents.

In HTML5: <!Doctype html>
In XHTML: <!DOCTYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

New Semantic/Structural Elements

In HTML5, structural and semantic elements allow to express the content and the meaning of the content in more precise and clear manner. Structural elements offer better structure and layout.

Inline Semantic Elements

<meter>: Defines a scalar estimation or measurement within a known range (a gauge).
<time>: Specifies date and time in machine readable mode.
<mark>: Refers to a highlighted or marked text that is relevant for reference purposes.
<progress>: Defines the completion or progress of a specific task in form of bar or wheel.
<rp>: Defines what to display in browsers that don’t support ruby annotations.
<rt>: Describe the pronunciation of East-Asian word or character.
<ruby>: It is used to display user that how to pronounce East-Asian characters.

Block semantic elements

<aside>: Refers to a piece of content slightly related to the content surrounding like glossaries, sidebars, related advertisements and links.
<figure>: Specifies a self-contained content that may be any diagram, illustration, photo etc. that doesn't affect main flow of the article.
<dialog>: Defines any dialog box or modal window on a web page.

Text-Level Elements

<bdi>: It stands for Bi-directional isolation element, which refers to a formatted text that goes different direction from other text in a document.
<wbr>: Defines a line break in a long words or addresses.

Structural Elements

<article>: Represents independent piece of content i.e. article, magazine or blog entry. It is used to describe part of a content which is self-contained, autonomous and independent.
<header>: Defines a header for a section or document, at the top part of the web page. It contains information about the company like company name, logos and navigation bar also.
<section>: Represents a section or area on a web page. <div>, <frameset>, <header>, <body> and <section> are some common tags which are used for creating sections on a web page.
<footer>: Describes a footer for a section or document that contain any information like about author or copyrights.
<nav>: Refers to a block of navigational links. It is used for page connections or links to different pages or within a page or declaring the navigational section of a web page.
<main>: Specifies the main content of a document.

Interactive Elements

<details>: Defines additional details or control for the user. It is useful when you want to add additional information.
<menuitem>: Specifies a menu item that user can invoke through pop up menu.
<summary>: It is a child element that show the summary of <details> element.
<figcaption>: Represents the caption for a figure element. It is optional, or can be used either at first or last within figure element.

New Media Elements

HTML5 introduced certain media elements like <audio>, <video>, <source>, <track> and <embed> which enable us to add audio-video files in our HTML documents. Audio and Video tags are used to embed audio file which was not earlier possible in HTML.

<audio>: Indicates the content of a sound like any music or audio file.
<embed>: Defines a container for plug-in for an external application.
<source>: Describes the multiple media sources for media elements like audio and video.
<track>: Defines track for audio as well for video. This element is used to describe subtitles, caption and other files while media is playing.
<video>: Specifies a video, movie or any video file.

New Graphic Elements

New graphic elements in HTML5 offer canvas and SVG element that allows to draw graphics, animations, diagrams, games and image structure, shape and images etc. and various methods for drawing paths, boxes, circles, characters.

<canvas>: It allows to draw raster based images or bitmap, graphics, constructing diagrams, animations, games and image structure using JavaScript.
<svg>: SVG stands for Scalable Vector Graphics is used to define 2-dimensional vector based graphics for a web. SVG is an XML based image format. Images can be zoomed in or out without compromising its quality.

New Form Elements

HTML5 offers new form elements with the aim to provide better form structure and layout, advanced custom display and more functionality. They are very useful for the users to input data and interaction with many other services.

<datalist>: Indicates a list of pre-defined options for input controls.
<keygen>: Offers a way to create a key-pair for forms.
<output>: Defines the result of a calculation.

New Input Types

color: for hexadecimal color.
date: Input field for a date.
datetime: Field for picking a date and time.
datetime-local: For selecting a local datetime.
email: Input field for entering an email address.
month: For choosing a month
number: For selecting a number.
range: Allows a slider to decide a certain value.
search: Input field for search.
tel: For picking a telephone number.
time: To set a certain time.
url: Entering a url.
week: Selecting a specific week

New Input Attributes

autocomplete: Indicates whether an input field should have autocomplete on or off.
autofocus: Defines that when the page loads, input field should automatically autofocus.
form: Indicates that an <input> element is related to one or more forms.
formaction: When form is submitted, it specifies URL of a file that will process the input control.
formenctype: Describes how to encode the form data, when the form is submitted.
formmethod: Specifies the method for sending form-data to the URL.
formnovalidate: Specifies that form data should not be validated when submitted.
formtarget: Defines a keyword that points, where to show the response received after form is submitted.
height and width: Specifies the height and width of an input element.
list: Refers to a datalist element that includes pre-defined options for an input element.
min and max: Defines a min and max. value for an input element.
multiple: Allows to enter more than value or multiple values in an <input> element.
pattern: Defines a pattern in which input values are checked like tel, email, search, text and number.
placeholder: Describes the expected value of an input field.
required: Indicates that input field must be filled before submitting a form.
step: Specifies a positive floating point number intervals for an <input> element. The first character may not be a "-" character and a number must be greater than zero.

Browser Compatibility

HTML5 is supported by all modern browsers like Safari, Chrome, Firefox, Opera and Internet Explorer. All Browsers continue to add new HTML5 features to their latest versions so that they can support all of HTML5 elements.

Geolocation Support

Geolocation API can be used on mobile devices to check user's location. There are many ways to check out where you are like via wireless network connection, IP address and GPS hardware. It is potential for cross platform mobile applications.

Better Error Handling

HTML5 can easily handle incorrect syntax. HTML5 is designed to provide detailed rules for scanning and dissecting, so that different browsers will produce the same result in the case of incorrect syntax.

Syntactic Features

New syntactic features like audio, video, canvas, Scalable Vector Graphics (SVG) and Mathematical Markup Language (MathML) for mathematical calculations.

Removed Elements Which Are Not Supported in Html5

acronym
applet
basefont
big
center
dir
font
frame
frameset
Index
noframes
noscript
strike
tt
u

Conclusion

HTML5 adds a lots of new features (elements and attributes) to web pages and web design which are quite interesting and exciting and it also supports multimedia elements. Moreover, it improves the markup available for documents and also provides markup APIs for various and complex web applications. With the use of the above elements and attributes of HTML5, you can make your website more beautiful and attractive, so these are the enough reasons to use HTML5.