XHTML se encarga de establecer una estructura, una vista, una interfaz mediante etiquetas, Javascript se encarga de tomar dicha estructura, haciendo llamadas a sus componentes mediante las etiquetas correspondientes, y manejarla de tal manera que nos permita mostrar efectos o realizar operaciones con datos. En pocas palabras, los scripts y objetos para videos no pueden ser considerados partes de XHTML ni CSS, pero son muy importantes al momento de trabajar con una página web, por lo que es relevante para nuestro tutorial.

Elemento script

Es común utilizar Javascript para realizar validaciones de formularios, cambios de estilo, efectos y transiciones, esto puede lograrse mediante su aplicación en el documento XHTML, para lo cual utilizamos el elemento “script” o los atributos de eventos, que han caído en desuso por las mismas reglas implementadas por XHTML.

La etiqueta “script” se encargará de definir un bloque mediante el cual insertaremos un código Javascript dentro de nuestro código XHTML. Puede utilizarse de dos formas, ya sea para colocar un código de script o para llamar a un archivo externo que lo contenga, cualquiera de las dos formas en que lo vayas a utilizar, debes declararlo al final del archivo.

La razón por la que colocamos los scripts al final, es que esto hace que la carga de la página sea más rápida, ya que no se queda esperando a cargar todos los scripts antes de mostrar el contenido y la vista, esto ayuda a mejorar la experiencia del usuario. Hago mención a esto ya que anteriormente se recomendaba poner estas sentencias dentro de la etiqueta “head” de nuestro documento HTML, aún puedes hacerlo no causa ningún problema, simplemente si el script es muy pesado tardará más tiempo en mostrar el contenido.

En base a esto, podemos tener estos dos códigos:

<script type=”text/javascript”>
function lawebera() {
alert("Hola La Webera!");
}
</script>

<script type="text/javascript" src="lawebera.js"></script>

Dentro del archivo “lawebera.js” podemos tener la misma sentencia “alert” o agregar más código. La función “alert” utilizada en el ejemplo creará una ventana de alerta que desplegará el mensaje que le mandamos como parámetro, en este caso “Hola La Webera!”.

Mientras que HTML es nativo en todos los navegadores, Javascript como tal debe ser soportado para funcionar, es por ello que debemos aclarar que debes tener activo Javascript al momento de querer trabajar con script. Por defecto, el soporte a este lenguaje viene activado, así que al menos de que tú o alguna otra persona que use tu computadora lo haya desactivado, no debes tener problemas para utilizar scripts.

En caso de que el usuario que accede a tu página no lo tenga activado puedes incluir un mensaje que le alerte, esto se logra gracias a la etiqueta “noscript”, de la siguiente manera:

<noscript>
<p>No tienes soporte para Javascript, por favor activalo en tu navegador o baja uno más reciente, gracias :)</p>
</noscript>

Atributos de evento

Como ya mencione, estos atributos han caído en desuso pero son un buen tema de estudio para comprender su funcionamiento y la estructura que aún predomina en muchos sitios. En el pasado era común utilizar atributos de eventos para llamar funciones definidas en Javascript al momento de que alguna acción o transición se llevaba acabo, en la actualidad en lugar de utilizar estos atributos se utilizan los selectores en combinación con funciones y mediante algún framework como jQuery o Mootools manipularlos de manera sencilla para que al momento que se realice algo sobre ellos se haga la llamada.

Le llamamos atributos de evento aquellos que describen una acción, como por ejemplo “onload”, “onchange”, “onselect”, “onkeydown”, “onmouseover”, “onmouseout”, entre otros, estos pueden ser llamados en un link, botón o cualquier elemento, dependiendo del tipo de acción a la que hagan referencia.

Por ejemplo si ponemos un link el cual queremos que haga llamada a la alerta que definimos anteriormente, podemos hacer uso del atributo “onclick” y crear un código como el siguiente:

<a href="http://www.lawebera.es” onclick="lawebera();">La Webera 1</a>
<a href="http://www.lawebera.es” onclick="alert('Hola La Webera!');">La Webera 2</a>

Ambos links nos darán un mensaje de alerta al momento de dar click sobre ellos, “lawebera()” es la función que ya habíamos definido en el código anterior por lo que en el contendio de esa función ya esta creado el “alert”.

Conclusión

Esto ha sido una breve introducción a lo que es el mundo del HTML dinámico, existen varios temas que se pueden manejar, pero debido a que este manual hace referencia únicamente a XHTML y CSS debemos concentrarnos sólo en las etiquetas que nos sirven para incluir scripts. Si deseas continuar estudiando sobre este tema te recomendamos que leas otros manuales dentro de nuestro sitio.

