Está en la página 1de 14

XHTML es una nueva, estricta y mas limpia version de HTML. Que es XHTML?

XHTML significa EXtensible HyperText Markup Language XHTML est destinadoa remplazar HTML XHTML es casi identico a HTML 4.01 XHTML es una version mas limpia y estricta de HTML XHTML esta definido como una aplicacin XML XHTML es una combinacin de HTM y XML (eXtensible Markup Language). Esta compuesto de todos los elementos de HTML 4.01 combinado con la sintaxis de XML. Actualmente muchas paginas en la web contienen HTML incorrecto. XML es un lenguaje de marcado donde todas las etiquetas debe de ser marcadas correctamente, lo cual resulta en documentos bien formados. Al combinar HTML con XML se obtiene un lenguaje de marcado que es util ahora y en el futuro: XHTML. Las diferencias mas importantes: Los elementos XHTML deben de estar propiamente anidados. Los documentos XHTML deben de estar bien formados. Los nombres de etiquetas (tag names) deben de estar en minusculas. Todos los elementos XHTML deben de estar cerrados. Otras reglas de sintaxis en XHTML: Nombres de atributos deben de estar en minusculas. Los valores de los atributos debe de estar entre comillas. La minimizacion de los atributos est prohibido. El id de los atributos remplaza a name. El DTD de XHTML define los elementos obligatorios. Porque XHTML?
Hemos llegado al punto en donde muchas paginas web contienen HTML incorrecto. El siguiente fragmento de cdigo HTML funciona bien cuando se ve en el navegador aun cuando no sigue las reglas de HTML:

<html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body>

XML es un lenguaje de marcado donde todo debe ser marcado correctamente, lo cual da como resultado documentos bien formados.

XML fue diseado para describir datos y HTML fue diseado para desplegarlos. El mercado actual consiste de diferentes tecnologas de navegadores, algunos corren en computadoras mientras que otros corren en telfonos mviles y hand helds. Estos ultimos no tienen los recursos o el poder de interpretar un lenguaje de marcado incorrecto. Por tanto, al combinar las fortalezas de HTML y XML se obtiene un lenguaje de marcado que es util ahora y en el futuro: XHTML.

Los elementos deben de estar propiamente anidados


En HTML algunos elementos pueden ser iimpropiamente anidados coomo por ejemplo:

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


In XHTML all elements must be properly nested within each other like this: En XHTML todos los elementos deben de estar propiamente anidados como sigue:

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


Nota: Un error comn en listas anidadas es olvidar que la lista interna debe de estar dentro de un elemento li como se muestra a continuacin: Esto es incorrecto:

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> </ul>
Esto es correcto:

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
Notese como se ha insertado una etiqueta </li> despus de la etiqueta </ul>

Los documentos deben de estar bien formados


Todos los elementos XHTML deben de estar anidados dentro del elemento raz <html>. Todos los dems elementos pueden tener sub elementos (o hijos). Los sub elementos deben de estar en pares y correctamente anidados dentro del elemento padre. La estructura bsica de un documento es:

<html> <head> ... </head> <body> ... </body> </html>

Las etiquetas deben de estar en minsculas


Esto es porque los documentos XHTML son aplicaciones XML. XML es sensitivo al caso. Etiquetas como <br> y <BR> son interpretadas como diferentes. Esto es incorrecto:

<BODY> <P>This is a paragraph</P> </BODY>


Esto es correcto:

<body> <p>This is a paragraph</p> </body>

Todos los elementos XHTML deben de estar cerrados


Los elementos no vacios deben de tener etiqueta de cierre. Esto es incorrecto:

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


Esto es correcto:

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

Los elementos vacios tambien deben de ser cerrados


Los elementos vacios deben de tener una etiqueta de cierre o la etiqueta de inicio debe de terminar con />. Esto es incorrecto:

This is a break<br> Here comes a horizontal rule:<hr> Here's an image <img src="happy.gif" alt="Happy face">
Esto es correcto:

This is a break<br /> Here comes a horizontal rule:<hr /> Here's an image <img src="happy.gif" alt="Happy face" />
Nota importante de compatibilidad: Para hacer XH

Los nombres de los atributos deben de estar en minsculas


Esto es incorrecto:

