Publicado por Juan Pablo el 16.Jul.2006 | Comentarios (14)
Una de las cosas que distinguen a un profesional de una amateur es su forma de hablar, la forma de referirse a los tópicos de su área. A menudo veo (mejor dicho:leo) gran ignorancia al momento de referirse a los elementos, etiquetas y atributos en XHTML. Si quieres ser un profesional, actúa como tal. Podré sonar purista, pero creo que siempre hay que marcar la diferencia con tanto aficionado que anda por ahí con el cartel de "Desarrollador Web". No te ofendas si lo eres y no te interesan estos detalles tan pequeños; por el contrario, te invito a refrescar un poco la memoria, Aquí vamos:
Un elementos en XHTML es una abstracción, es un pequeño componente que está dotado de un significado semántico. Ejemplo:
En general, un elemento está compuesto de 3 partes:
¿Te diste cuenta?, ha salido un nuevo concepto en la definición de Elemento: "Etiqueta".
Una etiqueta es usada para marcar el inicio y el final de un Elemento. Por lo general, una etiqueta está compuesta de:
¡Perfecto!, ya tenemos los condimentos básicos para presentar un Elemento en XHTML:
En la ilustración tenemos en gloria y majestad al Elemento p
. Un concepto más: La etiqueta (o tag) de fin se diferencia de la de inicio colocando una diagonal (/) —más conocida como slash— justo antes del nombre del elemento.
En XHTML existen elementos que no tiene contenido ni etiqueta de fin, a estos se les llama elementos vacíos, por ejemplo:
img
, input
, link
, br
.Para preservar la compatibilidad hacia atrás con HTML en tus documentos XHTML debes agregar un espacio y una diagonal justo después del nombre: ejemplo:
<br />
Ya lo sabes, todos los elementos vacíos deben tener espacio y diagonal al final de la etiqueta.
Cuando definimos la composición de un elemento dije "En general", sí porque también los elementos pueden tener atributos, vamos allá.
Los elementos pueden tener asociadas propiedades, las que se representa en una paridad atributo/valor. El atributo debe estar dentro de la etiqueta de inicio, justo antes del mayor que (>). No hay restricción para la cantidad de atributos. En XHTML no pueden haber atributos sin valor, Ejemplo:
<p id="pie">texto</p>
Lo citado es un elemento p
con un atributo id de valor pie. Veamos otro ejemplo con más atributos:
<p class="destacar" id="p-1" lang="en">Hello</p>
Elemento p
con atributo class de valor destacar, atributo id de valor p-1 y con atributo lang de valor en.
Un error bastante común entre los desarrolladores que lidian con documentos XHTML es el relacionado con el atributo selected del elemento option
, como dije debe haber siempre un atributo/valor :
<option selected="selected">opción</option>
La minimización de atributos está prohibida en XHTML.
alt
es un atributo, no una etiquetaFinalmente lo que motivó mi entrada, al atributo alt
¡no es una etiqueta (o tag)!. Es un atributo usado para otorgar un texto alternativo a elementos no textuales, como por ejemplo el elemento img
.
Apegarse a los conceptos es sonar profesional y conocedor de nuestra labor. Dedica tiempo a estudiar, el hacerlo siempre te traerá beneficios para enfrentar y entender mejor las nuevas tecnologías.
Enlace Permanente, Comentarios (14), Publicada en: XHTML
¡Que entrete!.. A mi me gustaría mucho poder incluir articulos de este tipo en mi sitio, pero siempre tengo algo que hacer. :(
Ahora, si complementas este post con el uso de los diferentes DocTypes sería de lujo.
Saludos!
@Jorge: De eso hablé hace muuuucho :)
¡Rayos! ...Bueno, despues de todo no es malo que quienes lean esta entrada sepan lo de la primera piedra.
Esto de Elementos, etiquetas y atributos es la base para trabajar tecnologias AJAX, ya que asi tienes un control completo de tu sitio gracias a getElementById y getElementByName ...
Saludos y excelente articulo :)
Genial man. La verdad es que me encanta encontrarme con artículos tan claritos. Ayudan muchísimo a los que comienzan ;-)
Y que opina del alt="", ¿Correcto o incorrecto?
@RoQ: "Si hay atributo DEBE haber valor" :)
A eso me refiero, muchas veces uno ve webs que validan correctamente y en el codigo aparece el bendito alt="" unicamente para que la web pase la validacion, lo cual me deja con esa interrogante, ya que para algunos no es estrictamente necesaria.
¡Bravo juque! Cuando vi el diagrama de la composición de un elemento, lo único que extrañé fue una mención a "semántica", que la mencionas antes. En este caso sería algo como: "Semántica: párrafo, bloque de una o más ideas relacionadas."
Lo otro bueno es para el <a href="blabla" title="TITULO DEL LINK DONDE TE LLEVA" />
:)
RoQ — acordate que el atributo alt
es una descripción de una imágen. Es sumamente importante para cuando tenemos las imágenes deshabilitadas, o para algún software lector de pantalla. No sirve poner solamente dobles comillas, pasará el test de validación pero al usuario no le dice nada ...
Al manejar lenguajes de marcado(XHTML) y programación (Javascript, PHP) se confunden a veces los términos, aunque seas profesional.
RoQ, si el alt no es necesario, significa que esa imagen debió estar aplicada desde el css ya que es un elemento de estilo y no un elemento de información.