Loading...
 
[Show/Hide Right Column]

Krystel Gosselin

Krystel Gosselin
Read Blog
View Profile

HTML, XHTML and HTML 5.0

Published by gosk02@uqo.ca on 2012-08-06

While doing research on the core differences of HTML, I felt as if I was submerged in an ocean of information. I will do my best to keep things simple, but I will also give the reference links for those who would like to do further reading on the subject.

 

HTML 4.01

 

The HTML I have mostly been using in my examples thus far is known as HTML 4.01. It is the revised version that offered corrections of errors from the previous version. In a nutshell, it offered:

  • Enhanced forms with improved accessibility for people with disabilities;
  • Extended HTML for style sheets, scripting, frames and embedding objects;
  • Improved support for right to left and mixed direction text;
  • Tables with richer elements, including captions and column groups.

 

For more information, consult the W3C (World Wide Web Consortium) document Introduction to HTML 4.

 

While HTML is still being perfected, there is still room for improvement. Hence the reason for creating XHTML.

 

XHTML

 

XHTML stands for “eXtensible HyperText Markup Language”. It is essentially HTML written as XML (eXtensible Markup Language). While almost identical to HTML 4.01, XHTML is a stricter and cleaner version.

 

XML serves as a tool to identify error-free and well-written HTML tags. XHTML was created by combining HTML with XML and it is used to allow browsers, either computer-based or phone-web, to interpret a bad markup language, since smaller devices often lack the resources or power to perform this task.

 