<table WIDTH="100%">
Esto es correcto:

<table width="100%">

Los valores de los atrbutos deben de estar entre comillas


Esto es incorrecto:

<table width=100%>
Esto es correcto:

<table width="100%">

La minimizacin de los atributos est prohibida


Esto es incorrecto:

<dl compact> <input checked> <input readonly> <input disabled> <option selected> <frame noresize>
Esto es correcto:

<dl compact="compact">

<input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />
Lista de atributos HTML minimizados y como deberian de escribirse en XHTML: HTML compact checked declare readonly disabled selected defer ismap nohref noshade nowrap multiple noresize XHTML compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize"

El atributo id remplaza al atributo name


HTML 4.01 define un atributo name para los elementos a, applet, frame, iframe, img, and map. En XHTML el atributo name es depreciado. Use id en su lugar. Esto es incorrecto:

<img src="picture.gif" name="picture1" />


Esto es correcto:

<img src="picture.gif" id="picture1" />


Nota: Para interoperar con navegadores antiguos se deberia de usar por un tiempo ambos id y name con el mismo valor:

<img src="picture.gif" id="picture1" name="picture1" />

El atributo Lang
El atributo lang aplica a caso todos los elementos XHTML. Especifica el lenguaje del contenido dentro del elemento.

Si usa el atributo lang en un elemento, debe de agregar el atributo xml:lang como se muestra a continuacin:

<div lang="no" xml:lang="no">Heia Norge!</div>

Elementos XHTML obligatorios


Todos los elementos XHTML deben de tener la declaracion DOCTYPE. Los elementos html, head y body deben de estar presentes. Y el elemento title debe de estar presente del elemento head. Esta es la plantilla del documento XHTML minimo:

<!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> Body text goes here </body> </html>
Nota: La declaracion DOCTYPE no es parte del documento XHTML en si mismo. No es un elemento XHTML, y no deberia de llevar etiqueta de cierre. Nota: El atributo xmlns dentro de la etiqueta <html> es requerido en XHTML.Sin embargo el validador en w3.org no se queja cuando no se encuentra especificado. Esto es porque "xmlns=http://www.w3.org/1999/xhtml" es un valor fijo y es automaticamente incluido incluso si no se especifica TML compatible con los navegadores de hoy en dia se debe de agregar un espacio extra antes del simbolo "/". De esta manera: <br />.

The XHTML standard defines three Document Type Definitions. El estandard XHTML define tres Document Type Definitios (DTD). El ms comn es el Transitional.

<!DOCTYPE> es obligatorio
Un documento XHTML consiste de 3 partes principales:

DOCTYPE Head Body

La estructura bsica es:

<!DOCTYPE ...> <html> <head> <title>... </title>

</head> <body> ... </body> </html>


La declaracin DOCTYPE debe ser a primera linea en el documento XHTML

Un ejemplo XHTML
Este es un ejemplo simple (mnimo) de un documento XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>

Los 3 DTDs
DTD especifica la sintaxis de una pagina web en SGML. DTD es usado por aplicaciones SGML como HTML para especificar las reglas que aplican a un tipo particular de documento de marcado. Incluye un conjunto de elementos y declaraciones de entidades. XHTML es especificado en un SGML document type definition o 'DTD'. Un XHTML DTD describe de una forma precisa la sintaxis y gramtica permitidas en un documento.

Existen 3 tipos de documentos:

STRICT TRANSITIONAL FRAMESET

XHTML 1.0 especifica 3 tipos de documentos XML que corresponden a los 3 DTDs: Strict, Transitional, and Frameset.

XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Usado cuando realmente se quiere codigo limpio, libre de elementos de presentacion o formato. Usado en conjunto con Hojas de Estilo en Cascada.

XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Usado cuando se quiere tomar ventaja de las funcionalidades de presntacin de HTML. Y cuando se quiere soporte para navegadores que no entienden Hojas de Estilo en Cascada.

XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Usado cuando se quiere usar Frames para dividir la ventana del navidador en varias secciones.

Validacin: http://validator.w3.org/#validate_by_upload

XHTML 1.0 Reference

Ordered Alphabetically
See also: Ordered by Function

