7 Best Difference Between HTML and HTML 5

As you know that HTML is the main structure of web development for creating a simple web page and slowly HTML version updated then finally updated his time HTML Also Reached a new version that Called HTML5.

What is HTML?

Basically, Hypertext markup language (HTML)  is the structure for creating a weblog and web applications with Cascading Style Sheet (CSS) and JavaScripts. 

So Guys Let's go to know that how HTML was work and which is Difference Between HTML And HTML5.




Difference-Between-HTML-and-HMTL5



What is the difference between HTML and HTML5

1. New Doctype

doctype is the version type like HTML Start-up Before html5 we were using doctype like:

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

* That was impossible and difficult-to-memorize


BUT in HTML5 features
You simply write:

  <!DOCTYPE html>   


* Still it truthfully isn't even really necessary for HTML5.
* However, it's used for current, and older browsers that require a specified doctype
                 *  So, without worry, feel free to use a new HTML5 doctype


2. The Figure Element

Consider the following code for an image with its caption:

  <h3>Before using HTML5:</h3>  <img src = “nature.jpg alt = "About image height = “30%" width = 40%“ />  <p>Fig.1: Nature Image. </p>

 * There, unfortunately, isn't any easy or semantic way to associate the caption


BUT in HTML5 Features

Introduced the <figure> element, combined with the <figcaption>element:
 
  <h3>Using HTML5:</h3>  <figure>             <img src = “nature.jpg" alt = "About image" height =30%” width = 40% />             <figcaption>                         <p>Fig.1: This is an image of something interesting. </p>             </figcaption>  </figure>

Read my article about Html Tags and Elements 

Output 

Image-using-HTML5



3. No More Types for Scripts and Links

Some programmer possibly still add the type attribute to link and script tags as:

  <link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js“ ></script>

    
BUT in HTML5

This is no longer necessary we can remove the  type  attribute as:

  
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>


4. Quote or Not to Quote

...That is the Good question.

 Remember, in XHTML or some other version of HTML the Quote (single or double) was necessary.

  <p class = “myClass id = “someId> This is paragraph </p>  OR  <p class = ‘myClass id = ‘someId> This is paragraph </p>

BUT in HTML5
This is no longer necessary we can write it without Quote:

   <p class = myClass  id = someId> This is paragraph </p>


5. Make Content Editable

A new attribute that can be applied to elements, called content editable 
As the name implies, this allows the user to edit any of the text contained within the element, 
including its children.
For Example:


  <h2> To-Do List </h2>
<ul >
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory </li>
<li> Watch video of self </li>
</ul>



Output 


List-Output


6. Audio Support

No longer do we have to rely on third-party plugins in order to render audio. 
HTML5 now offers the <audio> element.

Well, at least, ultimately, we won't have to worry about these plugins.

For the time being, only the most recent of browsers offer support for HTML5 audio.

Example:

  <audio autoplay = "autoplay" controls = "controls">      <source src = "file.mp3" />
  </audio>

audio-image-in-HTML5


7. Video Support



  • Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! 
  • Before HTML5, there was no standard for showing videos on a web page.
  • Before HTML5, videos could only be played with a plug-in (like flash).
  • The HTML5 <video> element specifies a standard way to embed a video in a web page.


Example:

  <video autoplay = "autoplay" controls = "controls" >
              <source src=“anyVideo.mp4"  />
              <p> Your browser is old.
                <a href=“anyVideo.mp4">Download this video instead.</a>          </p>
  </video>




HTML5 Input Types


HTML5-Input-Types




HTML5 Input Attributes


HTML5-Input-Attributes


COMMENTS

Name

Blogging,14,How to,30,Make Money,11,SEO,25,Web Designing,20,
ltr
item
Weblog Tricks - Blogging Tricks for Beginners: 7 Best Difference Between HTML and HTML 5
7 Best Difference Between HTML and HTML 5
Difference Between HTML Vs HTML 5 interview Question and answer there tags and elements html tags html space comments
https://4.bp.blogspot.com/-gur9HX8oSuw/WEz9S5HMe0I/AAAAAAAAAJQ/gtwoHCODr94Bvw19wuJcVJ5femDW7yd2gCLcB/s640/Screenshot_6.jpg
https://4.bp.blogspot.com/-gur9HX8oSuw/WEz9S5HMe0I/AAAAAAAAAJQ/gtwoHCODr94Bvw19wuJcVJ5femDW7yd2gCLcB/s72-c/Screenshot_6.jpg
Weblog Tricks - Blogging Tricks for Beginners
https://www.weblogtricks.com/2016/12/difference-between-html-and-hmtl5.html
https://www.weblogtricks.com/
https://www.weblogtricks.com/
https://www.weblogtricks.com/2016/12/difference-between-html-and-hmtl5.html
true
3158682668530211189
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy