comparte el articulo 

Sintaxis de XHTML

Actualizado el 05/12/2011 < > 0 Comentarios

Resumen: Primera entrega de nuestro manual de XHTML y CSS, donde estudiamos la sintaxis básica del código con XHTML, explicando lo que es un elemento, sus etiquetas y atributos.

Siempre que comenzamos a leer sobre un nuevo tema nos resulta bastante difícil empezar a realizar nuestro estudio por las bases, parece más atractivo saltearnos la teoría y buscar ejemplos prácticos que nos permitan ver resultados inmediatos. Esto no es la excepción con HTML, ya que muchos de nosotros en vez de dedicar tiempo a conocer como se sustenta todo, decidimos malgastarlo jugando con imágenes o formas que son básicamente una copia del tutorial que leemos.

Se que suena tedioso o incluso aburrido, pero la teoría es aquella encargada de abrir el camino que deberás atravesar para llegar a crear sitios de manera correcta, te hará la vida más fácil y a largo plazo estudiarla resultará ser la mejor decisión. Es por ello, que en estas primeras entregas del manual estudiaremos prácticamente toda la teoría necesaria para conjuntar los componentes básicos de una página web, sin olvidarnos de mostrar ejemplos prácticos que te ayuden a relacionar inmediatamente el concepto con el código.

Elementos, etiquetas y atributos

HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos.

Por su parte XHTML es una versión mejorada de HTML, por lo que busca tener una sintaxis más estricta que las versiones anteriores de este lenguaje de marcado y tiene menos tolerancia ante errores de marcado o mal uso de etiquetas; pero si seguimos una correcta codificación no tendremos ningún problema y obtendremos todos los beneficios del lenguaje.

La regla básica para la estructuración de xHTML es saber utilizar de manera correcta cada parte de un elemento, tener conocimiento de la función que cumple cada pedazo de código y que clase de contenido albergará. Tomemos la siguiente línea para explicar esto:

<a href='http://www.lawebera.es'>La Webera</a>

Lo que tenemos aquí es un elemento de anclaje que se encarga de definir un enlace hacía una dirección. Esta línea de código esta compuesta por varias partes, una etiqueta de apertura definida por

"<a href='http://http://www.lawebera.es'>"

La cual tiene la función de iniciar el elemento, una etiqueta de clausura

"</a>" 

Cuya función es terminar dicho elemento, un atributo “href” que se encarga de establecer una propiedad que en este caso es un link hacia la dirección que especificamos con la cadena “http://www.lawebera.es”, que se convierte en el valor del atributo, y finalmente tenemos “La Webera” que es a lo que llamaremos el contenido del elemento.

Reglas para manejar etiquetas

Existen reglas simples de seguir diseñadas para tener un manejo correcto de etiquetas con XHTML. Debemos recordar que xHTML no es muy distinto a su predecesor, por lo que no tenemos que olvidarnos de lo que ya sabemos simplemente tenemos que omitir las malas prácticas a las que el HTML no estricto nos acostumbro.

En primer lugar tenemos que definir que XHTML requiere que todas las etiquetas y atributos sean escritos en minúsculas, por ejemplo si queremos declarar un elemento de tipo párrafo tenemos que escribir su etiqueta de la siguiente manera:

<p>

Ya que si escribimos:

<P>

No cumple con esta regla y por lo tanto no puede ser considerado un correcto código XHTML.

El segundo aspecto a considerar es que todas las etiquetas deben cerrarse, es decir deben tener una contraparte compuesta por una diagonal antepuesta al nombre de la etiqueta, siguiendo con el ejemplo del párrafo, una vez que introducimos el contenido debemos cerrar la etiqueta de la siguiente manera:

</p>

Existen excepciones donde un elemento no tiene contenido, tal es el caso de los saltos de línea “br” o algunos elementos de formulario como los “input”, en estas situaciones no hay que incluir una etiqueta de cierra explícita, pero si se debe de agregar la diagonal al final de la etiqueta de apertura de la siguiente manera:

<br />

La tercera regla nos indica que todos los atributos que agreguemos a un elemento deben de tener siempre un valor y estos deben de ir entre comillas, por lo que estará mal agregar una línea como esta:

