Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

HTML vs XHTML: Understand the Main Principles Over Each One

In this article I shall brief you about XHTML. We will talk about history, syntax, differences between XHTML and HTML and a lot of tips and tricks.

XHTML stands for Extensible Hypertext Markup language which is latest version of HTML. XHTML is markup language written in XML; therefore it is defined as XML application. XML allows programmers to write their own markup commands or modify current ones, increasing flexibility of a language such as XHTML. All major browsers support it.

History

In late 1994 Berners-Lee started the World Wide Web Consortium (W3C), to develop and distribute standards for web technologies starting with HTML. The latest version of HTML, 4.01 was approved by W3C in late 1999. The XHTML 1.0 standard is a redefinition of HTML 4.01 using XML. The XHTML 1.1 standard was recommended by W3C in May 2001. XHTML5 is undergoing development as of September 2009, as part of the HTML5 specification.

Figure 1: Diagram

Why XHTML is Required?

It is combination of HTML and XML. So HTML code is work good but element tag is not follow any HTML rules.

XHTML has strict syntactic rules that impose consistent structure on all XHTML documents. Using XHTML, web pages can be easily parsed and processed by present and future web browsers.

Another significant reason for using XHTML is that when you create XHTML document, its syntactic correctness can be checked either by XML browser or by validation tool.

It is also possible to convert HTML documents to XHTML documents using software tools. It makes your website easier to maintain, edit and format in the long run.


XHTML defines standard for your web pages, if you follows that then your webpage will be counted quality web pages and W3C certifies those pages with their quality stamp.

XHTML Syntax

is Mandatory. XHTML document must have XHTML DOCTYPE declaration and must be declared at the top of the document. There are three document type definitions as mentioned below:

XHTML 1.0 Transitional

If you want to write document in proper rules then you can make use of transitional doctype. You can use many XHTML attributes as well as few cascading style sheet properties by using this DTD.

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

XHTML 1.0 Strict

When you want to write document in clean markup language then use strict doctype. If you want to use strictly cascading style sheet and avoiding most of the XHTML attributes, then it is good to use this DTD.

<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Frameset

If you want to write document in HTML frames then make use of frameset doctype.

<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Difference between XHTML and HTML

  • XHTML is a stricter and clearer version of HTML.
  • XHTML elements must be properly nested.
  • XHTML attribute values must be quoted.
  • XHTML elements must be closed.
  • XHTML document must have one root element.
  • XHTML elements must be in lower case.
  • XHTML attribute names must be in lower case.
  • XHTML DOCTYPE is mandatory.

XHTML elements must be closed

wrong way:

<p>This is paragraph line.

correct way:

<p>This is paragraph line. <p>

XHTML attribute must be written in lower case

wrong way:

<link TYPE=”TEXT/CSS” REL=”STYLESHEET” href=”myfile.css”/>

correct way:

<link type=”text/css” rel=”stylesheet” href=”myfile.css”/>

Attribute value must be in double quotation

wrong way:

<table width=90%>

correct way:

<table width=”90%”>

Attribute Minimization

wrong way:

<input checked>
<input readonly>
<option selected>

correct way:

<input checked=”checked”>
<input readonly=”readonly”>
<option selected=”selected”>

The Id attribute

wrong way:

<img src=”C:\Winter.jpeg” name=”season” />

correct way:

<img src=”C:\Winter.jpeg” id=”season” />

Nested Tags

wrong way:

<b><i>This is XHTML page</b></i> 

correct way:

<b><i>This is XHTML page</i></b>

Element Prohibitions

  • <a> : tag must contain only <a> elements.
  • <pre> : tag should not contain <img> , <object> , <big> , <small> , <sub> elements.
  • <button> tag must not contain <input>, <select>, <label>, <button>, <form>, <fieldset> elements.
  • <label> tag should not contain <label> elements.
  • <form> tag should not contain <form> elements.

How to write XHTML

<! DOCTYPE> defines every XHTML tag attributes must be written inside double quotation. Use transitional DOCTYPE to write document in proper rules.

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

Every element must be properly nested. Every element must be closed. Some <hr>, <img>, <br> tags must be closed at the end of the tag. Such as,

