1. Lenguajes de marcado¶

HTML (HyperText Markup Language) es el lenguaje declarativo en el que están escritas las páginas web y es la piedra angular de la web. En este tema, aprenderemos sobre HTML centrándonos en las versiones más recientes del lenguaje.

Nota

HTML es un estándar vivo, mantenido por el grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group). Échale un vistazo por encima a la especificación. Otra entidad, el W3C (World Wide Web Consortium), empaqueta la especificación estándar de vez en cuando y le asigna un número de versión (por ejemplo, 5.0 en 2014, 5.1 en 2016 o 5.2 en 2017). El W3C sí es el principal responsable de otros estándares de la web como CSS, que estudiaremos más adelante.

Importante

Las habilidades que deberías adquirir con este tema incluyen las siguientes:

Entender la diferencia entre un lenguaje de marcado con propósito semántico como HTML y un lenguaje de estilo.
Conocer la semántica de los elementos de HTML discutidos en clase.
Gestionar correctamente diferentes codificaciones de caracteres.
Saber crear documentos HTML válidos.
Usar correctamente las herramientas de desarrolladores integradas en navegadores; en particular, las Chrome DevTools.
Entender el papel jugado por un servidor web y cómo publicar en él contenido estático.

1.1. Sintaxis y elementos del lenguaje HTML¶

HTML es el lenguaje informático básico que se usa para escribir el contenido de las páginas web (por otro lado, CSS se usa para especificar los aspectos estéticos que afectan a la presentación de las páginas y JavaScript para programar los aspectos dinámicos). En esta actividad vas a conocer los elementos fundamentales de HTML. Te basarás para ello en el código de la página web mínima que aparece a continuación, que iremos ampliando con otros elementos del lenguaje.

Atención

La forma normal de trabajar con HTML es usar tu editor de texto favorito para editar el fichero y abrir el documento resultante (con extensión .html) en un navegador. No obstante, cuando se dan los primeros pasos en el aprendizaje del lenguaje puede ser más cómodo usar entornos en línea como JSBin, que evitan tener que guardar y recargar constantemente. Hay otras herramientas similares como JSFiddle o CodePen, pero son menos recomendables desde el punto de vista educativo, ya que ocultan ciertas partes del documento HTML (por ejemplo, la cabecera) para no distraer al usuario con elementos obvios.

Una de los documentos web más sencillos que se pueden escribir es el siguiente. Comienza con la declaración de tipo de documento (doctype). Le sigue el elemento (o etiqueta) raíz html con un atributo opcional lang que indica el idioma del texto. El elemento head incluye metadatos sobre el documento: en este caso, la codificación de caracteres utilizada (hablaremos sobre ello más adelante) y el título del documento que aparecerá en la pestaña del navegador. El elemento body contiene el texto principal del documento, que en este caso es un único párrafo (elemento p) con un saludo.

Un documento HTML válido y corto.¶

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Título del documento</title>
  </head>
  <body>
    <p>¡Hola, mundo!</p>
  </body>
</html>

Una de las ideas que tienes que tener más claras es que los diferentes elementos de HTML no representan propiedades estéticas de su contenido (como, por ejemplo, si un texto se muestra en negrita o si se ha de mostrar separado del texto precedente por un espacio vertical), sino únicamente propiedades semánticas (este texto enfatiza una determinada idea o este otro texto constituye un párrafo). Los aspectos estéticos se definen mediante lenguajes de estilo como CSS, que estudiaremos más adelante. Esta separación de presentación y contenido hace que el documento HTML sea independiente de la representación visual, táctil o auditiva que hagamos de él: en diferentes contextos podrían usarse diferentes hojas de estilo para el mismo documento; o un screen reader podría usar el contenido del bloque nav para permitir a una persona ciega elegir directamente qué sección del documento desea escuchar o consultar en un terminal braille; o un programa que procesa automáticamente un documento HTML (por poner un ejemplo, un buscador) no tendría que lidiar con aspectos secundarios meramente cosméticos. Además, gracias a la externalización de los estilos en un fichero aparte, es posible reutilizar los mismos estilos en múltiples documentos de HTML sin tener que duplicar su definición.

Atención

