Plantillas Blogger, diferencia entre HTML y XHTML

Puede ser en ocasiones al querer insertar un elemento en su pagina o una entrada de Blogger, les haya aparecido un error y no saben bien de donde proviene, como que no se ha podido analizar, no esta bien formada, esta rota, o que los elementos no se han cerrado correctamente. Estos tipos de errores pueden corregirse si usted entiende un poco la diferencia entre HTML y XHTML.


 En esta entrada del blog intentaremos dar un repaso para conocer la diferencia entre los tipos de códigos, tanto HTML, como XHTML que es el que utilizan hoy las plantillas blogger, con suerte le será útil si se le presentan algunos de estos inconvenientes.

XML, HTML y XHTML

Vamos a hacer una explicación simplificada de estos términos, solo con la meta de que entiendan la diferencia entre los tipos de documentos. ver el código fuente de su blog de Blogger. Para saber con que tipo de documento está tratando usted debe dirigirse a la parte superior de su plantilla donde encontrará un código como este:

Código:
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Los términos XML, HTML y XHTML se refieren al lenguaje utilizado para escribir las páginas web. Muchos de ustedes han oído hablar de HTML (Hypertext Markup Language), inventada por Tim Berners-Lee, y se utiliza desde los primeros días de Internet. XML (Extensible Markup Language) es un meta-lenguaje, utilizado para crear otros lenguajes de marcas. El código HTML tradicional, más tarde fue la refundición de utilizar las reglas de XML y que dio lugar a una nueva aplicación de XML, llamado XHTML (Extensible Hypertext Markup Language). Puesto que las reglas son estrictas XHTML e implacable, si no se ajusten a ellos cuando se trata de modificar la plantilla se traduciría en mensajes de error. Así que, ¿Cuáles son estas normas que los bloggers como nosotros debemos tomar nota?

Reglas básicas de XHTML

1. Los códigos deben estar en minúsculas

Puesto que el XML es sensible a mayúsculas, todas las palabras clave del elemento y nombres de atributos usados ​​en XHTML deben estar en la minúscula. Por ejemplo, el código de la plantilla no es la siguiente:

Código:

<TITLE></title>

La manera correcta en la que debemos insertar el código sería así:

Código:
<title></title>

2. Los valores de atributos deben estar entre comillas ""

Todos los valores de los atributos que se utilicen deben estar entre comillas simples o dobles. Los siguientes ejemplos no son aceptadas por XHTML:

Código:

<div id=header-wrapper>
<a href=http://elbuenblogger.blogspot.com> Enlace del texto </ a>
<img src=photo.jpg/>
<table width=200 border=0 cellpadding=2>

En su lugar debemos ponerlo de esta manera:

Código:

<div id='header-wrapper'>
<a href="http://elbuenblogger.blogspot.com"> Enlace del texto </ a>
<img src="photo.jpg"/>
<table width="200" border="0" cellpadding="2">

3. Los elementos deben tener etiquetas de cierre

Esto no es correcto a la hora de insertar nuestros elementos:

Código:

<p> Contenido del párrafo

En XHTML, debe haber una etiqueta de cierre con una barra diagonal (/) al final:

Código:

<p> Contenido del párrafo</p>


4. Elementos independientes a que se cierren

Algunos de los elementos están vacíos o independiente. Ellos no son asociados a las etiquetas de cierre. Los ejemplos más comunes son:

Código:

<br>
<img>
<input>
<frame>
<hr>
<meta>
<link>


Sin embargo, en XHTML, estos elementos deben darse por terminada o cerrada. Hay dos maneras de hacerlo. Una forma de terminar el elemento es poner una barra inclinada (/) al final de esta manera:

Código:

<br/>
<img/>
<input/>
<frame/>
<hr/>
<meta/>
<link/>


La segunda forma consiste en añadir una etiqueta de cierre correspondiente de esta manera:

Código:

<br> ... </ br>
<img> ... </ img>
<input> ... </ input>
<frame> ... </ frame>
<hr> ... </ hr>
<meta> ... </ meta>
<link> ... </ link> 

5. Elementos que deben ser colocados correctamente

Esto significa que los elementos deben estar cerrados en el orden inverso. Por ejemplo, este código no es aceptado en XHTML:

Código:

<form> <table> ... </ form> </ table>


No está bien colocada porque el formulario se ha cerrado en primero seguido por la tabla. Para cerrar en el orden correcto, la tabla debe estar cerrada antes que el formulario, de esta manera:

Código:

<form> <table> ... </ table> </ form>


6. Documentar a tener un solo elemento raíz

En el documento XHTML, verá que a excepción de la declaración de tipo de documento, todos los códigos están encerrados entre <html> y </ html>. Este es el elemento raíz y todos los demás elementos o elementos secundarios son en el medio. La estructura del documento se verá así:

Código:

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


7. No minimizar los atributos

En XHTML, todos los atributos deben estar en la forma nombre="valor". Incluso si el valor es el mismo que el nombre, no puede ser minimizado a una palabra


Código:
<img aling=center></img>

Sería así lo correcto:

Código:

<img aling="center"></img>


La próxima vez que vea un mensaje de error en el sentido de que el código no está bien formado, no muy bien analizado, no está bien cerrada, etc, echa un vistazo a esta guía, solucione el problema y probar las posibles soluciones.