He hablado del DOM anteriormente, mencioné algunos conceptos que debemos conocer al manipularlo, ahora quiero hablar acerca de cómo crear un documento XHTML semánticamente correcto.
Antes de continuar, es necesario dar el significado de XHTML eXtensible HyperText Markup Language, ahora bien, el objetivo de XHTML es simplemente mostrar el contenido, en ningún momento modificar la apariencia, sino simplemente escribir la información a mostrar con las correspondientes etiquetas, por ejemplo, un documento puede tener el titulo, párrafos de texto, listados de texto, entre otras cosas mas, OK, he dicho entonces que no modificamos la apariencia, sino únicamente el contenido, para modificar la apariencia existe CSS, un “lenguaje” para modificar el diseño del documento.
En este artículo solo voy a tratar sobre XHTML y no voy a mencionar sobre CSS, en futuros artículos lo haré, lo prometo.
Bueno, una vez teniendo claro esto, manos a la obra, voy a citar las partes que son indispensables en un documento XHTML, y mencionar que toda etiqueta abierta debe ser cerrada.
El DocType
El DocType no es nada más que una especificación, existen varias, cada una de ellas tiene diferencias que la identifican del resto, al especificar el DocType, le estamos diciendo al navegador que estándar vamos a utilizar, personalmente prefiero la especificación XHTML 1.0 Strict, puesto que es el estándar que actualmente es utilizado por la comunidad de desarrolladores, nos permite hacer aplicaciones accesible si lo seguimos al pie de la letra. El código necesario para indicarle al navegador el estándar a utilizar es el siguiente.
[code lang=”strict4xhtml”]
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
[/code]
El root
El root o elemento raíz de un documento, es la etiqueta html, dentro de estas estarán todas las otras etiquetas que necesitemos, si alguna vez escribiste documentos html entonces la única diferencia que hay, es que el DocType que estamos utilizando nos obliga a especificar el lenguaje que contiene nuestro documento, sea Ingles (en), Español (es), Japonés (ja), francés (fr), etc. Entonces esta etiqueta nos queda asi.
[code lang=”strict4xhtml”]
[/code]
En este punto es donde el árbol del DOM se divide en dos nodos, la cabecera y el cuerpo del documento.
El head
Dentro de la etiqueta head, se coloca el titulo de la página, la codificación que usaremos en el documento, links hacia hojas de estilos CSS, JavaScript y algunas etiquetas Meta.
[code lang=”strict4xhtml”]
[/code]
La codificación
Existen numerosos tipos de codificaciones, y muchas veces se hace un lío entre tantas, a grandes rasgos, la codificación es el formato con el que se guardan los caracteres utilizados en la página, para el español la codificación correspondiente es ISO-8859-1, esta contiene los caracteres como la eñe y los acentos en las vocales, otra codificación la cual es recomendable utilizar es la utf-8, ahora bien, existen dos maneras de especificar la codificación a utilizar, una de ellas y la que recomiendo personalmente, es ponerlo dentro del head, de la siguiente manera.
[code lang=”strict4xhtml”]
[/code]
La segunda manera es ponerlo en la primera línea del documento, pero si estas utilizando PHP tendrás algunos problemas, es por eso que recomiendo la primera forma que mencioné, entonces si quieres ahcerlo de esta manera pones la siguiente linia al principio del documento.
[code lang=”strict4xhtml”]
[/code]
El body
La última parte obligatoria que debe tener nuestro documento es el body, dentro de esta etiqueta estará todo nuestro contenido que queremos mostrar al usuario, esta rama del árbol del DOM es la que suele ser la mas grande.
Documento final
Sugiero que copies todo lo que he venido mostrando, y lo pegues en un solo documento, y lo guardes como una plantilla, esto para no tener que estar escribiendo lo mismo cada vez que quieras hacer una página. Juntando todo lo visto en un solo documento, quedaría de la siguiente forma.
[code lang=”strict4xhtml”]
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
[/code]
Agregando contenidos
Los contenidos los ponemos dentro del body, es importante tener en cuenta que solo debemos los elementos de la información que queremos mostrar, y recordar que la apariencia se hace por medio de CSS.
Deberíamos indicar en nuestro documento el titulo de este, para eso lo hacemos con las etiquetas H1, ósea cabecera uno, los párrafos los introducimos dentro de las etiquetas p que significan Paragraph, ejemplo:
[code lang=”strict4xhtml”]
Este es el primer documento que estoy haciendo, teniendo en cuenta que solo tengo que declarar la información o estructura de mi documento, y no intentar hacer el diseño de este con etiquetas, Alguna cita de un autor
[/code]
Como puedes darte cuenta, en el ejemplo anterior hay un titulo, un párrafo, y dentro del párrafo unas palabras a las cuales quiero darle mas énfasis, al igual que una cita de un autor, asi es como se escriben los documentos semánticamente correctos, ahora bien, te estarás preguntando que al ver eso en el explorador se ve mal, no tiene colores ni nada por el estilo, bueno es aquí donde entra CSS para darle estilos al titulo, cambiar el estilo de la tipografía, el color, y modificar todos los aspectos visuales.
Comentarios finales
Es de suma importancia escribir nuestros documentos tal y como he mostrado, de esta forma el árbol del DOM estará creado correctamente y se podrá accederlo fácilmente, además de que al seguir los estándares estipulados, nuestras aplicaciones, sistemas o página podrán ser accesibles a una mayor cantidad de personas.