<a href="http://www.lawebera.es">La Webera</a>

En cuarto lugar tenemos que los elementos deben estar correctamente anidados, es decir que los elementos incluidos dentro de otros se cierren correctamente antes de cerrar el elemento padre. No podemos tener líneas como esta:

<p><a href='http://www.lawebera.es'>La webera es un sitio genial</a></p>

En este caso tenemos que cerrar primero el anclaje y después el párrafo pues de esta manera respetamos la anidación y la jerarquía de elementos evitando la confusión.

Atributos XHTML de uso común

Existe un grupo de atributos que se pueden utilizar en la gran mayoría de las etiquetas, estos son catalogados como de uso común y se pueden especificar aún más en base a su función, por lo que encontraremos atributos básicos, de internacionalización y de eventos.

Atributos XHTML básicos

Los atributos básicos son aquellos que usamos prácticamente en todos lados para rastrear y reconocer elementos, nos referimos a “class”, “id” y “title”, incluso “style” puede caer dentro de esta categoría aunque preferimos mantener al margen dicho atributo ya que las hojas de estilo cumplen mejor con esa función.

Los identificadores están relacionados con el atributo “id” y se utilizan para dar una asociación única al elemento, lo que permitirá manipularlo ya sea con JavaScript o CSS. Como ya se dijo es único por lo que no se debe repetir en otro elemento, en caso de que queramos agrupar distintos elementos con una misma asociación entonces tendremos que usar una clase.

Aquí tenemos un ejemplo de como utilizar identificadores para cada elemento de una lista:

<ul id="ciudades">
<li id="hillo">Hermosillo</li>
<li id="gdl">Guadalajara</li>
<li id="mty">Monterrey</li>
</ul>

Gracias a estos identificadores podemos en un futuro localizar cada elemento de la lista sin necesidad de recorrerla.

Las clases por su parte están relacionadas con el atributo “class”, y nos sirven para cuando hay más de un elemento que necesita una asociación, si tomamos el ejemplo de la lista, podemos agregar una clase que sirva para asociar todos los elementos a los que les agregamos un identificador.

<ul id="ciudades">
<li class="mexico" id="hillo">Hermosillo</li>
<li class="mexico" id="gdl">Guadalajara</li>
<li class="mexico" id="mty">Monterrey</li>
</ul>

Lo que hicimos en el ejemplo es abarcar todos los componentes de la lista con una sola clase a la que llamamos “mexico”, ya que todas las ciudades enlistadas pertenecen a este país.

Por su parte, “title” se encarga de añadir un título a un elemento, es quizás menos utilizado que los dos anteriores atributos pero aún así es importante ya que nos da una idea muy general de lo que contiene el elemento. Esto es comúnmente utilizado con etiquetas como “blockquote” para dar información de donde se ha obtenido la cita, o en links para especificar más a detalle sobre el destino a donde conduce el enlace.

Este atributo tiene la ventaja de ser identificado por los lectores de pantalla y motores de búsqueda por lo ayuda a mejorar la accesibilidad a la información y aumenta el SEO del sitio. También representa una ventaja el hecho de que los navegadores presentan la información que esta contenida en él mediante un pequeño “tooltip” que aparece cuando nos colocamos sobre el elemento.

Atributos de internacionalización

También existen atributos que son utilizados para atender asuntos de internacionalización, es decir el lenguaje que estamos utilizando en la página y la manera en que se encuentra el contenido.

Dentro de esta categoría encontramos a “dir” que se encarga de decirnos la dirección que tendrá el contenido, es decir de izquierda a derecha para textos occidentales o de derecha a izquierda para escritura árabe. También encontramos a “xml:lang” que especifica el idioma del contenido, los valores que puede tomar son la abreviación del idioma, como por ejemplo “es” para español o “en” para inglés.

Atributos de eventos

Existe una clase de atributos utilizados para invocar funciones de JavaScript mediante el manejo de eventos, durante mucho tiempo fueron la mejor alternativa para llevar a cabo esto, pero actualmente su uso no se recomienda pues no cumplen con los estándares. Entre dichos atributos encontramos a onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, etc.

Publicado el 29/11/2011, última actualización 05/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras