Categories: Html5

XHTML vs HTML5 : Complete beginners guide

HTML is a markup language used to develop web pages and web apps.

HTML5 is the latest release version of HTML released in the year 2014. HTML5 can be embedded with CSS and JavaScript and it consists of element tags used to define a structure of a web page. The different element tags are used to represent images, headings, tables, body, title, etc.

HTML elements are enclosed in tags which cannot be displayed on the web page when rendered but its content is displayed on the browser.

You can develop HTML pages using text editors like notepad in windows and text edit in Mac OS.

There are other third-party editors that you can use as well like sublime text, brackets, etc. File extension in HTML is .htm and .html

The basic skeleton structure of an HTML page is as follows:


<!DOCTYPE html> <html> <head> <title> Title</title> </head> <body> <h1> Heading</h1> <p> Paragraph.</p> </body> </html>

XHTML being an extensible text markup language was developed by w3c and released in the year 2000. Its file extension is .xHTML and .xht

The latest release version is xHTML5 which is XML with HTML5 configurations. The main reason behind the development of XHTML was to extend HTML language so that it could be used for all data formats by the use of XML.

In addition, XHTML has error handling features for handling technical errors thrown by web pages in HTML

XHTML pages can support existing browsers and new browsers as well and it can be edited, viewed, and validated with XML tools.

Its compatibility with all browsers makes it easy to embed scripts and applets based on XML and HTML DOM.

Its most important features are convertibility, editability, accuracy, and maintainability.

It always provides a consistent formatting and well-defined structure for web pages.

XHTML syntax is almost similar to the HTML, even the structure is similar but XHTML is case sensitive and with additional attributes which can be changed but not shortened, in XHTML proper structures should be followed and proper nesting of elements is vital.

The following table draws the comparisons between XHTML and HTML5

XHTML vs HTML5  table

xHTML HTML5
It uses an extensive hypertext markup language   It uses a hypertext markup language
 xHTML is always case sensitive HTML is case insensitive
  Its internet media type is application/xHTML + XML   Its internet media type is text/html
xHTML is a lot more expressive as compared to HTML  HTML is less expressive
  xHTML is an application of XML HTML is an application of SGML
XHTML has its markup language as the format type  HTML has a document file format
 It parses with a standard XML parser Require lenient parser specific for HTML
It is concerned with well-formed constraints HTML is less concerned with well-formed constraints

Their key differences (XHTML vs HTML5)

  • In HTML, empty tags can be left open without any concern for example; <p>, <br>, <hr> etc, but in xHTML, if a tag has been opened, it should self-close or closed with a closing tag. For example <p> paragraph </p>, <br/>.
  • In HTML, all the text to be displayed in the browser can be placed under the body element tags <body> </body>, while in XHTML, the can be put in blocks.
  • In HTML, while you are defining attributes there is no need to mention quotes for example <option selected> while in xHTML it is mandatory to mention quotes while defining attributes for example, <option selected= “selected”>
  • Attributes in HTML are not important while in xHTML, attributes are important for example, <input type= “radiobutton” selected> for HTML and for xHTML is <input type= “radiobutton” selected= “selected”>
  • In HTML there is no strict rule on element structure for example, <p> <b> hello world! </p> </b> while in xHTML, you should follow strict rules on the structures for example, <p> <b> Paragraph </b> </p>
  • In HTML, tags and attributes can use lower cases of upper cases while in xHTML, tags and attributes are strictly lower cases
  • In HTML, one root element is not mandatory while in xHTML, there should be at least one root element.
  • In HTML, declaration of XML is not necessary while in xHTML, we follow the use of XML

Conclusion

I can confidently say that HTML5 and xHTML5 are close relatives, they are both used as markup languages for developing web pages and web applications. Processing of JavaScript in XHTML is slightly different as compared to the processing of JavaScript in HTML.

There are changes that you need to apply to functions to make XHTML be case sensitive.

HTML and XHTML are widely used by established web developers and IT institutions to develop web applications and web pages and it supports server-side scripting with other assisting languages embedded on.

In conclusion, it would be easy to learn XHTML if you already perfect in HTML because they are closely related to each other, a few concepts you need to figure out and you are good to fly. They are both easy to learn and understand and form a basis for all other web development frameworks.

Deven Rathore @http://twitter.com/devenrathore2

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Share
Published by

Recent Posts

5 best Eclipse IDE themes

Eclipse is an OpenSource IDE and can be used to develop software in any language. Comparatively, It is one of…

3 days ago

15 Best NoSQL Databases

NoSQL is a non-relational database used to retrieve and store info by other means other than relations which is synonymous…

6 days ago

7 best Java machine learning library

Machine learning is a mixture of mathematical optimization and statistics, each tutorial disciplines in their very own right. Imagine if…

2 weeks ago

13 Best Bootstrap Alternatives

Bootstrap is a popular front-end development framework now days used by developers to design generic design for rapid prototyping. Along…

2 weeks ago

10 Best open-source JavaScript template engine

Imagine if you could make JavaScript development faster, and see an instant boost in your workflow. or even better: What…

3 weeks ago

13 Best Java libraries

Java is an object-oriented programming language that is popular and used by millions of programmers around the world. Let’s highlight…

3 weeks ago