Declaración del tipo de documento (codtype)

Este primer consejo parece una obviedad, pero es frecuente encontrarse con que no siempre se utiliza el doctype adecuado. El navegador comienza a leer el código desde la primera línea, en la que se encontrará con la declaración del tipo de documento que se trata, por lo que leerá las etiquetas con que se encuentre en base a ello.

En el siguiente artículo, encontrarán todo lo que necesitan saber acerca de la declaración de tipo de documento:

HTML – XHTML Doctype o versión del documento de una página web

Determinar el juego de caracteres

El contenido de una página web es una sucesión de caracteres. Todos los idiomas tienen caracteres que son especiales y los navegadores deben poder identificarlos para presentarlos en forma correcta. Muchas veces hemos podido ver que cuando se determina mal la codificación de caracteres, la letra “ñ” y las sílabas acentuadas (“á”, “é”, “í”, “ó” y “ú”) aparecen como símbolos. Para evitar que este tipo de errores suceda, debemos declarar correctamente el juego de caracteres que utilizaremos.

Mantener la estructura básica de una web

Este consejo también parece obvio, pero se debe prestar especial atención a la forma en que se estructura una página web. Algunos errores frecuentes, es olvidar el cierre de algunas de las etiquetas elementales, que no siempre es notado porque los navegadores pueden dejar de lado estos errores y presentar la página en forma correcta, pero seguramente estos códigos no pasarán la validación y sencillamente se trata de un código mal escrito.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Mi página web</title>
</head>
<body>
Contenido de la página
</body>
</html>

Inclusión y elección del título de la página

Cuando recién nos iniciamos en el mundo del diseño de páginas web, otorgamos un valor secundario al título de la misma. El título es aquello que se coloca entre las etiquetas “<title>” y “</title>”, y es lo que utilizan los buscadores para indexar la página (es decir, indexar bajo el nombre de:…), pero también es lo que utilizan los visitantes para identificar la página dentro de los millones existentes. Resulta de vital importancia la elección de un buen título para cualquier emprendimiento web.

Escribir las etiquetas en minúsculas

A pesar de que en HTML se pueden escribir las etiquetas tanto en minúsculas como en mayúsculas, debemos tener en cuenta que en XHTML esto no es correcto al igual que en XML, por lo que el pasaje de la escritura de un código al otro se simplifica mucho si tenemos la constancia de escribir siempre las etiquetas con minúsculas.

No olvidar el cierre de las etiquetas

Algo que ya hemos explicado más arriba y representa un error, es olvidar el cierre de las etiquetas. Esto puede pasar desapercibido en algunos casos, ya que cuando no se produce el cierre de una etiqueta que no puede tener elementos del mismo tipo anidados, cuando aparece otra etiqueta de apertura del mismo tipo, interpreta que la anterior fue cerrada.

Sin embargo, cuando se trata de etiquetas que pueden contener elementos del mismo tipo anidados, los navegadores simplemente entienden que dicha etiqueta continúa abierta. Además de producir dificultades y errores en la maquetación de la página, se trata de errores en el uso del lenguaje, por lo que el código no pasará la validación.

Separar la presentación mediante el uso de CSS

La utilización de etiquetas como <Font>, <b>, <i>, <u>, etc., son cosa del pasado. En la actualidad está casi desterrada la inclusión de elementos pertenecientes a la presentación dentro del código HTML o XHTML. La única excepción es cuando se utiliza “style”, pero aún ello es desaconsejado en la mayoría de los casos, ya que pueden utilizarse identificadores o clases para determinar la presentación del elemento fuera del código HTML o XHMTL.

Si se va un poco más lejos, la inclusión del CSS en la cabecera (head) del documento HTML también resulta inconveniente, ya que produce un código muy extenso en las primeras líneas del código y por consiguiente, de carga más lenta. Siempre es mejor utilizar archivos separados para la inclusión del CSS.

Alinear mediante el uso de CSS

Es cierto que la maquetación de páginas web es algo compleja, y que no siempre resulta sencillo hacer que los diferentes elementos que componen la página se comporten como uno quiere, pero utilizar “center”, “align”, crear márgenes con “&nbsp;”, son prácticas incorrectas. Para ello existen atributos CSS que, utilizándolos en forma correcta, nos dan los resultados requeridos.

Utilización de listas

En el artículo “10 consejos útiles para hacer un mejor código” hemos hablado del abuso de la utilización de algunas etiquetas. En este caso, vamos a hablar de etiquetas que son poco utilizadas, sobre todo por los diseñadores nóveles. Se trata de las etiquetas <ul> y <ol>. No solo sirven para presentar listas en el contenido, sino que son muy útiles para que con la aplicación de CSS, se puede realizar menús de navegación, botones, pestañas, tablas, y muchas más cosas.

Declarar correctamente los scripts

Se trata de un error frecuente, generalmente debido a que se copian scripts algo viejos, que no tienen la sintaxis actualizada. Cuando se va a declarar un script se debe utilizar dentro de la misma la palabra “type” y no “language”, que es la forma arcaica de hacerlo:

<script type="text/javascript">

Utilizar correctamente los encabezados <h1>, <h2>, etc.

Es frecuente ver a principiantes utilizar estas etiquetas como forma de modificar la presentación de las fuentes. Por ejemplo, cuando se requiere de una fuente de mayor tamaño que la normal, se agrega texto utilizando una de estas etiquetas. Esto es absolutamente incorrecto.

Cada una de estas etiquetas definen un título de texto o encabezado de primer nivel, segundo nivel, etc., para ordenar en forma adecuada el contenido textual de una página web. Para la presentación de los mismos, siempre debe utilizarse CSS.

Conocer todas las etiquetas HTML y XHTML

Es frecuente encontrarse con diseñadores, aún los experimentados, que no conocen todas las etiquetas HTML o todo el potencial que poseen. <abbr>, <acronym>, <address>, <bdo>, <cite>, <code>, <del>, <dfn>, <ins>, <kbd>, <q>, <samp> o <var>, son etiquetas HTML. En algunos casos su utilización podría ser obviada, pero cuando se las emplea, el código queda más claro para quien lo lee.

La idea es usar las etiquetas apropiadas para cada situación y tipo de texto, dotando de un marcado semántico adecuado, es decir, darle mayor significado al contenido de la web de cara a tus visitantes, a los buscadores, navegadores, etc.

El uso de las etiquetas HTML para texto, al igual que cualquier otro elemento de tu página web, se debe usar combinado con CSS para controlar la expresión exacta de estas etiquetas en pantalla.

Por supuesto no es necesario usar todas estas etiquetas para hacer buenas páginas web, pero sí que conviene saber que existen para poder aplicarlas cuando sea necesario.

La agrupación aquí expuesta es personal, simplemente para ayudar al lector a encontrar un etiqueta concreta para un fin también concreto. Por supuesto se admiten sugerencias.

Etiquetas válidas fundamentales para dar formato a un texto

Resaltar textos

<strong> Texto de mayor importancia</ strong>
Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto. Es una etiqueta importante para el posicionamiento web.

<b>texto en negrita</ b>
La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.

<em> texto en cursiva </ em>
Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.

<h1> títulos y encabezados</ h1>
Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.

<big>texto más grande</ big>
Una forma rápida de aumentar el tamaño de la fuente. Para hacer el texto más pequeño sin usar css se usa <small>.

<sub> subíndice</ sub>
Muestra el texto dentro de estas etiquetas por debajo de la línea normal, a modo de un subíndice.

<sup> superíndice </ sup>
Muestra el texto dentro de estas etiquetas por encima de la línea normal, a modo de un superíndice.

Estructura y disposición de textos en la página

<div>bloque de texto</ div>
Establece un bloque personalizado de contenido en tu página. Se utilizan sobre todo junto con las hojas de estilos para crear capas y estructuras web.

<span> Bloque de texto en línea</ span>
Similar a la etiqueta div, pero el texto contenido dentro de esta etiqueta sigue el flujo normal del resto, mientras que el texto contenido dentro de la etiqueta <div> actúa como un bloque separándolo visualmente del resto. Puedes leer más información sobre elementos y etiquetas en HTML.

Texto preformateado

<pre> texto preformateado</ pre>
Soportes de texto preformateado. Si envuelve alrededor de este texto, que va a seguir la forma
del texto en el código – es decir, sin formato extra tiene que poner pulg Si tienes espacio que en su código, éste aparecerá espaciadas en la página.

<samp> Textos de ejemplo</ samp>
Se utiliza para mostrar un ejemplo en pantalla, por lo general de una salida de un programa, un script, etc. Es similar en uso a la etiqueta <code>.

<code> código</ code>
Establece el texto como código, se usa mucho en páginas como esta, para ejemplos de código fuente.

Citas y Referencias

<blockquote>cita larga</ blockquote>
Sangría todo el bloque de texto de ambas partes y añade saltos de línea superior e inferior. Se utiliza para citas largas.

<cite>cita</ cite>
Muestra una cita (el título de una obra a la que estás haciendo referencia, por ejemplo).

<q>citas pequeñas</q>
Se usa para entrecomillar una cita pequeña. A diferencia de <blockquote>, no presenta el texto en un bloque separado sino que sigue el flujo normal de la página.

<dfn> definición</ dfn>
Pues eso, para formatear un texto en HTML como una definición.

<abbr>abreviaturas</ abbr>
Denota una abreviatura, utilizar el atributo title para darle el significado completo.

<acronym>acrónimos</ acronym>
Lo mismo que la anterior. Sólo que en lugar de para abreviaturas se usa para acrónimos.

Si te interesa, puedes ver ejemplos reales de como se muestran las diferentes etiquetas de texto en la página web de w3 schools.

HTML 4.01 Transitional, Strict, Frameset

Hay tres versiones de HTML 4.01, y cada una tiene sus propios fines, así que lo mejor es que elijas la más adecuada para tu proyecto y tu nivel de conocimiento.

HTML Strict

Es la versión más limpia y simple de HTML. Con este doctype sólo puedes usar las partes del HTML que se refieren a la estructura y, en general, no permite utilizar las partes que se relacionan con el estilo (algunas etiquetas de HTML permiten realizar un diseño básico, pero esto por suerte ha sido reemplazado por el CSS). Si haces tus páginas web basándote en esta versión de HTML te será mucho más fácil pasar a XHTML en un futuro.

HTML Transitional

Esta es la versión mixta. Se permite el uso de etiquetas de estilo, que realmente no tienen cabida en HTML, pero que se introdujeron antes de que el CSS existiera. En general, es mejor mantener el marcado (HTML) y el estilo (CSS) totalmente independiente, ya que esto hace más fácil cambiar el aspecto de la web más tarde, e incluso compartir el mismo estilo en varias páginas web, pero si todavía no dominas HTML y CSS, este doctype seguramente sea la mejor elección.

HMTL Frameset

Esta versión de HTML permite utilizar un conjunto de marcos (frames) en lugar del BOBY, por lo que puedes combinar varias páginas en una sola.

Parece una tontería, pero es muy importante que definas el tipo de documento de tu web, como se muestra a continuación, para obtener una interpretación correcta de tu código fuente en todos los navegadores actuales. Si no lo haces corres el riesgo de que la página no se vea como tu quieres.

Este código debería ser lo primero que aparezca en el código fuente de tu página, antes incluso de la etiqueta HTML. Los tres doctypes para HTML 4.01 son:

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

El DOCTYPE en HTML 5

HTML 5, el futuro del HTML, aboga por el uso de un doctype simple:

<!DOCTYPE HTML>

De hecho, en el borrador se refiere a los doctypes como un "todo inútil, pero necesario", cuyo propósito es asegurarse de que los navegadores interpreten las páginas web de forma correcta. El doctype último hará esto mismo y además de forma simplificada. Si haces una página web en HTML 5, este doctype debería ser tu primera elección, a menos que necesites para validar tus páginas web versiones anteriores de este lenguaje.

XHTML 1.0 Transitional, Strict, Frameset