<img src=”C:\Winter.jpg” width=”100%” height=”100%” />
<hr align=”center” width=”90%”/ >
<br />

How to convert HTML to XHTML

  • Add XHTML to the first line of the every page.
  • Add xmlns attribute every page.
  • Element name must be in lower case.
  • Close all empty elements.
  • Attribute name must be in lower case.
  • Tag attribute must be in double quotes.

The following simple example shows use of XHTML document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My First Document</title>
</head>
<body>
<p>Hello, <i>World</i></p>
<h3>Welcome to XHTML</h3>
<p>This page written by: 
<cite>(Manisha)</cite>
<br />
© 2000 and beyond</p>
</body>
</html>

Figure 2: Successful result execution

XHTML Attributes

XHTML attributes are divided into three types of attributes such as Core attributes, Language attributes and Microsoft proprietary attributes.

Core Attributes

The following table defines Core Attribute Collection

Attribute Description class It assigns one or more class names to an element. id It assigns unique id for the element. style It determines inline style definition. title It defines information about the element on which it is set.

Language Attributes

The following table defines Language Attribute Collection

Attribute Description
dir It defines direction of the text.
lang It specifies the base language of an elements attribute values and text content.

Language Attributes

The following table defines Language Attribute Collection

Attribute Description
accesskey It specifies keyboard navigation accelerator for the element. It provides shortcut to access the element.
language It specifies the scripting language associated with script bound. It might include javascript, javascript 1.1, jscript , vbs , and vb script.
tabindex It is used to identify the objects position in the tabbing order for keyboard navigation using the tab key.
contenteditable It allows to edit content in internet explorer 5.5 and above version. Values are true which allows editing, false will prevent content from being edited by users and inherit applies value of the affected element’s parent element.
disabled The elements with disabled attribute will not respond to the user input. Values may be true or false.
hidefocus It hides focus on the elements content. It must be applied to the element using the tabindex attribute.
unselectable It is used to prevent content displayed in internet explorer 5.5 from being selected. The values may be on and off.

XHTML Events

An event is an action detected by the program that may be handled the program. Event typically include user who presses key on keyboard, clicks on text, images or given links or hardware device such as timer. The XHTML contains following events:

and level events

  • onload: This event occurs when the document has been loaded.
  • onunload: This event occurs when the document has been removed.

<form> level events

  • onchange: It occurs when element changes in the document.
  • onsubmit: It occurs when form is submitted in the document.
  • onreset: It occurs when form resets in the document.
  • onblur: It occurs when element loses focus in the document.
  • onfocus: It occurs when element gets focus in the document.

<keyboard> level events

  • onkeydown: It occurs when a key is pressed down over an element.
  • onkeypress: It occurs when a key is pressed down over an element then released.
  • onkeyup: It occurs when a key is released over an element.

Common Event Attributes

  • onmousedown: It occurs when a pointing device button is pressed down over an element.
  • onmousemove: It occurs when a pointing device is moved within element .
  • onmouseup: It occurs when a pointing device button is released over an element.
  • onmouseout: It occurs when a pointing device is moved away from the element.
  • onmouseover: It occurs when a pointing device is moved over the element.
  • onclick: It occurs when a pointing device button is clicked over an element.
  • ondblclick: : It occurs when a pointing device button is double clicked over an element.

XHTML Tips and Tricks

  • XHTML document starts with tag –There is no such thing as <xhtml> tag.
  • Declare XHTML namespace inside the opening <html> tag. For example, http://www.w3.org/xhtml is the XHTML namaspace.
  • The character encoding of the document is UTF-8 or UTF-16. Use appropriate DOCTYPE declaration.
  • Avoid line breaks and multiple white space characters within attribute values.
  • For specifying language use both lang and xml:lang attributes.
  • XHTML 1.0has deprecated the name attribute of the a, form, img, map elements and it will be removed from XHTML subsequent versions.
  • The DOCTYPE declaration at top of XHTML page may puts most browsers in standard mod, so not use old browsers and non standard tags. Otherwise use regular HTML.
  • The named character reference '(the apostrophe) was introduced in xml 1.0 but doesn’t appear in html. Web developers use ' instead of '
  • The DOCTYPE declaration must be in upper case.

XHTML Headers