Una parte importante de la sociedad tiene alguna discapacidad (visual, motora, intelectual…), ya sea congénita o adquirida (por enfermedad, accidente o edad, por ejemplo), que le puede dificultar la interacción con una página o aplicación web si esta no se desarrolla adecuadamente bajo principios de accesibilidad que atiendan a la diversidad funcional de la sociedad. El uso de HTML como lenguaje de anotación semántica de contenido es uno de los principios fundamentales para cumplir este objetivo.

HTML tiene aproximadamente un centenar de elementos diferentes, cada uno de ellos con un propósito semántico bien definido. En este curso vamos a estudiar un subconjunto de ellos, cuyo cometido puedes consultar en MDN web docs y que se muestran en este documento más completo.

Hazlo tú ahora

La especificación estándar de HTML es un documento demasiado técnico para los propósitos de este curso y para la mayoría de los desarrolladores. La web MDN muestra esta información de forma más sencilla. En principio, acostúmbrate a usar esta web como referencia, frente a otras que pueden aparecer más arriba en los resultados de los buscadores. Usa la versión en inglés, ya que otros idiomas no siempre están actualizados. Estudia en MDN web docs todos los elementos de HTML que aparecen en este tema y asegúrate de que entiendes su propósito. Elementos adicionales, como los relacionados con los formularios, se estudiarán en otro tema. Reserva cita para tutoría si crees que no lo tienes todo claro.

El código del documento HTML más completo enlazado anteriormente es el siguiente:

<!DOCTYPE html>
<!-- <!DOCTYPE> informa al navegador de qué versión de HTML se usó para escribir el documento; desde 
     HTML5 se usa simplemente la forma anterior -->

<!-- Definiciones de elementos tomadas de MDN web docs, developer.mozilla.org -->

<!-- El elemento <html> contiene todo el documento HTML; el atributo lang indica el idioma del contenido -->
<html lang="es">

  <!-- El elemento <head> provee información general (metadatos) acerca del documento, incluyendo su 
       título y enlaces a scripts y hojas de estilo -->
  <head>

    <!-- El elemento <meta> aporta metainformación del documento; el atributo charset de <meta> indica 
      la codificación de caracteres del documento: -->
    <!-- <meta> es un ejemplo de "elemento vacío", que no requiere etiqueta de inicio y de fin;
         en versiones anteriores del estándar, estos se elementos se representaban con una barra
         al final: <meta charset="utf-8"/> -->
    <meta charset="utf-8">
    <meta name="author" content="Franz de Copenhague">

    <!-- El elemento <title> indica el título del documento: -->
    <title>Blog del profesor Franz de Copenhague</title>

    <!-- El elemento <script> carga la librería de JavaScript MathJax que permite mostrar ecuaciones dentro de páginas
         web: -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML'></script>

    <!-- La librería de JavaScript chessboard-element permite define un componente web que permite usar
         el elemento personalizado chess-board (que no pertenece al estándar) en el documento -->
    <script type="module" src="https://unpkg.com/chessboard-element?module"></script>
  </head>

  <!-- El elemento <body> representa el contenido de un documento HTML; solo puede haber un 
       elemento <body> en un documento: -->
  <body>

    <!-- El elemento <header> representa un grupo de datos introductorios o de navegación; puede 
         contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un 
         nombre de autor y otros componentes -->
    <header>

      <!-- Los elementos de encabezado implementan seis niveles de encabezado del documento; <h1> es el 
           más importante y <h6> el menos importante; un elemento de encabezado describe brevemente el 
           tema de la sección que presenta -->
      <h1>Blog del profesor Franz de Copenhague</h1>
    </header>

    <!-- El elemento <nav> representa una sección de una página cuyo propósito es proporcionar enlaces de 
         navegación, ya sea dentro del documento actual o a otros documentos; ejemplos comunes de secciones 
         de navegación son menús, tablas de contenido e índices -->
    <nav>

      <!-- El elemento <ul>, de "unordered list", representa una lista no ordenada; cada elemento va 
           dentro del elemento <li> -->
      <ul>
        <!-- El elemento <a> es la base del hipertexto; a través del atributo "href" se indica el 
             documento al que se saltará si se activa el enlace; en este caso, se enlaza a un
             elemento del documento actual etiquetado con un id -->
        <li>Reflexiones sobre <a href="#física">física cuántica</a></li>
        <li>Reflexiones sobre <a href="#ia">inteligencia artificial</a></li>
      </ul>
    </nav>

    <!-- El elemento <main> representa el contenido principal del <body> de un documento o aplicación -->
    <main>

      <!-- El elemento <section> representa una sección genérica de un documento -->
      <section>
        <h1>Reflexiones sobre ciencia del profesor Franz de Copenhague</h1>

        <!-- El atributo global id define un identificador único que no debe repetirse en todo el documento;
             su propósito es identificar el elemento al vincularlo en scripts, hojas de estilo u enlaces -->
        <section id="física">
          <h2>Entradas sobre física cuántica ⚛</h2>
          <!-- Teclear caracteres Unicode en Linux: Ctrl+Mayús+u 269b espacio: ⚛; otros sistemas operativos 
               tienen sus propias combinaciones de teclas -->

          <!-- El elemento <p> es el apropiado para distribuir el texto en párrafos -->
          <!-- El elemento <strong> es el apropiado para marcar con especial énfasis las partes más 
               importantes de un texto -->
          <p>Esta sección incluye mis artículos <strong>recientes</strong> sobre física cuántica.</p>

          <!-- El elemento <article> representa una composición auto-contenida en un documento, página, 
               o aplicación que se podría distribuir de forma independiente o reutilizable;
               podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de 
               blog, un comentario de un usuario o cualquier otro elemento independiente del contenido -->
          <article>

            <h3>Consecuencias del entrelazamiento cuántico</h3>
            <p>El entrelazamiento cuántico se define como lorem ipsum dolor sit amet, consectetur adipiscing elit, 
              sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
              exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>

            <!-- El elemento <table> representa datos en dos o más dimensiones; cada fila se incluye dentro del
                 elemento <tr> y cada celda dentro del elemento <td> (o <th> para el encabezado de la tabla) -->
            <table>
              <!-- El elemento <thead> representa el encabezado de la tabla donde suelen aparecer los nombres de
                   cada campo -->
              <thead>
                <tr>
                  <th>Encabezado 1</th>
                  <th>Encabezado 2</th>
                </tr>
              </thead>
              <!-- El elemento <tbody> encapsula una lista de filas de tabla que corresponden al cuerpo de la
                   tabla -->
              <tbody>
                <tr>
                  <td>a</td>
                  <td>b</td>
                </tr>
                <tr>
                  <td>c</td>
                  <td>d</td>
                </tr>
              </tbody>
              <!-- El elemento <tfoot> representa el pie de la tabla -->
              <tfoot>
                <tr>
                  <td>Pie 1</td>
                  <td>Pie 2</td>
                </tr>
              </tfoot>
            </table>
          </article>
        </section>
 
        <section id="ia">
          <h2>Entradas sobre inteligencia artificial ♟</h2>
          <p>Esta sección incluye mis artículos recientes sobre inteligencia artificial.</p>
          <article>
            <h3>Hacia una inteligencia artificial de propósito general</h3>
            <h4>Introducción</h4>
            <p>Los recientes avances lorem ipsum dolor sit amet, consectetur adipiscing elit, 
              sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure 
              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
              obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
              En una charla reciente, Andrew Ng señalaba que:</p>
 
            <!-- El elemento <blockquote> indica que el texto rodeado por el elemento es una cita; su atributo
                 cite indica la fuente de la cita -->
            <!-- El atributo lang se define al principio para todo el documento, pero aquí se indica para la cita;
                 el valor del atributo ha de coincidir con alguno de los códigos de dos letras ISO 639-1: 
                 https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes --> 
            <!-- &ldquo; es una entidad que permite introducir el signo de apertura de comillas en documentos
                 con codificaciones de caracteres que no incluyen dicho simbolo; existe un conjunto de entidades 
                 definidas en el estándar como, por ejemplo, &copy; para el símbolo de copyright -->
            <blockquote cite="http://time.com/4631730/andrew-ng-artificial-intelligence-2017/" lang="en">
              &ldquo;We're making this analogy that artificial inteligence is the new electricity. Electricity
              transformed industries: agriculture, transportation, communication, manufacturing. I think we are
              now in that phase where artificial inteligence technology has advanced to the point where we see
              a clear path for it to transform multiple industries.&rdquo;
            </blockquote>
 
            <h4>Modelo matemático</h4>
            <p>De todo lo anterior se deduce que lorem ipsum dolor sit amet, consectetur adipiscing elit, 
               sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>

            <!-- Las ecuaciones para la librería MathJax se encierran dentro de $$ y usan una notación propia
                 de la librería (basada en el lenguaje LaTeX); atención: toda esta notación es específica de la
                 librería y no es HTML: -->
            $$
              [\boldsymbol{\nu}_t,\boldsymbol{\xi}_t] = \mathcal{N}\left(x_t,r^{1}_{t-1},\ldots,r^{R}_{t-1}\right)
            $$

            <!--
            $$
              I = \begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix}
            $$
            -->

            <p>No obstante, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt 
               ut labore et dolore magna aliqua.</p>

            <!-- El elemento <pre> representa texto preformateado.; el texto en este elemento típicamente 
                 se muestra en una fuente fija, no proporcional (monoespacio), exactamente como es mostrado en 
                 el archivo: los espacios dentro de este elemento también son mostrados como están escritos -->
            <!-- El elemento <code> indica que el contenido es código fuente -->
            <pre><code>
              interface PrimaryCore {
                boolean verifyDataLine();
                void sendData(in sequence&lt;byte> data);
                void initSelfDestruct();
              }
            </code></pre>

          </article>
          <article>
            <h3>La memoria en las redes neuronales</h3>
            <p>Tradicionalmente, las <em>redes neuronales</em> lorem ipsum dolor sit amet, consectetur adipiscing elit, 
               sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
               nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>

            <!-- El elemento <figure> representa contenido independiente, a menudo con un título; si bien se
                 relaciona con el flujo principal, su posición es independiente de este; por lo general, se trata
                 de una imagen, una ilustración, un diagrama, un fragmento de código o un esquema al que se hace
                 referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que
                 afecte al flujo principal -->
            <figure>

              <!-- El elemento <img> representa una imagen en el documento; su atributo src indica el URL de la
                   imagen; el atributo obligatorio alt define un texto alternativo que describe la imagen -->
                <img src="https://media.springernature.com/lw685/springer-static/image/art%3A10.1038%2Fnature20101/MediaObjects/41586_2016_Article_BFnature20101_Fig4_HTML.jpg"
                     alt="Activaciones de los distintos cabezales de lectura/escritura 
                          en una red neuronal derivable.">

              <!-- El elemento <figcaption> representa un subtítulo o leyenda asociado al contenido del elemento 
                   padre <figure>, pudiendo ser colocado como primer o último hijo -->
              <figcaption>Esquema de una red neuronal derivable</figcaption>
            </figure>
          </article>
        </section>

        <!-- El elemento <aside> representa una sección de una página que consiste en contenido que está 
             indirectamente relacionado con el contenido principal del documento (por ejemplo, comentarios
             al margen o publicidad) -->
        <aside>
          <p>Al hilo de las reflexiones anteriores, lorem ipsum dolor sit amet, consectetur adipiscing elit, 
             sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
             quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>

          <!-- Uso del componente web definido en la librería chessboard-element; el uso de style no está
               recomendado normalmente -->
          <chess-board position="start" style="width: 256px"></chess-board>
        </aside>
      </section>
    </main>

    <!-- El elemento <footer> representa un pie de página para el contenido de sección más cercano o el
         elemento raíz de sección; un pie de página típicamente contiene información acerca del autor de la
         sección, datos de derechos de autor o enlaces a documentos relacionados -->
    <footer>
      <p>© 2020, Franz de Copenhague</p>
    </footer>
  </body>
</html>

1.2. Representación en memoria de un documento HTML¶

Imaginemos que tenemos que escribir un programa que cargue en memoria un documento HTML para luego realizar algún procesamiento sobre sus elementos (por ejemplo, mostrarlo en la ventana de un navegador, extraer los datos de una tabla desde un programa en Java u obtener sus palabras para indexarlas en la base de datos de un buscador). La estructura de datos que se utiliza para ello es un árbol en el que cada nodo es un objeto que representa una parte del documento. El DOM (Document Object Model) es un conjunto estándar de métodos (una interfaz) independientes del lenguaje para interactuar con este árbol que suele, por tanto, llamarse árbol DOM. En un tema posterior estudiaremos algunos de los métodos del DOM, pero por ahora centrémonos en la forma del árbol.

La siguiente figura muestra parte de un árbol DOM:

Árbol DOM por Birger Eriksson¶

Hazlo tú ahora

Dibuja el árbol DOM de los documentos HTML que hemos estudiado anteriormente y utiliza la herramienta Live DOM Viewer para comprobar si tu solución es correcta. Observa en especial el tratamiento que se hace de los espacios en blanco entre dos elementos: estos blancos tienen su propio nodo asociado lo que puede ser necesario tener en cuenta al movernos por el árbol. HTML es un lenguaje en el que, en general, las secuencias de más de un espacio en blanco, tabulador o salto de línea se tratan como si fueran un único espacio en blanco.

