XHTML or HTML | Lesson 30 HTML Tutorial
XHTML OR HTML IMAGE

XHTML or HTML | Lesson 30 HTML Tutorial

In this lesson you will learn what is the difference between HTML and XHTML and which is better? and when to use them? and what are the benefit of using each of them.

Fore Visual Explain You Could Watch This Video:

XHTML or HTML Video

XHTML

  • Stands for EXtensible HyperText Markup Language
  • Also almost identical to HTML
  • It is stricter than HTML
  • Also XHTML is HTML defined as an XML application
  • And is supported by all major browsers

Reason to Use XHTML

Many pages on the internet contain “bad” HTML so that content could not be valid for all browsers, because some browsers do not support that bad HTML.

The following example is not valid xhml code but in HTML it could work perfect but not recommended to forget closing tags.

Example:


<html>
<head>
  <title>Bad HTML code</title>

<body>
  <h1>Bad HTML Header
  <p>This is a bad paragraph
</body> 

The Most Important Differences from HTML:

Document Structure

  • XHTML DOCTYPE is mandatory
  • The xmlns attribute in <html> is mandatory
  • <html>, <head>, <title>, and <body> are mandatory

XHTML Elements

  • Firstly XHTML elements must be properly nested
  • Also XHTML elements must always be closed
  • And XHTML elements must be in lowercase
  • Finally XHTML documents must have one root element

XHTML Attributes

  • The attribute names must be in lower case
  • Also attribute values must be quoted
  • In the other hand, attribute minimization is forbidden

Elements in XHML Must BE Nested

in HTML, we could have some tags improperly nested within each other.

Example:

<b><i>This text is bold and italic</b></i> 

In XHTML tags must be properly nested, or it will show errors.

Example:

<b><i>This text is bold and italic</i></b> 

Elements in XHTML Must Be Closed

For Example: This example shows errors.

<p>This is a paragraph <br>
<p>This is another paragraph 

But this example is true.

Example:

 <p>This is a paragraph</p> <br/>
 <p>This is another paragraph</p>  

Note: You should even close the empty XHTML element.

Elements & Attributes in XHTML Must Be In Lower Case

Example:

<BODY>
<P width="100%">This is a paragraph</P>
</BODY> 

Note: Even the attributes must be in lower case.

XHTML Attribute Values Must Be Quoted

Wrong Example:

<table width=100%> 

Correct Example:

<table width="100%"> 

Minimization in XHTML Is Forbidden

Wrong Example:

<input type="checkbox" name="vehicle" value="car" checked />

Correct Example:

<input type="checkbox" name="vehicle" value="car" checked="checked" /> 

Convert from HTML to XHTML

First add an XHTML <!DOCTYPE> to the first line of every page

Then add an xmlns attribute to the html element of every page

After that change all element names to lowercase

Next, close all empty elements

Then change all attribute names to lowercase

Finally Quote all attribute values


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References: w3schools.com

Leave a Reply