Utiliza XHTML 1.0 Transitional cuando tu página web se ajuste a las normas básicas XHTML, pero todavía utilices algunas etiquetas HTML para la presentación (estilo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Utiliza XHTML 1.0 Strict cuando tu página web se ajuste a las normas de XHTML y los usos de CSS para la separación total entre contenido y presentación. Puede ser un poco más complicado de validar para diseñadores novatos, pero el resultado final merece la pena. Las páginas son más semánticas y ordenadas:

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

XHTML 1.0 Frameset es idéntico al doctype transitional, excepto en el uso de la etiqueta <frameset> en lugar de <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

XHTML 1.1 declaration. Visita el sitio del WC3 para una visión general y de lo que ha cambiado desde la versión  1,0 de XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML es un lenguaje de marcado, y es por mucho el lenguaje más comúnmente utilizado en la Web. Los lenguajes de marcado dan forma a un documento HTML. Determinan qué partes son encabezados, qué partes párrafos, qué partes listas, qué partes enlaces, etc. HTML significa Lenguaje de Marcas de Hipertexto (Hyper Text Markup Language). El HTML fue desarrollado por el científico Tim Berners-Lee en 1990.

Un archivo HTML es un archivo de texto normal, salvo por el hecho de que contiene etiquetas de formato o marcaje. En HTML, usamos "etiquetas" (tags) para crear la estructura de una página web. Estas etiquetas indican al navegador cómo mostrar el texto y las imágenes en el documento. Los archivos HTML deben tener la extensión .htm o .html para que se interpreten correctamente por un navegador como Internet Explorer. Al ser un archivo de texto, se puede crear un archivo HTML utilizando cualquier editor de texto corriente, como el Bloc de notas, WordPad o MSWord, etc.

Etiquetas lógicas en HTML (logical inline tags)

Las etiquetas lógicas HTML están diseñadas para describir (en el explorador) el significado del texto que encierran. Esto tiene un impacto importante en los motores de búsqueda como Google (y en el SEO), puesto que los buscadores analizan esas "etiquetas" para intentar averiguar de qué trata una página web. Hay muchas etiquetas lógicas en HTML, entre otras:

• <strong>: marca un texto en negrita, denota importancia.
• <em>: destaca un texto – por lo general hace que los navegadores muestren el texto en cursiva.
• <span>: una etiqueta de línea neutral. – Para darle un aspecto diferente se usa CSS.
• <div>: un elemento de bloque neutral. – Para darle un aspecto diferente también se usa CSS.

Aunque estas etiquetas lógicas tienen una forma predeterminada de mostrarse en los navegadores (como Internet Explorer o Firefox), se entiende que el CSS se debería utilizar para darles la apariencia deseada y crear así el diseño de una página web.

Etiquetas de bloque vs etiquetas de línea

En HTML, las etiquetas son "de línea" o "elementos de bloque".

Elementos de bloque en HTML (block elements)

Un elemento de bloque digamos que existe en su propia caja virtual y está siempre seguido por un salto de línea (un enter). En otras palabras, un elemento en bloque rompe el flujo del texto para crear un espacio propio alrededor de sí mismo que ningún otro elemento puede invadir.

Elementos de línea en HTML (inline elements)

Las etiquetas de línea (o elementos de línea), en cambio, sí forman parte del "flujo" del texto en el que se insertan y no forman esa caja virtual de la que hablábamos, ni tienen saltos de línea. Los elementos de línea siguen el flujo normal del texto. Por ejemplo en el siguiente texto:

Este es un ejemplo de un elemento de línea en HTML.

El texto en negrita está contenido dentro de un elemento de línea o inline tag, en este caso <strong>. Aquí el código:

<p>Este es un ejemplo de un <strong>elemento de línea</strong> en HTML.</p>

Así, un ejemplo de una etiqueta de bloque es un <div> (caja) ó un <p> (párrafo) y un ejemplo de una etiqueta de línea es la <b> (negrita). Para entender este concepto lo más sencillo es probar lo que sucede en un texto cuando se introducen ambos, haz la prueba.

Junto con esta guía, te recomiendo que leas los siguientes documentos:

• Conceptos básicos de HTML.
• Normas elementales en HTML.
• Videotutoriales de HTML y HTML básico.
• Como hacer buenas páginas en HTML.
• Todos los capítulos del subapartado Crear una página web de este manual.

Introducción

Cada página HTML debe constar de dos secciones:

1. El HEAD o cabecera, donde está la información sobre la página web, como el título, una breve descripción y algunas palabras clave. También puede contener información de estilos (CSS) y librerías JavaScript.
2. El BODY o cuerpo, donde está todo el contenido que el usuario va a ver en su navegador.

Las siguientes etiquetas HTML se utilizan para construir la estructura básica de una web:

• <html> significa el inicio (y final) del documento.
• <head> significa el inicio (y final) de la sección de cabecera del documento.
• <title> Es el título del documento. Esto se muestra por la mayoría de los navegadores como título de la ventana, cuando agregas una web a favoritos, etc. Los motores de búsqueda  como Google suelen utilizarlo también como título en los resultados de búsqueda, por lo que es muy importante para la optimización de la página web y el SEO en general. Por todo esto, debes escoger muy bien el título de cada página de tu sitio web y procurar que todos sean únicos y descriptivos.
• <body> significa el inicio (y final) del contenido visible del documento (lo que ve el usuario final).

Estructura básica en HTML

Un ejemplo completo de un documento HTML sería (ojo, sólo la estructura básica):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Título de ejemplo</title>
  </head>
  <body>
    <p>¡Esta es mi web!</p>
  </body>
</html>

Junto con esta guía, te recomiendo que leas los siguientes documentos:

• Conceptos básicos de HTML.
• Videotutoriales de HTML y HTML básico.
• Como hacer buenas páginas en HTML.
• Todos los capítulos del subapartado Crear la página web de este manual.

Etiquetas y elementos HTML son interruptores on / off para los distintos tipos de formateo de texto. A menos que se especifique lo contrario, todo etiqueta de apertura (como <head>) necesita un cierre ( un "off") en su etiqueta de final (</ head>). Ejemplo:

<html>
...
</html>

Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace que sea más fácil seguir tu propio marcado y que sea más fácil de leer. Además, en el momento en el que estés preparado para dar el salto a XHTML (el lenguaje que está pensado para reemplazar a HTML) te será más fácil, ya que en XHTML todas las etiquetas deben cerrarse.

Con frecuencia verás diseños HTML con código indentado como el que se muestra a continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme otras estructuras diferentes. Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué etiquetas. Por ejemplo, esto es claramente erróneo:

<p>
<strong>
    texto en negrita
  <em>texto en negrita y cursiva
texto sólo en cursiva
  </em>
</ p>

Sin embargo, esto es válido:

<p>
 <strong>
   texto en negrita
    <em>
      texto en negrita y cursiva
    </em>
   </strong>
   <em>
    texto solo en cursiva
   </em>
</p>

Etiquetas, elementos y atributos

Ya hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una representación interna de lo que leyó. Esta representación interna se conoce como un elemento. Entonces, el navegador “decide” cómo mostrar el elemento en la pantalla. Además, no todos los elementos se muestran en pantalla (como el HEAD),y por el contrario algunos elementos siempre existen, incluso si no los creaste en tu código fuente (como el HTML, HEAD o BODY).

Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede aceptar el parámetro HREF, que lo convierte en un enlace. Estos parámetros son conocidos como atributos, y se crean así:

<a href="nombre-de-archivo.html">

Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en cualquier circunstancia. Algunos diseñadores web tienden a utilizar mayúsculas para destacarlos en el código fuente, otros escriben todo en minúsculas para hacerlos más fáciles de traducir a XHTML más tarde si es necesario. Mi consejo es que adoptes esta segunda opción, lo lógico es con el tiempo acabar creando páginas en XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML.

Que una web sea compatible con todos los navegadores significa que se vea igual (o muy similar) en todos ellos. Obviamente esto es bastante complicado, podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Explorer, Firefox, Opera, Safari y Mozilla. Si consigues que se vea bien en estos 5, conseguirás que el 99% de tus usuarios vea correctamente tu web.

El problema radical en que no todos los navegadores interpretan en código HTML y CSS de la misma manera, entre ellos existen pequeñas variaciones que son las que hacen que el resultado no sea el mismo de unos a otros. Algunas de esas diferencias son tan importantes que pueden hacer que partes de tu web no funcionen o no se vean, y como el propósito de hacer una web es que la vea el mayor número de personas (y que éstas la vean correctamente), nos interesa que la web funcione en el mayor número de navegadores posibles.

Por tanto, a la hora de hacer una página web no es suficiente con preocuparse por centrarnos en la audiencia adecuada, registrar un nombre de dominio rompedor o tener un diseño agradable al usuario. Todo esto puede verse ensombrecido si un usuario no ve la página correctamente al entrar con un navegador que no has tenido en cuenta al crearla.

Para que veas un ejemplo leve de lo que hablamos, aquí puedes apreciar como se ve una página web en diferentes navegadores. Por supuesto es ficticia y el diseño está hecho descuidado a propósito:

Como hemos dicho, hay casos de incompatibilidad más graves en los que el diseño se desajusta, no cabe completo en pantalla, scripts o menús que se comportan de manera diferente de un navegador a otro… en fin, un desastre, sobre todo si tu web es un negocio en línea o una página de empresa que requieren cuidar el aspecto al máximo para atraer al cliente.

Mejorar la compatibilidad con navegadores

Validar el código de tu sitio web

Validar el código de tu web en base a los estándares del W3C es un buen hábito que conviene que cojas cuanto antes mejor. Básicamente consiste en escanear tu web en busca de errores de programación para una vez detectados poder corregirlos. Además, a parte de detectar errores de codificación te proporciona una breve explicación del error, por lo que aprenderás cosas nuevas validando tu web. Tener una página sin errores es importante porque maximiza la compatibilidad entre navegadores al mismo tiempo que te asegura que tu código siga valiendo para futuras revisiones de HTML, CSS, etc.

Tómate tu tiempo para validar el código CSS de tu web. Eso hará que te sea más fácil conseguir que tu sitio se vea igual en los distintos navegadores ya que hará que tengas un código más limpio y sobre todo sin errores.

Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones hacerlo manualmente la tarea será difícil y larga. Además, es muy sencillo que se te pasen errores, mientras que usando herramientas online no ocurrirá. El validador de CSS del W3C es la mejor opción para ello, ya que esta entidad es la que se encarga de crear los estándares de la web.

Resetear los estilos CSS

Si no usas ningún estilo CSS en los elementos de tu página igualmente tendrán un aspecto determinado. Los títulos tienen una tamaño según su importancia (H1, H2, H3…), los márgenes tienen un tamaño determinado, las citas llevan sangría, etc. Muchos de estos valores por defecto, son iguales de unos navegadores a otros pero otros no, y esos precisamente son los que te crearán problemas a la hora de conseguir que tu web se vea igual en los diferentes navegadores, ya que por mucho estilo que les des, su valor predeterminado sigue contando.

Por eso, resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar para prevenir el problema de la incompatibilidad entre navegadores, ya que por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Así, los márgenes, espacios y tamaños de fuente de títulos (entre otros) pueden tener diferentes propiedades por defecto de un navegador a otro y provocar que se vean diferentes por mucho formato que le demos nosotros. Al resetear el CSS digamos que ponemos a cero esos valores por defecto y podemos empezar desde el principio a dar el formato que nosotros queramos, controlando el aspecto de cada elemento mucho mejor. Para resetear el CSS se escribe un código CSS al principio de tu hoja de estilos, y después todo lo que tu vayas creando. El código de Eric Meyer es una de las formas más conocidas que tenemos de resetear el CSS de nuestra web, muy efectivo:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

Por otro lado, una forma más sencilla, aunque no tan completa, de anular los valores por defecto que más problemas suelen dar (margin y padding) es poner el siguiente código al principio de tu hoja de estilos y luego las reglas que vayas creando:

* {margin:0; padding:0}

Lo que hace este código es dar un margin y padding de 0 a todas las propiedades CSS.

Evidentemente no es tan completo como el anterior código, pero si no quieres complicarte mucho la vida o necesitas ahorrar espacio reduciendo la hoja de estilos, este código también quita muchos problemas.

Usa técnicas soportadas

CSS ofrece un montón de técnicas para mejorar el aspecto de nuestras páginas web, pero no todas son bien soportadas por los navegadores. Lo mejor es intentar evitar el uso de propiedades que puedan causarnos problemas con algunos navegadores, en especial con los más usados por los visitantes (IE, Firefox…). En general, usando buenas prácticas en CSS minimizamos el riesgo de incompatibilidades entre navegadores.

Diseñar para Firefox, no para Explorer

Una de las cosas que han hecho a Firefox tan popular es que es uno de los más completos navegadores en cuanto a respetar los estándares web se refiere. Y como él hay muchos otros (cada vez más) que se preocupan por seguir al máximo los estándares del W3C. Por tanto, diseñando para Firefox estamos minimizando el uso de reglas indebidas o malinterpretadas, ya que el aspecto que nos devuelve el navegador de lo que programamos se acerca mucho más a la regla general que diseñando en Internet Explorer.

Diseñar optimizando para Firefox hace de nuestro código un código más limpio, más estándar, y por tanto más universal. Una vez funcione en Firefox, puedes empezar a pensar en que tu sitio se vea bien en Explorer. Si lo haces al revés, cuando consigas que se vea bien en Explorer tendrás que ir arreglando el código para que se vea bien uno por uno en el resto de navegadores, mucho más trabajo ¿no?.

Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.

Etiquetas básicas

• <HTML>: indica el comienzo del documento HTML.
• <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
• <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
• <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
• <A>: define los enlaces.
• <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.
• <P>: el texto dentro de esta etiqueta forma un párrafo.
• <IMG>: imágenes.
• <BR>: salto de línea.
• <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.
• <B> y <STRONG>: se utilizan para resaltar el texto.
• <U>: texto subrayado.
• <I>: texto en cursiva.

Ejemplo de página básica

<html>  <head>

  <title>Título de la página</title>

  </head>

<body>

<h1>Encabezado de la página</h2>

<h3>Encabezado de menor tamaño</h3>

<p>Este es el texto de un párrafo.</p>

  <p>Este es el texto de otro párrafo. Dentro de este párrafo,

  pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo

  que quieras.</p>

<p>También podemos poner listas como la siguiente:</p>

  <ul>

     <li>Guión número uno.</li>

     <li>Guión número dos.</li>

     <li>Guión número tres.</li>

     </ul>

</body>

  </html>

Y para que lo entiendas mejor, una página básica con su correspondiente código HTML:

(pincha para agrandar)

La página de inicio

La página de inicio de tu web es la puerta principal de acceso a tu web. Por ella entrarán la mayor parte de visitantes, por lo que hay que cuidar al máximo cada detalle.

Si tu sitio web es pequeño, puedes permitirte el lujo de enlazar a todas las páginas de tu web desde la página principal, así el usuario tiene a su alcance toda la información disponible en el sitio. Pero en muchos casos incluir un enlace a cada página convertiría en un caos a la portada del sitio debido a la gran cantidad de páginas internas. En estos casos lo más conveniente sería enlazar a las secciones principales de la web, desde las cuales se enlazaría al contenido de esa sección concreta, etc.

Menú de navegación

El menú de una página web es la principal herramienta de navegación que le podemos facilitar al visitante para que encuentre lo que busca. Es imprescindible para que las personas encuentren las demás páginas de la web, además del índice.

Los menús de navegación son básicamente listas de enlaces a las diferentes páginas o secciones de la web. De su estructuración dependerá en gran medida que los visitantes encuentren lo que buscan, por lo que es conveniente pensarse dos veces cómo hacerlo antes de implementarlo en la web.

Hay varios tipos de menús de navegación; podemos encontrarlos en disposición horizontal;

O vertical;

Como mencionamos antes, para sitios web con un número de páginas pequeño puede ser bueno enlazar a todas ellas desde cada página para que el usuario tenga en todo momento la información disponible en la web a su alcance. Por ejemplo, si es una página web informativa sobre tu empresa y no tiene otra finalidad, puede que cuente con 10 ó 15 páginas en total, las cuales pueden perfectamente ser enlazadas desde cada página individual. Sin embargo, cuando una web contiene mucha información este tipo de menús tiene poco sentido, porque entonces tendríamos menús con cientos de enlaces, algo excesivamente largo para ser usable. Lo normal en estos casos es enlazar desde la página principal a las secciones más importantes, y desde cada una de ellas a sus contenidos concretos.

Pie de página

El pié de página de la web también puede usarse para mejorar la navegación del sitio. Normalmente no se utiliza para poner enlaces a todas las secciones (para eso ya está el menú), pero sí para poner enlaces importantes o que consideras que deben aparecer en todas las páginas de la web, por ejemplo información legal sobre tu empresa, direcciones de contacto, políticas de uso del sitio, etc.

Evitar páginas huérfanas

Una página huérfana es aquella desde la cual no se puede acceder a ninguna otra. Cuando el usuario se encuentra con una de estas páginas la confusión y el enfado pueden ser importantes. Es cierto que dándole al botón “atrás” del navegador o modificando el campo de la url puede llegarse perfectamente a otra página del sitio, pero no todo el mundo tiene porqué saberlo, y hacer a la gente molestarse demasiado en navegar por un sitio es signo de falta de usabilidad web. No cuesta nada poner en cada página al menos un enlace a la principal.

Enlazar siempre al índice

Una de las formas de evitar páginas huérfanas y que mejora sin duda la navegabilidad de una web es incluir en cada página del sitio un enlace al índice.

Parece bastante extendido el enlazar a la página principal del sitio mediante el banner o logo de cabecera. Así, el usuario siempre tiene un recurso para volver al principio y buscar lo que necesita.

Ruta de acceso o ¿dónde estoy?

Es frecuente que aunque el usuario pueda navegar con facilidad por las páginas de tu sitio no sepa exactamente donde está. Para evitar esto es muy útil incluir el camino que se sigue desde la página principal, pasando por las secciones (principales) hasta la página concreta en la que se encuentra el usuario. No hace falta que indiques cada uno de los pasos, con los más importantes es suficiente, no es cuestión de que se convierta en una guía interminable. Un ejemplo de esto lo encontramos en LaWebera.es:

Es conveniente que cada parte de la ruta tenga su enlace correspondiente, de forma que el usuario pueda ir a esa categoría si lo desea. Sin el enlace a cada sitio, la ruta de acceso pierde sentido ya que le dice al usuario donde está pero no le da alternativas.

Incluir un buscador

Para páginas web con mucho contenido es realmente útil la inclusión de un buscador interno que permita a los usuarios buscar directamente los temas que le interesan. Páginas web didácticas, de manuales, etc. son sitios que tienen mucho contenido distribuido a su vez en muchas páginas. Buscar una información concreta en ellas puede ser complicado dado el volumen de archivos que contienen. Los buscadores mejor la experiencia del usuario en el sitio web y le ayudan a ahorrar tiempo en su búsqueda de información.

Hay herramientas gratuitas muy buenas para poner un buscador en tu web. Por ejemplo: Google Co-op o Atomz.