Consejo

Podría ser que en alguna ocasión necesites que entre dos elementos (por ejemplo, entre dos palabras) de tu página haya un espacio más grande lo habitual. Podrías en ese caso tener la tentación de usar la entidad   (también &NonBreakingSpace;), repetida varias veces, para obtener aproximadamente este espacio extra. Comprueba una vez cómo funciona (observa la diferencia entre a    b y a b) y luego no vuelvas a usarla nunca más (salvo para su verdadero propósito; sigue leyendo). Posteriormente veremos que, dentro del espíritu de separar presentación y contenido, son las hojas de estilo las que se han de encargar de definir de forma precisa la separación entre los elementos de una página. ¿Para qué existe entonces una entidad como  ? Su propósito es indicar al navegador que nunca introduzca un salto de línea en el punto en el que aparece la entidad (cosa que el navegador puede decidir hacer con cualquier otro espacio en blanco) y la interprete estrictamente como un espacio en blanco. Escribe una latitud como 40° 41′ 21.4” N en un documento HTML, cambia el ancho de la ventana del navegador e intenta que se separen sus componentes en dos líneas consecutivas.

1.3. Herramientas para desarrolladores¶

Los navegadores suelen incorporar de serie un conjunto de herramientas para facilitar el trabajo de los desarrolladores. En particular, a estas alturas del curso ya puedes usar el panel Elements de las Chrome DevTools para inspeccionar los distintos elementos de tu página; para ello, en el navegador Google Chrome (o Chromium) sitúa el puntero del ratón encima de alguna posición de tu página web y selecciona Inspeccionar en el menú contextual; otra opción para acceder a estas herramientas es abrirlas desde el menú Más herramientas ‣ Herramientas para desarrolladores del navegador o mediante el atajo de teclado Ctrl+Shift+I o F12. Existen extensiones similares para otros navegadores, como Firebug para Mozilla Firefox.

Hazlo tú ahora

Familiarízate, siguiendo esta página de su documentación, con la pestaña Elements del entorno de las Chrome DevTools, ya que te será extremadamente útil. Práctica después las distintas posibilidades con un documento de HTML más complejo como este.

Atención

El panel Elements de las Chrome DevTools muestra una información potencialmente distinta de la opción Ver código fuente la página que aparece en el menú contextual de una página (atajo de teclado Ctrl+U), ya que esta última opción muestra siempre el código inicial descargado por el navegador y no el HTML dinámico que el navegador tiene en memoria en un determinado momento, que puede ser diferente al inicial por manipulaciones del árbol DOM, como veremos en posteriores temas.

Importante

Durante el ciclo de desarrollo de una aplicación web es habitual realizar cambios en los ficheros de la aplicación (por ejemplo en el documento HTML, en las hojas de estilo o en el código de JavaScript) y comprobar a continuación cómo queda la aplicación tras recargarla. En algunas ocasiones el navegador puede optar, pese a la recarga, por utilizar el contenido previo almacenado en la caché lo que nos puede llevar a la falsa impresión de que nuestros cambios no tienen efecto. Dentro de la pestaña Network de las Chrome DevTools existe una opción Disable cache que hace que el navegador ignore el contenido de la caché, pero solo mientras las herramientas de desarrolladores estén abiertas. Es recomendable tenerla siempre marcada.

1.4. Codificación de caracteres¶

Aunque hoy día la mayor parte de los sistemas operativos trabajan con la codificación de caracteres de longitud variable UTF-8, que permite representar todos los caracteres del juego de caracteres Unicode, es importante que seas capaz de saber qué codificación de caracteres se usa en tus documentos web, en los de terceros, o en tu servidor web. No tener esto en cuenta puede hacer que tu web se visualice incorrectamente en algunos navegadores. En esta actividad hablaremos de codificación de caracteres siguiendo estas diapositivas.

