| (Anterior) HTML / XHTML a Detalle |
| JavaScript (Siguiente) |
|
Cascading Style Sheets
CSS ("Cascading Style Sheets") es una metodología para dar uniformidad al uso de tags en documentos HTML / XHTML , como habrá notado de las secciones anteriores, el agregar atributos a cada Tag HTML / XHTML puede ser un proceso mecánico, imagínese que para centrar todas las celdas (<td> ) de un documento o de todo un sitio, tuviera que agregar el atributo align="center" a todos sus elementos, es esta facilidad la que precisamente otorga CSS , y además de lo anterior, es a través de Cascading Style Sheets que se realizan los diseños para documentos HTML / XHTML Strict.
El nombre Cascading (En Cascada) tiene sus raíces en el funcionamiento de las mismas, ya que es posible definir uniformidades en tres distintos puntos de un documento :
- Uniformidad en Varios Documentos (Archivo CSS)
- Uniformidad en Documento (Tags
<style>y<span>) - Uniformidad en Tag ( Clases y en Linea )
Ahora bien, el efecto en Cascada se debe al nivel de precedencia (importancia) que se toma al ser interpretadas las diversas uniformidades en un documento, esto es, si en los atributos de los tags <style> (Uniformidad en Documento) existen varias definiciones traslapadas con aquellas definidas en un archivo CSS, entonces las últimas tomarán precedencia, de igual manera, aquellas definiciones por Tag ( Clases y en Linea) tomarán precedencia sobre aquellas de Documento (Tags <style> y <span>) y archivos CSS.
Finalmente vale mencionar que en dado caso de no definirse ninguna funcionalidad para algún tag el Navegador utiliza sus valores "defaults".
Uniformidad en Varios Documentos (Archivo CSS)
Esta implementación es aquella utilizada a lo largo de varios documentos y su funcionamiento depende de un archivo que es llamado dentro del documento HTML / XHTML , este tipo de declaración es similar a la de una imagen, y existen dos posibilidades para ser incorporada a un documento :
<html> <head> <title> Documento de CSS </title> <link rel="stylesheet" type="text/css" href="/css/estilo.css"> <style type="text/css"> <!-- @import url(http://www.osmosislatina.com/css/estilo.css) --> </style> </head> <body> ........ ........ </body> </html> |
Nótese que ambas definiciones para importar el archivo CSS son anidadas dentro del Tag <head> del documento; la primer declaración importa el archivo CSS mediante el elemento link con sus respectivos atributos, la segunda declaración hace uso de los Tags <style> para importar el mismo archivo CSS; a pesar de las diferencias en sintaxis, ambas declaraciones tienen el mismo funcionamiento.
La utilización de comentarios <!-- y --> antes y después de los tags <style> se hace con la intención de evitar errores en los Navegadores que no reconocen el tag <style> y/o tienen desactivado el uso de CSS. A continuación se ilustra la composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML :
Uniformidad en Documento (Tags <style> y <span> ).
Dentro de los tag <style> también es posible definir el comportamiento de tags que afectarán un documento en particular, dichas declaraciones son idénticas a aquellas empleadas en una hoja de estilo (CSS), con la diferencia que estas solo tomaran efecto en solo documento.
<head>
<title> Documento de CSS </title>
<style type="text/css">
<!--
body { background-color:black }
h1,h3,h4 {text-align: center}
h2 {text-align: right}
p b {color: yellow}
a:link { color: blue }
a:active { color: red; font-weight: bold}
a:visited { color: green }
span { color: red }
span.negrita { font-weight: bold }
-->
</style>
</head>
|
Los parámetros definidos dentro de los tags <style> indican lo siguiente:
-
body { background-color: black }: Cualquier contenido dentro de los Tags<body>(todo el documento en sí) tendrá fondo negro. -
h1,h3,h4 {text-align: center}: Cualquier contenido dentro de los Tags<h1>,<h3>,<h4>será alineado en el centro. -
h2 {text-align: right}: Cualquier contenido dentro de los Tags<h2>será alineado hacia la derecha. -
p b {color: yellow}: Después de cualquier salto de renglón ( tags<p>) si precedía de letras negritas ( tags<b>) el contenido será de color amarillo; aquí es importante mencionar que si existen letras negritas no será asignado el color amarillo salvo estas se encuentren dentro de un salto de renglón, lo anterior se debe a la omisión de comas (",") entre los elementos que genera un comportamiento anidado. -
a:link { color: red }: Todos los links de la página ( tags<a>) estarán en rojo. -
a:active { color: blue; font-weight: bold}: Al momento de oprimir el Link, la letras aparecerán azules y la letra se tornará negrita. -
a:visited { color: green }: Si el usuario observa un Link que ya visito, éste aparecerá de color verde.
Las definiciones que inician con span tienen un comportamiento especifico ya que forman parte de CSS; al utilizarse las diversas definiciones mencionadas anteriormente, estas toman un efecto sobre todas las declaraciones del documento, esto correspondería a que el comportamiento de todos los tags <h2> o <a> (links) seria idéntico, sin embargo, existen ocasiones en las que este comportamiento no es deseado para todos los elementos de un documento, para este tipo de situaciones se utiliza el Tag <span>
La siguiente declaración permite que únicamente una sección del contenido sea afectada:
|
Para que el tag <span> pueda ser utilizado en diversas circunstancias, es posible generar clases de la siguiente manera:
|
Además del uso de clases, el Tag <span> también puede contener declaraciones en linea a través del atributo style ; el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS descrita a continuación.
Uniformidad en Tag ( Clases y en Linea )
Finalmente existe la posibilidad de definir el funcionamiento de cualquier tag HTML / XHTML al mismo nivel de tags , esto es, el funcionamiento solo tendrá efecto dentro del tag y ningún otro tag del mismo tipo será afectado en el documento, para esto existen dos posibilidades:
Definir Clases ("Classes")
Para realizar este comportamiento es necesario definir clases dentro de los parámetros definidos en <style> , o bien, que sean incluidas estas definiciones en un archivo CSS:
<head>
<title> Documento de CSS </title>
<style type="text/css">
<!--
h2.azul {color: azul}
h2.verde {color: green; text-align: center}
h2.amarilla { color: yellow }
.cursiva { font-style: italic }
-->
</style>
</head>
|
Los parámetros anteriores definen tres funcionamientos para títulos con tags <h2> , esto otorga la flexibilidad de emplear títulos con diferentes colores. Para utilizar la funcionalidad los tags son llamados con el parámetro class :
|
|
La clase genérica .cursiva puede ser utilizada para cualquier tipo de tag , esto es :
|
El uso de clases ( class ) no esta limitado a colores y alineación , esta metodología puede ser empleada para cualquier tipo de funcionalidad que sea apoyada por CSS.
Definir en Linea
Aunque muy similar a la metodología utilizada en clases ( class ) esta se especifica dentro del tag de la siguiente manera:
|
Esta última metodología también garantiza que solo tags individuales sean afectados.
| Recuerde que a pesar de todos sus esfuerzos el usuario final puede desactivar sus formatos. |
Formas y Aplicación de Servidor
La recabación de datos forma una parte muy importante para cualquier sitio de Internet y esta también se lleva acabo con elementos HTML / XHTML denominados formas, los elementos principales de una forma son los tags <form> que indican como y a donde será enviada la información. Dentro de <form> se declaran dos atributos muy importantes, uno de ellos es method y el otro action .
<body> ...... ...... <form method="POST" action="/cgi-bin/confirmar.pl"> ...... ...... </form> ..... </body> |
El atributo method le indica al navegador ("Netscape" o "Explorer") como debe ser enviada la información al Servidor, este valor puede ser POST o GET , sin entrar en detalles extensos, si se utiliza GET los elementos de la forma serán enviados al Servidor en el URL ("Universal Resource Locator") de action, esto es, si dentro de la forma se solicitan los valores: curso, idioma y navegador , la información sería enviada de la siguiente manera:
http://www.osmosislatina.com/cgi-bin/confirmar.pl?curso=HTML&idioma=castellano&navegador=Mozilla |
Después del URL, el navegador agrega ? para indicar que continúan variables solicitadas, a partir de ? le siguen las variables definidas por medio de un = y separadas por un &, en cambio, si se utiliza POST las variables y sus valores se incluirán en el contenido de la requisición, por debajo del URL. Lo anterior garantiza que el usuario final no sea capaz de observar las variables en el URL, fuera de esto, la única implicación en utilizar POST o GET es que la aplicación de Servidor este configurada para leer las variables y sus valores en el método que hayan sido enviadas.
En el caso anterior la Aplicación de Servidor (Programa) que procesa esta información es aquella definida por el atributo action , la cual es un "script" en Perl llamado: confirmar.pl ; en otros casos esta Aplicación de Servidor pudo ser: Un JSP ("Java Server Page"), ASP ("Active Server Page"), PHP ("Hypertext Preprocessor") u otra metodología de Servidor.
Para declarar variables en una forma se pueden utilizar varios métodos o menús, los cuales son descritos a continuación:
Tags input
El Tag input permite pasar un conjunto de variables con sus respectivos valores en una forma.
Tipo Text
Este tipo de variable permite al usuario final asignar un valor de texto a la variable en cuestión , se expresa de la siguiente manera:
País: <input type="text" name="pais" size="10" maxlength="20" value="mexico"> |
La declaración indica que será desplegado un recuadro de 10 espacios (size) donde la variable llevará por nombre pais, dicha variable puede tener un valor máximo de 20 letras (maxlength) y aparecerá un valor "default" mexico (este valor puede ser modificado por el usuario).
|
|
Tipo Password
También permite que el usuario especifique un valor de texto, pero a diferencia del tipo text, el usuario observará asteriscos ( **** ) mas no el texto.
Contraseña: <input type="password" name="pass" size="15" maxlength="30"> |
|
|
NOTA: A pesar que el valor no aparece en pantalla, el valor no es protegido al momento de ser transferido al nivel de Red, para realizar esta protección se requiere utilizar encriptación en el servidor de páginas.
Tipo Radio
Este tipo de variable es utilizada para desplegar un menú con botones.
Pais:<input type="radio" name="pais" value="ar">Argentina
<input type="radio" name="pais" value="br">Brazil
<input type="radio" name="pais" value="co">Colombia
<input type="radio" name="pais" checked value="mx">México
<input type="radio" name="pais" value="ve">Venezuela
|
Lo anterior indica que el nombre de la variable pais será un menú de selección de botones, donde el valor "default" ( checked ) será México, los parámetros value indican el valor que tomará la variable en caso de ser seleccionada; value es de gran ayuda cuando la descripción de la variable es extensa y sólo se desea enviar un vocablo o iniciales como valor al servidor de páginas, si se omite el valor value , el valor de la variable pasa a ser aquel que se encuentra del lado derecho del elemento.
|
|
Tipo Checkbox
Este tipo de variable es utilizada para desplegar un menú con cuadros de selección, a diferencia del tipo Radio , Checkbox permite la selección de valores múltiples :
Intereses:<input type="checkbox" name="intereses" value="p">Política
<input type="checkbox" name="intereses" checked value="d">Deportes
<input type="checkbox" name="intereses" value="c">Cine
<input type="checkbox" name="intereses" checked value="t">Tecnología
<input type="checkbox" name="intereses" value="a">Administración
|
Los parámetros que son utilizados para este tipo de variable tienen el mismo funcionamiento que el Tipo radio ( name, checked, value), la única diferencia es que si son seleccionados varios valores, la información es pasada al servidor de páginas como: intereses="d" intereses="t" , por lo tanto debe asegurarse que su Aplicación de Servidor sea capaz de procesar dos o más valores para la misma variable.
|
|
Tipo Hidden
Este tipo de elemento es utilizado para esconder el valor de cierta variable, se utiliza generalmente cuando es necesario procesar datos a lo largo de dos o tres páginas, de esta manera la variable sigue existiendo en la forma, pero no es desplegada en pantalla.
<input type="hidden" name="intereses">
<input type="hidden" name="pais" value="mexico">
|
Tag select
El Tag select permite generar menús de una manera similar a las mencionadas anteriormente.
<select size="3" name="intereses" multiple> <option value="p">Política <option value="t" selected>Tecnología <option value="d">Deportes <option value="c">Cine <option value="m">Música </select> |
Los parámetros del Tag SELECT son:
-
name: Indica el nombre de la variable (como los Taginput). -
size: Especifica el número de opciones que serán desplegadas en pantalla ( las restantes serán incluidas en forma de menú). -
multiple(opcional): Permite al usuario final elegir varios valores (si se omitemultiplesolo se permite seleccionar un valor, como el comportamiento delinputradio ); para seleccionar diversos elementos de manera aleatoria, se oprime del tecladoCtrl. -
<option>: Define los valores de la variable en cuestión, dentro de estos tags es posible indicar el parámetrovalueque tiene el mismo funcionamiento que los Tagsinput, yselectedque permite preseleccionar ciertos valores.
|
|
Tag textarea
Los Tags textarea son muy similares a
INPUT text
, la diferencia estriba en que textarea permite definir el área por renglones y columnas.
|
|
|
|
El parámetro name indica el nombre de la variable que llevará el contenido, mientras cols y rows definen el número de columnas y renglones (respectivamente) que serán visibles en pantalla, cualquier texto que aparezca entre los tags textarea será desplegado dentro del recuadro.
Tag input File
Finalmente, entre los distintos Tags empleados para enviar información a un Servidor, existe otro empleado para enviar archivos (Gráficas,Documentos o Binarios), este también es del tipo input, sin embargo, merece un trato especial por la siguiente razón.
Toda la información enviada en los distintos Tags mencionados anteriormente poseen la característica que es texto simple, esto es, no poseen ningún formato implícito, sin embargo, cuando se trata de un Archivo (Gráfica, Documento o Binario) éste siempre tiene un formato inherente el cual debe ser trasladado a la Aplicación de Servidor.
Dicho traslado es llevado acabo serializando el contenido del archivo (a través del "Browser"), mediante el siguiente Tag:
Elegir Archivo : <input type="file" name="documento" accept="image/*"> |
|
|
El atributo name indica el nombre que será asignado al archivo en la forma; el atributo accept (opcional) es utilizado para indicar el tipo de archivos que pueden ser agregados a la forma, en este caso se esta indicando archivos de tipo imagen, la nomenclatura para asignar este parámetro es a través de MIME's ("Multipurpose Internet Mail Extensions"), los MIME's más comunes se describen a continuación :
| MIME | Tipo de Archivo |
|---|---|
| application/msword | Microsoft Word (.doc) |
| application/octet-stream | Binarios (.bin,.exe,.class) |
| application/pdf | Acrobat (.pdf) |
| application/vnd.ms-excel | Microsoft Excel (.xls) |
| application/vnd.ms-powerpoint | Microsoft Power Point (.ppt) |
| application/zip | Archivo ZIP [Compresión] (.zip) |
| audio/mpeg | Video MP3 (.mp3) |
| image/gif | Grafica GIF (.gif) |
| image/jpeg | Grafica JPEG (.jpeg/.jpg) |
| */* ("Default") | Cualquier Archivo |
Además de la definición del Tag input, también es necesario agregar el atributo enctype a la definición del elemento <form> :
<form enctype="multipart/form-data" method="POST" action="/cgi-bin/confirmar.pl"> |
Este atributo permite que la forma sea enviada en dos secciones, una compuesta por texto con los diversos elementos de la forma, y la otra con el correspondiente archivo serializado; el procesamiento apropiado de la forma con un archivo anexo, depende (al igual que toda otra forma HTML / XHTML ) de la escritura correcta de la Aplicación de Servidor sea un JSP, PHP, ASP o CGI Perl.
Tags input submit - reset y button
Los Tags que han sido mencionados anteriormente sólo definen el nombre y valor que llevarán las variables de una forma, pero aun faltaría por mencionar un tag denominado submit que acciona el envío de información al Servidor y reset que reinicializa todos los valores de una forma.
<input type=submit value="Enviar datos"> <input type=reset value="Borrar los datos"> |
|
|
Este tipo de Tags al igual que todos los antes mencionados deben estar colocados dentro de los tags form , el parámetro value de estos tags indica lo que será desplegado en pantalla; al momento de ser presionado el botón definido como submit la información de la forma será enviada al servidor. A que parte del servidor ? Al programa que es definido en el parámetro
action del Tag form
, las variables y sus valores serán procesados por este programa ya sea un JSP, PHP, ASP o CGI Perl.
Además de los Tags input submit y reset existe otro Tag denominado button que permite definir puntos de acción para formas, mientras los Tags input permiten definir botones de texto para el envío de Formas HTML / XHTML, mediante los elementos button es posible definir puntos de acción dentro de una gráfica:
<button type=submit> Enviar Datos <img src="graficas/enviar.gif" align="middle" alt="Enviar Datos"> </button> <button type=reset> Borrar Datos <img src="graficas/borrar.gif" align="middle" alt="Borrar Datos"> </button> |
Otra variación del elemento button sería definir el atributo type=button, el cual generaría un botón simple donde sus acciones quedarían definidas por funciones JavaScript como onClick; este tipo de definiciones serán descritas en su respectiva sección de este curso.
XForms
Así como HTML ha evolucionado en el estándar XHTML, hoy en día ya existe una especificación denominada XForms que representa un paso evolutivo en la creación de formas para capturar información en documentos HTML / XHTML.
Aunque los elementos descritos anteriormente facilitan la captura de datos, estos poseen algunas desventajas inherentes que han sido tomadas en cuenta para la creación de XForms, tales como :
- Validación automática de campos antes de procesar información.
- Captura de datos a partir de un documento externo.
- Concatenar y generar datos de una forma a partir de otra forma.
No obstante, la utilización de XForms aun se encuentra en su infancia, y dado que sólo es posible realizar este tipo de diseños en Navegadores con el correspondiente Plug-in, aun es considerada una tecnología emergente.
Tags meta para "Search Engines" y Contenido Dinámico
En HTML / XHTML existe un Tag llamado <meta> que es colocado entre los elementos <head> del documento . Aunque este Tag no influye en el despliegue final de la página, puede ser empleado por Motores de Búsqueda ("Search-Engines") para clasificar información, así como para regenerar una página en determinados lapsos de tiempo.
A continuación de describe un fragmento HTML / XHTML que utiliza dos de estos Tags:
<html> <head> <meta name="keywords" content="robots, motores de búsqueda, español"> <meta name="description" content="Funcionamiento de Web-Crawlers y su utilización de HTTP"> <title> Documento Básico en HTML </title> </head> <body> ......... |
En este fragmento se hace uso de los Tags meta con los atributos keywords y description, ambos elementos son empleados por los diversos "Search-Engines" en Internet para realizar una mejor clasificación acerca del contenido descrito en un documento. Vale mencionar que estos Tags no son obligatorios para que la página sea clasificada en un Motor de Búsqueda, sin embargo, si mejoran las posibilidades que el documento sea clasificado acordemente.
Ahora bien, si esta pensando colocar miles de palabras "relevantes" entre los tags META de un documento sólo para intentar que sus documentos sean considerados más relevantes, no servirá, ya que casi todos los Motores de Búsqueda utilizan un nivel de relevancia de dos palabras para los tags META , esto es, si escribe: mexico,mexico,mexico,mexico,mexico esto tiene la misma relevancia que mexico, mexico , además, si escribe miles de palabras adicionales hará que el usuario final del documento (* humano *) baje todas estas palabras irrelevantes que no son visualizadas en el navegador, incrementando el tiempo de descarga.
Para aquellos casos en los que se desee que una página no sea clasificada por ningún motivo es posible utilizar la siguiente definición :
<html> <head> <meta name="robots" content="noindex, nofollow"> <title> Documento Básico HTML No Buscado por Motores de Búsqueda </title> </head> <body> ......... |
Mediante la definición anterior del Tag meta se logra que un Motor de Búsqueda no clasifique esta página en su Indice. Un caso común para emplear este tipo de Tag meta es en aquellas páginas que contienen información altamente dinámica, o bien, cualquier otra página que no sea deseable clasificar en un motor de Búsqueda.
En otras circunstancias, existe información en un documento HTML / XHTML que es modificada en lapsos de tiempo muy cortos, tal sería el caso de un evento deportivo, el precio de una acción en la Bolsa de Valores o un documento con Noticias, sin embargo, esto tipo de información obligaría al usuario final a constantemente estar regenerando la página mediante "Reload", ante esta deficiencia puede ser utilizada otra variación del Tag meta que regenera la información automáticamente.
<html> <head> <meta http-equiv="refresh" content="15; url="http://www.bolsadevalores.com"> <title> Cotizaciones </title> </head> <body> ..... |
Al ser colocado el fragmento anterior en determinada página y pasados 15 segundos de la solicitud inicial, el "Browser" automáticamente generará la página principal del sitio www.bolsadevalores.com; el parámetro url del atributo content es opcional para este Tag, en caso de no indicarse, la página actual sería aquella solicitada de nuevo al servidor de páginas.
El siguiente ejemplo demuestra el uso Tags META para regenerar una página automáticamente cada 5 segundos :
Existe otro tipo de Tag meta que le indica al "Browser" no archivar determinada página en su "Cache", este tipo de Tag al igual que el anterior es utilizado en páginas que contienen información altamente dinámica.
<html> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="-1"> <title> Cotizaciones </title> </head> <body> ..... |
Por último, vale mencionar que también existe un tag meta utilizado para definir el tipo de contenido empleado en un documento:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title> Cotizaciones </title> </head> <body> ..... |
Esta última variación del tag meta es de especial importancia cuando se codifican caracteres mediante comandos ASCII en un documento, ya que a través del atributo charset se especifica esta codificación; ISO-8859-1 corresponde al juego de caracteres estándar para el castellano, mientras otra variación puede ser UTF-8 que corresponde a "Unicode". En caso de no utilizarse esta nomenclatura en documentos que utilicen caracteres generados vía ASCII, dichos elementos serán desplegados con un ? (Signo de Interrogación).
Uso de DHTML.
Todos los fragmentos de HTML / XHTML que han sido descritos hasta este punto del curso han sido estáticos, sin embargo, existe una variación del lenguaje denominado DHTML mediante el cual es posible otorgar un efecto dinámico al contenido, dicho efecto se logra a través de diversos Tags y funciones JavaScript.
A pesar de los beneficios que presenta el uso de DHTML, esta es una de las áreas del lenguaje HTML / XHTML que presenta la mayor discrepancia entre distintas versiones de Navegadores, esto es, mientras las definiciones en DHTML pueden ser ejecutadas correctamente en "Internet Explorer 5" estas pueden resultar erróneas en "Netscape 4", esta discrepancia es tan extensa que muchos diseños en DHTML utilizan una detección previa de "Browser" para desplegar el contenido acordemente.
El fundamento de DHTML reside en el uso de capas en un documento HTML / XHTML , esto puede ser considerado como una serie de mini-documentos HTML / XHTML , los cuales son colocados en la ventana del "Browser" en diversas posiciones, pudiendo o no estar empalmados entre sí, donde el efecto dinámico entre estas capas es producido a través de JavaScript.
Como fue mencionado anteriormente, estas capas o "Layers" son definidas de distintas maneras en diversos "Browsers", a continuación se describen aquellas versiones de "Browsers" y su correspondiente Tag para definir DHTML:
"Internet Explorer 6.0+" / "Netscape 7.0+" / "Mozilla 1.0+" : Apegados al standard HTML 4.01, utilizan el Tag
<div>para definición de capas."Internet Explorer 4.0-5.5" : Emplean el Tag
<div>, sin embargo, con una variación propietaria.-
"Netscape 4.0-Netscape 6.0" : Utilizan los tags propietarios
<ilayer>y<layer>, dichos elementos no son válidos en ninguna versión de "Internet Explorer".
El siguiente ejemplo describe el uso de los elementos <div> y <layer> en la definición de capas :
En una futura sección será ilustrado el uso de JavaScript en conjunción de capas ("layers") para así demostrar la capacidad completa que posee DHTML.
Principales diferencias entre HTML y XHTML.
Antes de dar por terminada la sección de lenguajes de marcación, es conveniente enumerar cuales son las principales diferencias entre escribir sintaxis para XHTML comparado con HTML :
-
Letras minúsculas para XHTML : Todo tag en XHTML debe estar escrito en letras minúsculas. En las diversas versiones de HTML no se especifica ninguna restricción respecto a este lineamiento, por lo que en ciertas circunstancias era posible optar por escribir tags con letras mayúsculas como mecanismo distintivo, XHTML no permite esta facilidad.
-
Todo atributo de XHTML debe estar comillado : Mientras en HTML es posible indicar atributos de elementos sin utilizar comillas (
<td align=center>), XHTML define que todo atributo debe estar propiamente declarado con comillas (<td align="center">). -
Ningún atributo en XHTML puede estar aislado : Este caso aplica específicamente a los atributos que en HTML no reciben valor alguno, tal seria el caso del atributo
selecteden formas (<option selected>), en XHTML su definición debe duplicarse (<option selected="selected">). -
Clausura para elementos XHTML sin contenido : Se refiere a los elementos que por su naturaleza no incluyen contenido en su estructura, como:
<br>o<hr>, en XHTML estos deben ser clausurados acordemente, ya sea definiendo nuevamente su contraparte de clausura<hr></hr>, o bien, utilizando la nomenclatura de clausura prematura<br/>(Una diagonal antes de terminar el Tag) .