This HTML5 Vs HTML Tutorial Explains the Key Differences Between HTML and HTML5. You can Also Learn About the Advantages and Disadvantages of HTML5:
Before learning the differences between HTML5 and HTML, let us first have a basic understanding of these terms and how the websites are designed using these Hypertext Markup Languages.
In this tutorial, we will see how HTML5, the latest version, is different from the HTML.
Table of Contents:
What Is A Markup Language?
A markup language is a medium used by web browsers to exchange information so as to determine how the webpage should look like. It deals with the presentation of the text with the help of the code. The code defines the format for both the style and layout of the webpage.
Different Types Of Markup Languages
Some of the important markup languages include:
- Standard Generalized Markup Language.
- Hypertext Markup Language.
- Extensible Markup Language.
- Extensible Hypertext Markup Language.
Various Versions Of HTML
- HTML 1.0: This was released in the year 1991 by Tim Berners. It did not have many features with the help of which we could perform web page design.
- HTML 2.0: This came into the picture in the year 1995. It included all the features of its previous version as well as its own features.
- HTML 3.2: This was released in the year 1997. This version introduced the Cascading Style Sheet (CSS) support.
- HTML 4.01: This was released in the year 1999. While in version 3.2, we have to incorporate CSS inside HTML itself, in HTML 4.01 the feature of an external style sheet was introduced. Here we have to create an external CSS file that we need to incorporate inside HTML. This version also added new tags.
- XHTML: This was released in the year 2000.
- HTML 5: This was released in the year 2014. This version has lots of new features including support to multimedia, minimize the usage of external plugins, the addition of new tags and so on.
What Is HTML?
HTML is known as a HyperText Markup Language that creates the structure and content of the web page.
Let’s take an example to understand further:
While studying any new language, we need to keep in mind important rules, grammar, and usage, similarly, while learning HTML we need to learn certain <tags> and elements and their importance.
Now, let us understand what a <tag> is.
<Tags> : An HTML element is distinguished from other texts by ‘tags’. The tags contain the element which is enclosed by “<” and “>” or also called as the start tag and an end tag.
Here <p> and </p> are the beginning and closing tags respectively and rest is the element content.
Please note the tags are case insensitive.
HTML Structure: An example of HTML Structure is shown below.
On running the code on the Chrome browser, we get the following output:
Please note the title of the page is “First Html Page”, the same as mentioned under the <title> tag of the HTML structure figured. The “Paragraph content” is the part of the <p> tag.
- <html> is at the top level of the HTML document which is often called as the root. <head> and <body> reside inside this tag.
- <head> contains information about the webpage like the title of the document. Some of the common tags inside header tags are <title>, <meta>, <link>, <style>, and <link>.
- <body> describes the actual presentation of the webpage. Some of the common tags inside the body tags are <h1>, <p>, <span>, <div>.
For any webpage, you can see the Html code by simply doing a right-click on the page followed by click ‘View Page Source’ option. CSS and Javascript along with HTML enable the development of interactive web pages.
How To Write And Execute An HTML code?
We need to write the HTML code in a text editor, it may be a Notepad ++, Atom Editor or a Visual Studio source code editor. If you are using a Notepad++, save the file with (.html) extension to location. Navigate to the file location and open it any browser (Chrome, Firefox, and IE).
Please note the <! DOCTYPE > added in the code above, passes information about the type of document that the browser can expect to get.
Below are some basic HTML tags and attributes:
#1) <a> tag is used to describe links on the webpage.
<ahref=”https://www.softwaretestinghelp.com/about/”>Software Test Help</a>
On clicking the ‘Software Test Help’ link created on the page which, it will redirect to the page referred in the href attribute.
An attribute is identified in the name: value pair and they provide further information about an element.
#2) <img>-tag is used to add images on the webpage.
<img src="html.png" alt="Html img missing">
src attribute defines the filename of the image with extension. In an event when the image is not exhibited, an alternate text shall be available on the page as mentioned with the alt attribute. This is very useful for vision-impaired people.
#3) <h1> – tag is used describe headings. It has a range from h1 to h6 with h1 being the heading with a maximum width and h6 the minimum.
#4) <ul> – tag is used to describe an unordered list of elements on the webpage.
<Ul> <li>Selenium</li> <li>UFT</li> </Ul>
#5) <Ol > – tag is used to describe an ordered list of elements on the webpage.
#6) <table> – tag is to describe table on the webpage.
<table> <tr> <th>Testing</th> <th>Development</th> </tr> <tr> <td>UFT</td> <td>HTML</td> </tr> </table>
tr, th, td are the table rows, header and data tags which reside inside the <table> to describe the structure of the table. The code snippet described above tells us that the table contains two rows with the first row having header. The second row contains data (UFT and HTML) and it has two columns.
What Is HTML 5?
HTML 5 is the latest version of HTML and has a lot of improved features. It has introduced a bunch of new elements and attributes. It provides support to CSS3, video, audio, and graphics.
HTML5 introduced the concept of Semantic elements like <header>, <footer> which clearly define the intent of the element and its content. Also, the doctype description to the webpage is very precise and is defined like this:
<strong><! DOCTYPE html></strong>
There is a list of brand new APIs provided by HTML 5 like geolocation, drag and drop, cache and so on.
HTML 5: New Tags And Features Added
#1) Header, footer, nav, section, aside, article, figure: Semantic elements are introduced which handles the structure of the document.
Let’s take an example using some of the semantic tags usages:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML Sementics</title> </head> <body> <header> <nav>Home</nav> </header> <article> <section><h1>HTML 5 Section Tag</h1><p>Section tag determines a section of a webpage</p></section> <section><h1>HTML 5 Article Tag</h1><p>Article tag determines an independent text on a webpage</p></section> </article> <aside><p>Aside tag is another tag introduced in HTML5</aside></p> <footer><br>footer tag is used to point to the concluding part of a webpage</footer> </body> </html>
Output:
#2) <Audio>, <video> tags are introduced as communicative elements.
Let’s take a code snippet to describe usage:
<audio controls> <source src="test.mp3" type="audio/mpeg"> </audio>
Watch this video to know more interesting facts on HTML 5:
#3) <Canvas>, <svg> tags are introduced for graphical elements.
#4) Modern form elements like date, time, week, email and many more are launched.
#5) Href is not a mandatory attribute for the anchor tag.
#6) Elements that make the webpage dynamic are introduced. These elements are <details>, <datagrid>, <menu> and so on.
#7) Doctype and character encoding are made simpler.
#8) Additional attributes like autofocus, autocomplete, required and many more are added for the form tags.
Let’s take a code snippet to describe usage:
<form> <input type="text” required> </form>
Here, the ‘required’ attribute defines that the particular input field is mandatory in a form.
#9) New APIs are introduced that have numerous uses like the determination of geolocation for users, drag and drop feature, local storage, application cache, and many more. All these results in the increasing demands of HTML5 in modern web applications.
#10) Also, some of the tags like <strike>, <font> of the earlier versions of HTML are obsolete.
#11) Besides attributes namely ping, the charset is introduced.
#12) Mathematical symbols are better represented for MathML elements with the help of <math> tag.
Differences Between HTML Vs HTML5
Below are the differences between HTML5 and HTML 4.01, commonly called HTML now.
| Serial No. | HTML | HTML5 |
|---|---|---|
| 1 | Does not provide the support for incorrect syntax in the code. | Has the efficiency of handling improper Syntax in the code. |
| 2 | Unable to support JavaScript to run in the background. | Javascript can run in the background. |
| 3 | Has three doctype declarations namely Strict, Frame set, Transitional. | Easier doctype declaration: < !DOCTYPE html > |
| 4 | Flash support required for playing audio and video. | < audio >, < video > tags supported the use of audio, video and games. |
| 5 | Flash, VML or Silverlight in association with HTML enabled the use of vector graphics. | Supports SVG and canvas. |
| 6 | Runs on all old browsers. | Works on the latest versions of Chrome, Safari and so on. |
| 7 | Less stable with mobile ease of use. | Easier for use of mobile users. |
| 8 | Not possible to draw shapes like circle, rectangle, square and so on. | Possible to draw shapes like circle, rectangle, square and so on. |
| 9 | Browser cache is the utilized as temporary storage. | SQL web database, application cache and web storage are utilized for storage. |
| 10 | Drag and drop feature not provided. | Drag and drop feature is provided. |
| 11 | Not much favorable for use of the developers in terms of readiness and speed. | Favorable for use of the developers in terms of readiness, speed and execution. |
| 12 | < Html >, < body >, < head > tags are mandatory while coding. | < Html >, < body >, < head > tags can be omitted while coding. |
| 13 | Div element is used extensively which does not tell anything about the content. | New elements with semantic meanings like header, footer, aside and so on have been introduced which makes the code more meaningful and easy to debug. |
| 14 | Elaborate character type encoding | Easier character type encoding |
| 15 | The feature to get the geolocation details not available to the users. | Modern API on HTML geolocation provides accurate location details of the users. |
| 16 | The type attribute for
Was this helpful?Thanks for your feedback!
|