Hazlo tú ahora

Observa que indicar una determinada codificación en el atributo charset del elemento meta no garantiza que los caracteres del documento usen realmente dicha codificación. Usa un editor de textos que permita redactar documentos bajo diferentes codificaciones y graba tu documento HTML usando las codificaciones UTF-8 e ISO-8859-15 (Latin-1); prueba a poner el valor correcto y el incorrecto en la directiva meta y observa el resultado con los caracteres especiales al abrir el documento en el navegador. Estudia cómo se representan a nivel de bytes los caracteres en las distintas codificaciones con editores hexadecimales como HexEd.it.

1.5. Alojamiento en un servidor¶

Una página web normalmente se aloja en un servidor web. Si la máquina en la que lo hacemos fuera pública (nuestro ordenador personal normalmente no lo será), se podría acceder entonces al documento desde cualquier máquina conectada a internet usando convenientemente la URL del servidor. Existen muchos servidores web diferentes; algunos de los más conocidos son Apache HTTP Server (HTTPD), Internet Information Services, Apache Tomcat o Jetty. Mientras un programador desarrolla una aplicación web es habitual que lance un servidor en su máquina para ir probando sus cambios; en ese caso, el URL de acceso al servidor suele tener la forma http://localhost:8080 donde localhost es el nombre de la propia máquina como host (IP 127.0.0.1) y 8080 es un puerto libre que es necesario indicar en el URL, ya que de no hacerlo el protocolo HTTP usa por defecto el puerto 80 (y HTTPS el 443), que estará normalmente reservado para comunicarse mediante HTTP con otros ordenadores.

Hazlo tú ahora

Una de las formas más sencillas de lanzar un servidor local es usar el que Python incluye por defecto. Colócate en el directorio raíz del contenido que quieres servir y haz:

python -m SimpleHTTPServer

1.6. Validación de documentos HTML¶

Un aspecto básico de los documentos HTML es que estos cumplan estrictamente con las directrices de HTML, tanto a nivel sintáctico (por ejemplo, las marcas de apertura y clausura respetan el anidamiento entre elementos) como semántico (no hay dos atributos id con el mismo valor o no se usan en un elemento atributos que correspondan a otros elementos). De esta manera, se allana el camino hacia la compatibilidad entre navegadores y la usabilidad de la página web; la validación, sin embargo, no asegura que el documento se vaya a ver como el desarrollador tiene en la cabeza ni que se muestre de igual manera en todos los navegadores.

Hazlo tú ahora

Usa el validador del W3C para validar alguna de las páginas web usadas en actividades anteriores; corrige todos los errores que te indique el validador hasta conseguir validarla. Algunas de las cosas que puedes probar son:

dejar una etiqueta sin cerrar
mover el elemento meta de la cabecera al cuerpo (body) del documento
mover un párrafo (p) a la cabecera (head) del documento
eliminar el título (title) de la cabecera del documento
poner una imagen (img) sin el atributo alt
colocar un elemento de lista (li) fuera de la marca de lista (ul)

Atención

En determinadas ocasiones el estándar de HTML permite omitir algunas etiquetas de clausura (por ejemplo, en ciertas ocasiones no es necesario cerrar la etiqueta </body> de antes de </html> y, aun así, el documento sigue siendo válido), pero son situaciones muy específicas, por lo que es más que recomendable crear siempre documentos que son válidos al margen de estas excepciones.

Nota

El lenguaje HTML evoluciona como cualquier otro lenguaje informático. Así, lo que hoy en día se representa como:

<meta charset=utf-8>

en XHTML o HTML4 se representaba como:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >

Ten en cuenta estas diferencias cuando encuentres código de ejemplo en HTML en alguna web. Los navegadores suelen procesar correctamente la mayor parte de la última versión del estándar existente cuando son publicados, pero no debes perder de vista que un gran número de usuarios tendrás probablemente versiones antiguas del navegador. Aunque no las veremos en este curso, existen maneras de desarrollar aplicaciones web teniendo en cuenta estas versiones antiguas sin renunciar necesariamente a la versatilidad de las recientes.