DOCSLIB.ORG

Difference Between HTML/HTML5 and XHTML

Difference Between HTML/HTML5 and XHTML

Introduction to HTML5 History of HTML 1991 HTML first published 1995 HTML 2.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. 1997 HTML 3.2 1999 HTML 4.01 XHTML 2.0 By combining the strengths of HTML and XML, XHTML was developed. 2000 XHTML 1.0 XHTML is HTML redesigned as XML. 2002 HTML5 is much more tolerant and can - XHTML 2.0 2009 handle markup from all the prior versions. Though HTML5 was published officially in 2012, it 2012 HTML5 has been in development since 2004. What is HTML5? HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web browsers. It incorporates all features from earlier versions of HTML, including the stricter XHTML. It adds a diverse set of new tools for the web developer to use. It is still a work in progress. No browsers have full HTML5 support. It will be many years – perhaps not until 2018 or later - before being fully defined and supported. Goals of HTML5 Support all existing web pages. With HTML5, there is no requirement to go back and revise older websites. Reduce the need for external plugins and scripts to show website content. Improve the semantic definition (i.e. meaning and purpose) of page elements. Make the rendering of web content universal and independent of the device being used. Handle web documents errors in a better and more consistent fashion. New Elements in HTML5 <article> <figcaption> <progress> <aside> <footer> <section> <audio> <header> <source> <canvas> <hgroup> <svg> <datalist> <mark> <time> <figure> <nav> <video> These are just some of the new elements introduced in HTML5. We will be exploring each of these during this course. Other New Features in HTML5 Built-in audio and video support (without plugins) Enhanced form controls and attributes The Canvas (a way to draw directly on a web page) Drag and Drop functionality Support for CSS3 (the newer and more powerful version of CSS) More advanced features for web developers, such as data storage and offline applications. First Look at HTML5 Remember the DOCTYPE declaration from XHTML? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> In HTML5, there is just one possible DOCTYPE declaration and it is simpler: <!DOCTYPE html> Just 15 characters! The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration. The <html> Element This is what the <html> element looked like in XHTML: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Again, HTML5 simplifies this line: <html lang="en"> The lang attribute in the <html> element declares which language the page content is in. Though not strictly required, it should always be specified, as it can assist search engines and screen readers. Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh", Arabic = "ar". The <head> Section Here is a typical XHTML <head> section: <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>My First XHTML Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> And the HTML5 version: <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head> Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of the trailing slashes for these two lines. Basic HTML5 Web Page Putting the prior sections together, and now adding the <body> section and closing tags, we have our first complete web page in HTML5: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>HTML5 is fun!</p> </body> </html> Let's open this page in a web browser to see how it looks… Viewing the HTML5 Web Page Even though we used HTML5, the page looks exactly the same in a web browser as it would in XHTML. Without looking at the source code, web visitors will not know which version of HTML the page was created with. HTML 5 Latest revision of HTML Backward compatible New key features: video and audio tags content-specific tags tags for form elements canvas element storage of user data © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 12 reserved. Video and Audio Tags Allow simple code for adding video and audio on Web pages Video and audio are played back by the Web browser's built-in player, not plug-ins © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 13 reserved. Content-Specific Tags Examples: <footer>, <header>, <nav>, <article>, <section>, <figure>, <summary>, <aside> Allow mark up content by semantics Provide a standardized system to classify the information on Web pages © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 14 reserved. Form Elements Examples: date picker, color picker, numeric stepper, new input types (email, url, and search) To enhance user experience of filling out forms © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 15 reserved. Canvas Allows drawing graphics and placing images dynamically inside it using JavaScript Visual content inside it can be scripted to change over time (hence animation) and in response to the user interaction (mouse clicks and key presses) Used for animation and game © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 16 development reserved. Storage of User Data Approx. 5 MB depending on browsers Larger data limit than cookies (4 KB limit) Storage and retrieval of data on the user's device; i.e., no need for databases or user accounts set up on the server © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 17 reserved. XHTML vs. HTML 5 DOCTYPE declaration Character encoding Cases for tag and attribute names Values of attributes Boolean attribute End tag © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 18 reserved. DOCTYPE Declaration XHTML HTML 5 Three doctypes: Strict, Only one simplified doctype Transitional, and Frameset declared like this: For example: <!DOCTYPE HTML> <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtm l1/DTD/xhtml1- transitional.dtd "> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 19 reserved. Character Encoding XHTML HTML 5 <meta http- Simplified as follows: equiv="Content- <meta charset"UTF- Type" 8"/> content="text/html; charset=utf-8" /> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 20 reserved. Cases for Tag and Attribute Names XHTML HTML 5 All lowercase No restriction © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 21 reserved. Value of an Attribute XHTML HTML 5 Enclosed in quotation marks Does not have to be in quotation marks © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 22 reserved. Boolean Attribute XHTML HTML 5 The value "true" or "false" has to No need to write out the value— be written out and enclosed in just the quotation mark; for example: presence of the attribute means it <div hidden="true" /> is true; for example: <div hidden /> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 23 reserved. End Tag XHTML HTML 5 Required for each start tag Not required; thus, self-closing is not required for those tags without content, such as br and img © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 24 reserved. HTML 5 Basic Structure <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>This is a title of the page</title> </head> <body> <p>This is the content of the Web page </body> </html> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 25 reserved. An HTML 5 Document Arbitrary: cases for tags, pairing OK to still follow the rules of tags, uses of quotation marks. XHTML Still a valid HTML 5 document . <!doctype html> <!doctype html> <html lang="en"> <HtML lang=en> <head> <hEAd> <meta charset="utf-8" /> <meta charset=utf-8> <title>This is a title of the page</title> <TITLe>This is a title of the </head> page</tiTLE> <body> <boDY> <p>This is the content of the <P>This is the content of the Web page.<br> Web page.<br> <img src="images/demo.png" <IMg src=images/demo.png alt="demo"> alt=demo> </p> </body> </html> © 2016 Pearson Education, Easy to read Hard to read Inc., Hoboken, NJ. All rights 26 reserved. Markup Validator http://validator.w3.org/ to validate Web documents © 2016 Pearson Education, Inc., Hoboken, NJ. All rights 27 reserved. .

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    27 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us