Creating headings in XHTML are same as in HTML. Typically browsers default to Times New Roman, bold face at 24, 18,14,12,10 and 8 pixel point. You can use CSS style sheet to override default settings. The physical structure such as color, font-size, font-type etc can be specified in Cascaded Style Sheet. Like HTML, XHTML has six levels of headings. The six levels of headings are numbered from 1 through 6, where <h1> specifies the most significance and <h6> specifies the least significance.

Header Elements

  • <title>: The name of the document which appears in the title bar of the web browser.
  • <meta>: It defines variables for the document object and assigns value to them.It defines additional information of the document.
  • <base>: It determines base URL to be used.
  • <style>: It is used to include style sheets or to delimit the style rules.
  • <link>: It is used associate with other documents. It establishes relationship between documents as same as hyperlinks.
  • <script>: It is used to include scripts to be run within the page.

Block Elements

  • address: It contains information about the document.
  • blockquote: It denotes long quotation.
  • del: It specifies deleted content.
  • div: It is used to group areas of the content.
  • dl: It defines definition list.
  • fieldset: It is used to group related elements in the form.
  • h1: level 1 heading.
  • h2: level 2 heading.
  • h3: level 3 heading.
  • h4: level 4 heading.
  • h5: level 5 heading.
  • h6: level 6 heading.
  • hr: It is used to separate content in a web page.
  • ins: It is used to insert the content in the web page.
  • ol: It specifies ordered list.
  • ul: It specifies unordered list.
  • p: It defines paragraph.
  • pre: It defines preformatted text.

Inline Elements

  • a: It defines a hyperlink.
  • abbr: It specifies abbreviation.
  • b: It define bold style.
  • big: It defines text to be display in big size.
  • cite: It contains citation or reference to another resource.
  • em: It refers to emphasized text.
  • i: Indicates italic style.
  • img: It is used to define image.
  • input: It defines multipurpose form control .
  • label: It associates label with form controls such as input, text area, select and object.
  • map: It defines client side image map.
  • kbd: It indicates input to be entered by the user.
  • object: It provides generic way of embedding objects such as images, movies and applications into web pages.
  • q: It defines short quotation.
  • samp: It is used to designate sample output from programs, scripts etc.
  • select: It is used to create an option selector form control which most web browsers render as list box control.
  • small: It display text in small font.
  • span: It provides way of adding structure to content.
  • strong: It is used to indicate stronger emphasis.
  • sub: It indicates that its contents should be regarded as a subscript.
  • sup: It indicates that its contents should be regarded as a superscript.
  • textarea: It is used to create multi line text input form control.
  • tt: It renders text in teletype or monospaced font.
  • var: It is used to indicate an instance of a computer code variable.

List Item Elements

  • dd: It is definition description for a item in a definition list.
  • dt: It specifies definition term.
  • li: It represents item list in ordered lists and unordered lists.

Table Content Elements

  • caption: It creates caption for a table.
  • col: It specifies attributes for table column.
  • colgroup: It defines attributes for a group of table columns.
  • tbody: It can be used to group table data rows.
  • td: It defines data cell in a table.
  • tfoot: It is used to group table rows that contain table footer information.
  • th: It indicates table header cell.
  • thread: It specifies heading area for a table.
  • tr: It defines table row in a table.

Form Menu Options

  • optgroup: It is used to group the choices defined in select form controls.
  • option: It represents a choice offered select form controls.

Map Areas

  • area: It provides geometric regions of a client side image map and provides hyperlink for each region.

Ruby Annotations

  • rb: It contains base text.
  • rbc: It is base container for rb elements in cases of complex ruby mark up.
  • rp: It is used to specify the characters that denote the beginning and end of ruby text.
  • rt: It contains ruby annotation text.
  • rtc: It is ruby text container for rt elements in cases of complex ruby mark up.

XHTML Comments

To add comment into XHTML page do the following steps:

  • Go to location in XHTML document where you want to insert comment.
  • Type the comment by starting “<! - -“ type comments, when you are finished the type ” - ->” to close the comment tag.

You can insert comment anywhere in the XHTML document, and just insert anything as mentioned above within them.

Conclusion

Here I have tried to cover the basics of XHTML. Hope you enjoyed reading this.



Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login