NN: indicates the earliest version of Netscape that supports the tag IE: indicates the earliest version of Internet Explorer that supports the tag DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Description Defines a comment Defines the document type Defines an anchor Defines an abbreviation Defines an acronym Defines an address element Defines an applet Defines an area inside an image map Defines bold text 6.2 NN IE DTD 3.0 3.0 STF STF 3.0 3.0 STF STF 6.2 4.0 STF 4.0 4.0 STF 2.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF

Tag <!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area /> <b>

<base /> <basefont /> <bdo> <big> <blockquote> <body> <br /> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dir> <div> <dfn> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <head> <hr /> <html> <i> <iframe> <img /> <input /> <ins> <isindex> <kbd> <label> <legend> <li> <link>

Defines a base URL for all the links in a page Defines a base font Defines the direction of text display Defines big text Defines a long quotation Defines the body element Inserts a single line break Defines a push button Defines a table caption Defines centered text Defines a citation Defines computer code text Defines attributes for table columns Defines groups of table columns Defines a definition description Defines deleted text Defines a directory list Defines a section in a document Defines a definition term Defines a definition list Defines a definition term Defines emphasized text Defines a fieldset Defines the font face, size, and color of text Defines a form Defines a sub window (a frame) Defines a set of frames Defines information about the document Defines a horizontal rule Defines an html document Defines italic text Defines an inline sub window (frame) Defines an image Defines an input field Defines inserted text Deprecated. Defines a single-line input field. Use <input> instead Defines keyboard text Defines a label for a form control Defines a title in a fieldset Defines a list item Defines a resource reference

3.0 3.0 STF 3.0 3.0 TF 6.2 5.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 STF 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 F 3.0 3.0 F 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.0 4.0 TF 3.0 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 TF 3.0 3.0 STF 6.2 4.0 STF 6.2 4.0 STF 3.0 3.0 STF 4.0 3.0 STF

<h1> to <h6> Defines header 1 to header 6

<map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var> <xmp>

Defines an image map Defines a menu list Defines meta information Defines a noframe section Defines a noscript section Defines an embedded object Defines an ordered list Defines an option group Defines an option in a drop-down list Defines a paragraph Defines a parameter for an object Defines preformatted text Defines a short quotation Defines strikethrough text Defines sample computer code Defines a script Defines a selectable list Defines small text Defines a section in a document Defines strikethrough text Defines strong text Defines a style definition Defines subscripted text Defines superscripted text Defines a table Defines a table body Defines a table cell Defines a text area Defines a table footer Defines a table header Defines a table header Defines the document title Defines a table row Defines teletype text Defines underlined text Defines an unordered list Defines a variable Deprecated. Defines preformatted text. Use <pre> instead

3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 STF 3.0 3.0 STF 6.0 6.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 4.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 4.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 4.0 STF 3.0 3.0 STF 3.0 3.0 STF 4.0 STF 3.0 3.0 STF 4.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0

XHTML Standard Attributes

XHTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions).

Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id style title Value class_rule or style_rule id_name style_definition tooltip_text Description The class of the element A unique id for the element An inline style definition A text to display in a tool tip

Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Attribute Value ltr | rtl Description Sets the text direction

XHTML Event Attributes

New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions. If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events
Only valid in body and frameset elements Attribute Value Description onload script Script to be run when a

document loads onunload script Script to be run when a document unloads

Form Element Events


Only valid in form elements. Attribute Value Description onchange script Script to be run when the element changes onsubmit script Script to be run when the form is submitted onreset script Script to be run when the form is reset script Script to be run when the element is selected script Script to be run when the element loses focus script Script to be run when the element gets focus

onselect

onblur

onfocus

Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute Value Description

onkeydown script What to do when key is pressed onkeypress script What to do when key is pressed and released onkeyup script What to do when key is released

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onclick Value Description script What to do on a mouse click script What to do on a mouse doubleclick

ondblclick

onmousedown script What to do when mouse button is pressed onmousemove script What to do when mouse pointer moves onmouseover script What to do when mouse pointer moves over an element onmouseout script What to do when mouse pointer moves out of an element script What to do when mouse button is released

onmouseup

dir lang language_code Sets the language code

Keyboard Attributes
Attribute accesskey tabindex Value character number Description Sets a keyboard shortcut to access an element Sets the tab order of an element

También podría gustarte