Some of the main differences are:

  • While HTML 4.01 may allow a faulty base structure to work, XHTML requires the ,, and <body> tags to work;</li> <li> XHTML elements must be properly nested;</li> <li> XHTML tags must <strong>always</strong> be closed and in lower case.</li> </ul><p>  </p> <p> For more information about XHTML and its differences compared to HTML 4.01, visit the w3schools’ <strong><a href="http://www.w3schools.com/html/html_xhtml.asp" target="_blank">XHTML Introduction</a></strong> webpage.</p> <p>  </p> <p> <strong>HTML 5.0</strong></p> <p>  </p> <p> As I’ve stated earlier, HTML 4.01 is a revision of previous versions of HTML and was released in 1999. Since then, the web has gone through many changes, and an updated HTML was needed to accommodate this. However, HTML 5.0 is still a work in progress, and the major web browsers are now just starting to support it. As a new version comes along, more and more features are added to HTML 5.0.</p> <p>  </p> <p> This new HTML supports a <canvas> tag for drawing, <audio> and <video> tags for media playbacks, and content-specific tags like <article>, <footer>, <header>, <nav> and <section>. It also supports form controls like calendars, date, time, email, URL and search bars.</p> <p>  </p> <p> One of the goals of HTML 5.0 is to keep the development process visible to the public. This means that with a little amount of searching, anyone will be able to see what new features are being implemented and what’s being researched.</p> <p>  </p> <p> For more information on HTML 5.0, visit <strong><a href="http://www.w3schools.com/html5/default.asp" target="_blank">the HTML 5 Tutorial</a></strong> section on the w3schools site.</p> <p>  </p> <p> <strong>Final Word</strong></p> <p>  </p> <p> This brings a close to my blogs on HTML and translating for the web.</p> <p>  </p> <p> I would like to thank all of you for taking the time to read my blog, but more importantly, to have allowed me to share my research and what I have discovered while writing these blogs.</p> <p>  </p> <p> It was a fun, but trying experience. Often, I felt like my knowledge would not be enough, and I feared I could not rival the passion and expertise of my fellow bloggers! But through determination, friendly advice and encouragement, I made it.</p> <p>  </p> <p> I would like to take a moment to thank the LTRC for this amazing experience. I have learned so many things and improved my knowledge and skills in a way I could not have otherwise. Through trial and error I have come a long way, and I still have a long way to go!</p> <p>  </p> <p> Thank you all. Don’t give up and keep striving for your goals!</p> <p>  </p> </div> <div class="editdate"> </div> <div class="clearfix postfooter"> <div class="author_actions"> </div> <div class="actions"> <a href='tiki-print_blog_post.php?postId=241'><img src="pics/icons/printer.png" alt="Print" width="16" height="16" style="border: none" title="Print" class="icon" /></a> <script language="javascript" type="text/javascript"> //Create your sharelet with desired properties and set button element to false var object241 = SHARETHIS.addEntry({ title:'Share This' }, {button:false}); //Output your customized button document.write('<span class="share" id="share241"><a title="ShareThis via AIM, social bookmarking and networking sites, etc." href="javascript:void(0);"><img src="http://w.sharethis.com/images/share-icon-16x16.png?CXNID=1000014.0NXC" /></a></span>'); //Tie customized button to ShareThis button functionality. var element241 = document.getElementById("share241"); object241.attachButton(element241); <p> </script> </p> </div> <div class="status"> <a class="link" href="blogpost241">Permalink</a> </div> </div> <div class="postfooter-nav clearfix"> <div class="postfooter-nav-prev"> <a title="Previous post" href="/blogpost229">← HTML Part 4: More Useful Tags</a> </div> </div> </div> <!-- postbody --> </div> </div> </div> </div> </div> <hr class="hidden" /> </div> <div class="clearfix" id="col3" style="display: table-cell;"> <h2 class="hidden">Sidebar</h2> <div class="content"> <div class="box box-last_blog_posts"> <h3 class="box-title clearfix"> <span class="moduletitle">Last blog posts</span> <span class="moduleflip" id="moduleflip-last_blog_postsr10"> <a title="Toggle module contents" class="flipmodtitle" href="javascript:icntoggle('mod-last_blog_postsr10','module.png');"> <img src="pics/icons/module.png" alt="[toggle]" width="16" height="16" id="icnmod-last_blog_postsr10" class="flipmodimage" style="border: none" title="[toggle]" /> </a> </span> <!--[if IE]><br class="clear" style="height: 1px !important" /><![endif]--></h3> <div id="mod-last_blog_postsr10" style="display: block" class="clearfix box-data"> <ol> <li> <a class="linkmodule" href="blogpost294" title="2015-01-24 18:05, by melanie.rivet@crtl.ca"> Premier Colloque étudiant du Département d'études langagières: Langagiers, langagières, unissons nos voies! </a> </li> <li> <a class="linkmodule" href="blogpost293" title="2014-09-05 13:57, by martineyeo2005@bell.net"> Le Robert correcteur est arrivé ! </a> </li> <li> <a class="linkmodule" href="blogpost292" title="2014-07-31 12:14, by info@crtl.ca"> Évaluer le langage des travailleurs, le défi quotidien de la TÉLUQ </a> </li> <li> <a class="linkmodule" href="blogpost291" title="2014-02-28 16:53, by kitkatia_7@hotmail.com"> De la complexité d’une langue à sa richesse culturelle </a> </li> <li> <a class="linkmodule" href="blogpost290" title="2014-02-22 17:48, by martineyeo2005@bell.net"> Traduction de la saga Harry Potter 2 </a> </li> <li> <a class="linkmodule" href="blogpost289" title="2014-02-22 17:32, by martineyeo2005@bell.net"> Entretien avec le traducteur français des livres de Harry Potter </a> </li> <li> <a class="linkmodule" href="blogpost288" title="2014-02-14 04:15, by martineyeo2005@bell.net"> Démence : l’apparition des symptômes retardée chez les personnes bilingues </a> </li> <li> <a class="linkmodule" href="blogpost287" title="2014-01-29 14:53, by charles_danten@outlook.com"> Rester debout </a> </li> <li> <a class="linkmodule" href="blogpost286" title="2014-01-29 14:04, by martineyeo2005@bell.net"> The Bilingual Brain - Understanding the bilingual brain with the help of neuroimaging techniques </a> </li> <li> <a class="linkmodule" href="blogpost285" title="2014-01-16 19:54, by kitkatia_7@hotmail.com"> Les joyaux de la langue – partie III </a> </li> </ol> </div> <div class="box-footer"> </div> </div> </div> </div> <br style="clear:both" /> <!--[if IE 7]><br style="clear:both; height: 0" /><![endif]--> </div> </div> <div class="footer_push"></div> </div> <div id="footer"> <div class="footerbgtrap"> <div class="content"> <div class="container"> <div style="margin-left:350px;"> <img src="styles/linguistech/linguistech_logo_footer_en.png" /> </div> <div id="custom_site_footer"><div style="float:left;"> © 2011 <a href="http://www.crtl.ca" target="_blank">CRTL – LTRC</a>. All rights reserved. Powered by <a href="http://www.tiki.org" target="_blank">Tiki Wiki CMS Groupware</a>.</div> <div style="float:right; font-size:16px;"><b><a href="Help+-+home">Help</a>  |  <a href="About+us+-+en">About Us</a>  |  <a href="Contact+Us">Contact Us</a>  |  <a href="Terms of Use">Terms of Use</a>  |   <a href="Site+Map">Site map</a></b></div> </div><div id="power"> </div> <div id="credits_svnrev"> <div id="credits"> Theme: Linguistech </div> </div> </div> </div> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-23693047-2"); pageTracker._trackPageview(); </script> <!-- Put JS at the end --> <!-- jsfile external --> <!-- jsfile dynamic --> <!-- jsfile 0 --> <script type="text/javascript" src="temp/public/minified_cd1713ce7582e369f2a11df119d2fd3f.js"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- // js 0 var tiki_cookie_jar=new Array(); var jsedate = new Date(); jsedate.setTime(1594971437000); setCookieBrowser('javascript_enabled', 'y', null, jsedate); function inArray(item, array) { for (var i in array) { if (array[i] === item) { return i; } } return false; } var allTimeZoneCodes = ["ACST","ACT","ADDT","ADT","AFT","AHDT","AHST","AKDT","AKST","AKTST","AKTT","ALMST","ALMT","AMST","AMT","ANAST","ANAT","ANT","APT","AQTST","AQTT","ARST","ART","ASHST","ASHT","AST","AWT","AZOMT","AZOST","AZOT","AZST","AZT","BAKST","BAKT","BDST","BDT","BEAT","BEAUT","BMT","BNT","BORTST","BORT","BOST","BOT","BRST","BRT","BST","BTT","BURT","CANT","CAPT","CAST","CAT","CAWT","CDDT","CDT","CEMT","CEST","CET","CGST","CGT","CHADT","CHAST","CHAT","CHDT","CHOST","CHOT","CIT","CJT","CKHST","CKT","CLST","CLT","COST","COT","CPT","CST","CVST","CVT","CWST","CWT","CHST","DACT","DAVT","DDUT","DUSST","DUST","EASST","EAST","EAT","ECT","EDDT","EDT","EEST","EET","EGST","EGT","EHDT","EIT","EPT","EST","EWT","FJST","FJT","FKST","FKT","FNST","FNT","FORT","FRUST","FRUT","GALT","GAMT","GBGT","GEST","GET","GFT","GHST","GMT","GST","GYT","HADT","HAST","HDT","HKST","HKT","HOVST","HOVT","HPT","HST","HWT","ICT","IDDT","IDT","IHST","IOT","IRDT","IRKST","IRKT","IRST","ISST","IST","JAVT","JDT","JST","KART","KAST","KDT","KGST","KGT","KIZST","KIZT","KMT","KOST","KRAST","KRAT","KST","KUYST","KUYT","KWAT","LHST","LINT","LKT","LONT","LRT","LST","MADMT","MADST","MADT","MAGST","MAGT","MALST","MALT","MART","MAWT","MDDT","MDST","MDT","MEST","MET","MHT","MMT","MOST","MOT","MPT","MSD","MSK","MST","MUT","MVT","MWT","MYT","NCST","NCT","NDDT","NDT","NEGT","NEST","NET","NFT","NOVST","NOVT","NPT","NRT","NST","NUT","NWT","NZDT","NZMT","NZST","OMSST","OMST","ORAST","ORAT","PDDT","PDT","PEST","PETST","PETT","PET","PHOT","PHST","PHT","PKST","PKT","PMDT","PMST","PMT","PPT","PST","PWT","PYST","PYT","QYZST","QYZT","RET","RMT","ROTT","SAKST","SAKT","SAMST","SAMT","SAST","SBT","SCT","SGT","SHEST","SHET","SLST","SMT","SRT","SST","STAT","SVEST","SVET","SYOT","TAHT","TASST","TAST","TBIST","TBIT","TFT","TJT","TLT","TMT","TOST","TOT","TRST","TRT","TSAT","ULAST","ULAT","URAST","URAT","URUT","UYHST","UYST","UYT","UZST","UZT","VET","VLASST","VLAST","VLAT","VOLST","VOLT","VOST","VUST","VUT","WARST","WART","WAST","WAT","WEMT","WEST","WET","WGST","WGT","WIT","WST","YAKST","YAKT","YDDT","YDT","YEKST","YEKT","YERST","YERT","YPT","YST","YWT","A","B","C","D","E","F","G","H","I","K","L","M","N","O","P","Q","R","S","T","UTC","U","V","W","X","Y","ZZZ","Z"]; var local_tz = ""; var now = new Date(); var now_string = now.toString(); var m = now_string.match(/[ \(]([A-Z]{3,6})[ \)]?[ \d]*$/); // try three or more char tz first at the end or just before the year if (!m) { m = now_string.match(/[ \(]([A-Z]{1,6})[ \)]?[ \d]*$/); // might be a "military" one if not } if (m) { m = m[1]; } else { // IE (sometimes) gives UTC +offset instead of the abbreviation // sadly this workaround will fail for non-whole hour offsets var hours = - now.getTimezoneOffset() / 60; m = "GMT" + (hours > 0 ? "+" : "") + hours; } if (inArray(m, allTimeZoneCodes)) { local_tz = m; } else { local_tz = "UTC"; } setCookie("local_tz", local_tz); /*{JQ()}$('#carousel').tiki("carousel"); {JQ}*/ function popupCapLock(e){ kc = e.keyCode?e.keyCode:e.which; sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false); if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)) document.getElementById('divPopupCapson').style.visibility = 'visible'; else document.getElementById('divPopupCapson').style.visibility = 'hidden'; } function newPopupUserSelected() { var passwdLblRef = document.getElementById('passwdPopupLbl'); var passwdRef = document.getElementById('sl-login-pass'); var loginBtnRef = document.getElementById('loginButton'); passwdLblRef.innerHTML = '<input onchange="existingPopupUserSelected()" type="radio" name="loginOrRegister" value="login"/>I am an existing user.'; passwdRef.style.display = "none"; loginBtnRef.value = "Register"; } function existingPopupUserSelected() { var passwdLblRef = document.getElementById('passwdPopupLbl'); var passwdRef = document.getElementById('sl-login-pass'); var loginBtnRef = document.getElementById('loginButton'); passwdLblRef.innerHTML = '<input onchange="existingPopupUserSelected()" type="radio" name="loginOrRegister" value="login" checked/>Password:'; passwdRef.style.display = "inline"; loginBtnRef.value = "Log in"; } // js 100 // JS Object to hold prefs for jq var jqueryTiki = new Object(); jqueryTiki.ui = true; jqueryTiki.ui_theme = "smoothness"; jqueryTiki.tooltips = true; jqueryTiki.autocomplete = true; jqueryTiki.superfish = true; jqueryTiki.replection = false; jqueryTiki.tablesorter = false; jqueryTiki.colorbox = true; jqueryTiki.cboxCurrent = "{current} / {total}"; jqueryTiki.sheet = false; jqueryTiki.carousel = true; jqueryTiki.jqs5 = false; jqueryTiki.validate = true; jqueryTiki.effect = ""; // Default effect jqueryTiki.effect_direction = "vertical"; // "horizontal" | "vertical" etc jqueryTiki.effect_speed = 400; // "slow" | "normal" | "fast" | milliseconds (int) ] jqueryTiki.effect_tabs = "slide"; // Different effect for tabs jqueryTiki.effect_tabs_direction = "vertical"; jqueryTiki.effect_tabs_speed = "fast"; jqueryTiki.autosave = true; jqueryTiki.sefurl = true; //--><!]]> </script> </body> </html>