Curso de HTML y XHTML para CSS - Resumen de la segunda semana
Menos mal que existe el caché de Google, ya que el curso que comencé el pasado 27 de abril va por su cuarta semana, y han eliminado de su servidor la segunda semana. Ahí tenéis mi resumen de la segunda semana, directamente sacada del caché de Google.
Uso de HTML y XHTML
HTML, como todos los lenguajes de ordenador, tiene una serie de reglas que definen lo que se puede y lo que no se puede hacer. Aún así, no necesitamos leer esta gramática, simplemente saber usarla según nuestras necesidades.
Desde nuestro punto de vista, lo importante es entender que un documento HTML contiene simplemente elementos. Y que un elemento es un contenedor de información (texto, enlaces a otros recursos, otros elementos).
Elementos en detalle
Un elemento se compone, generalmente, de estas partes:
- Etiqueta de apertura
- Contenido
- Etiqueta de cierre
La etiqueta de apertura
La etiqueta de apertura comienza (o delimita) un elemento. Tiene los siguientes componentes:
- El símbolo menor que (<) seguido por el nombre del elemento. (<p de párrafo, <a de enlace, etc.)
- Un elemento tiene cero o más atributos, que son cualidades adicionales del elemento (identificador, url, etc.) La sintaxis de un atributo es muy simple: el nombre del atributo, el símbolo igual (=) y el valor entre comillas (id=”cabecera”)
- El símbolo mayor que (>) para cerrar la etiqueta
Elementos vacíos y elementos no vacíos
Hay elementos que tienen contenido, y otros que no. Los elementos vacíos sólo pueden tener atributos, como por ejemplo una imagen:
<img src="/imagen.jpg" alt="Imagen"> (HTML)
<img src="/imagen.jpg" alt="Imagen" /> (XHTML)
En este caso, al no existir etiqueta de cierre, si usamos XHTML, debemos cerrar dicha etiqueta terminándola con ” />”. Debe insertarse un espacio justo antes de la barra para asegurar que los navegadores antiguos lo interpretan correctamente.
Contenido
Los elementos no vacíos pueden contener texto y otros elementos, que a su vez pueden ser vacíos o no vacíos.
La etiqueta de cierre
Mientras que en un elemento vacío su etiqueta de apertura se usa también para su cierre (” />”), en un elemento no vacío, el cierre se efectúa siempre de la misma forma, con el símbolo menor que (<) seguido de una barra (/), el nombre del elemento y el símbolo mayor que (>). (</p>, </h1>, etc.).
Elementos con cierre implícito
En HTML hay elementos que no requieren etiquetas de cierre, ya que se cierran de manera implícita con el siguiente elemento de bloque.
Sin embargo, en XHTML, todos los elementos deben cerrarse de forma explícita. Se recomienda también dicha práctica para HTML.
Distinción entre etiquetas y elementos
Es muy común confundir ambos términos. Sin embargo, hay que tener muy claro que no son lo mismo. Las etiquetas nos sirven para conformar los elementos que necesitamos. <p> es una etiqueta, y </p> es otra etiqueta, y con esas dos etiquetas conformamos el elemento p (párrafo) que necesitamos.
HTML vs XHTML
Sensibilidad a mayúsculas y minúsculas
El uso de mayúsculas y minúsculas es indistinto cuando escribimos HTML. En ese caso, tanto <HEAD> como <head> como <Head> son equivalentes. Fue convención entre los desarrolladores HTML el uso de mayúsculas para los nombres de elementos (<HEAD>) y el uso de minúsculas para los nombres de atributos (id=”titulo”).
En XHTML, tanto los nombres de los elementos como los de los atributos deben ir en minúsculas, ya que XHTML es una aplicación de XML, XML es sensible a mayúsculas y minúsculas, y la definición de XHTML usa minúsculas para todos los elementos y atributos.
Sintaxis de HTML vs XHTML
Hemos visto que los lenguajes son casi idénticos, salvo las siguientes pequeñas diferencias:
- Los elementos vacíos deben usar ” />” para cerrarse. Incluir un espacio antes de la barra para asegurar la compatibilidad con navegadores antiguos
- Todos los elementos no vacíos requieren una etiqueta de cierre
- Todo el código se escribe en minúsculas
Por lo tanto, es recomendable seguir siempre estas pautas tanto para mejorar los desarrollos como para asegurar la compatibilidad hacia atrás.
