HTML. Qué es una página web

Qué es una página web

Una página web es un documento de texto con marcas. Las marcas permiten modificar la presentación del documento, incluir elementos no contenidos en el texto (por ejemplo, imágenes), crear hiperenlaces, añadir significado al texto (todavía de forma limitada), etc. A las marcas se les llaman también etiquetas.

Las páginas web están pensadas para ser vistas mediante los programas llamados navegadores web. Los navegadores son capaces de interpretar las marcas y presentar el documento tal y como lo diseñó el autor.

Documento de texto con marcas

<p>Esto es un párrafo de texto.</p>

<p>Esto es otro párrafo.</p>

Cómo se ve en el navegador

 

Enlace externo

En principio, los navegadores no muestran las marcas, aunque podemos pedirle al navegador que nos muestre el documento original. Podemos hacer clic derecho en una zona sin texto ni imágenes de la página y elegir la opción "Ver el código fuente de la página". Podemos usar el atajo de teclado Ctrl+u, que abre directamente una pestaña con el código fuente. También se pueden utilizar las siguientes opciones de menú:

Nota: La expresión "código fuente" pertenece al ámbito de la programación. En programación, el "código fuente" es el documento de texto que escribe el programador en algún lenguaje de programación y que algún programa especializado (compilador o intérprete) convierte en "código máquina" que el procesador del ordenador ya puede ejecutar. En el caso de las páginas web, el texto con marcas no es realmente un "código fuente" en ese sentido, puesto que el HTML no es un lenguaje de programación (CSS tampoco lo es), pero se utiliza el término en el sentido de que el documento de texto escrito por el autor es convertido en una representación gráfica, con formato e imágenes.


Las marcas se escriben entre desigualdades (<p>, <h1>, <div>, etc.) y suelen ir por parejas, rodeando porciones de texto. La marca de apertura contiene como mínimo el nombre de la marca y la marca de cierre empieza por el carácter barra (/) y contiene únicamente el nombre de la marca (</p>, </h1>, </div>, etc.).

Código fuente de la página web

<p>Esto es un párrafo de texto.</p>

<p>Esto es otro párrafo.</p>

Cómo se ve en el navegador

 

Enlace externo

Algunas marcas (imágenes, saltos de líneas, separadores, etc.) no necesitan marca de cierre y sólo es necesario escribir la marca de apertura. A estas marcas se las llama marcas vacías (void). Las marcas vacías de HTML son <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> y <wbr>.

Código fuente de la página web

<p>Esto es un párrafo de texto.</p>

<hr>

<p>Esto es otro párrafo. Entre los dos párrafos hay una línea horizontal.</p>

Cómo se ve en el navegador

 

Enlace externo

En general, los navegadores modifican el aspecto visual del texto en función de las marcas existentes, aunque hay marcas que no tienen ningún estilo predeterminado asociado.

Código fuente de la página web

<p>Esto es un <strong>párrafo de texto</strong>.</p>

<p>Esto es <span>otro párrafo</span>.</p>

Cómo se ve en el navegador

 

Enlace externo

Los saltos de línea, espacios en blanco y tabuladores no son en general significativos. Es decir, el navegador no tiene en cuenta los saltos de línea ni la cantidad de espacios en blanco ni los tabuladores a la hora de mostrar la página web, simplemente los convierten en un espacio en blanco.

<p>Uno          Dos          Tres         Cuatro</p>

<p>Uno
  Dos

  Tres
  Cuatro</p>
Enlace externo

Nota: La etiqueta <pre> es la única etiqueta que de forma predeterminada sí que se respeta los saltos de línea, espacios en blanco y tabuladores. Este comportamiento se puede modificar para cualquier etiqueta con la propiedad white-space.


Las marcas pueden anidarse, aunque no de cualquier manera. Algunas marcas pueden estar contenidas por otras, pero no se puede insertar cualquier marca dentro de otra.

Código fuente de la página web

<div>
  <p>Esto es un <strong>párrafo de texto</strong>.</p>

  <p>Esto es <em>otro párrafo</em>.</p>
</div>

Cómo se ve en el navegador

 

Enlace externo

Atributos

Las marcas de apertura pueden contener uno o varios atributos. Los atributos especifican alguna característica de la marca. Algunos atributos pueden incluirse en casi todas las marcas, pero otros son específicos de cada marca. Los atributos pueden a su vez tener valores (uno o varios valores, separados por espacios). <etiqueta atributo="valor_de_atributo" atributo2="valor_de_atributo2">

Código fuente de la página web

<p title="¡Sorpresa!">Esto es un párrafo de texto (ponga el cursor encima).</p>

<p style="color: red">Esto es otro párrafo.</p>

Cómo se ve en el navegador

 

Enlace externo

Se puede modificar el aspecto visual de cualquier marca utilizando propiedades de estilo.

Código fuente de la página web

<p style="color: red">Este párrafo se verá de color rojo.</p>

Cómo se ve en el navegador

 

Enlace externo

Nota: Aunque es posible utilizar propiedades de estilo en una página web, como en el ejemplo anterior, se recomienda hacerlo en hojas de estilo, como se explica en lecciones posteriores.

Comentarios

Una página web puede contener comentarios, que el navegador no muestra (salvo cuando muestra el código fuente de la página). La etiqueta de comentario es <!-- .... -->.

Los comentarios pueden estar insertados en cualquier lugar de la página web. En el ejemplo pueden verse dos comentarios, uno incluido en una etiqueta (párrafo <p>) y otro no incluido en ninguna etiqueta.

<p>Esto es un párrafo <p> normal y corriente.
  <!--Esto es un ejemplo de comentario-->
</p>

<p>En el párrafo anterior hay un comentario que sólo puede verse en el código fuente.</p>

<!--Esto es otro comentario-->
Enlace externo

Versiones de HTML

A lo largo del tiempo ha habido varias versiones de HTML y dos tipos de sintaxis. Las versiones de HTML (HTML 3.2, HTML 4.01, HTML 5, etc) se distinguían por las etiquetas, atributos y valores de los atributos que se podían utilizar en ellas. Las dos sintaxis, HTML y XHTML, se distinguían en que la primera no sigue la recomendación XML, mientras que la segunda sí la seguía (salvo en algunos detalles)

Antes del HTML 5, las distintas versiones de HTML fueron elaboradas por el W3C, pero a finales de los 90 el W3C abandonó el desarrollo del HTML en favor del XHTML. Ante los problemas prácticos que eso suponía, el WHATWG (formado en 2004 por Apple, Mozilla y Opera) retomó el desarrollo del HTML de forma independiente del W3C, llamándole HTML 5. En 2006 el W3C intentó rectificar retomando el desarrollo de HTML, asumiendo todo el trabajo del WHATHWG, pero sin éxito.

En 2011 el WHATWG y el W3C dejaron de trabajar conjuntamente. En 2011 el WHATWG decidió abandonar el concepto de versión y llamar al lenguaje simplemente HTML, sin número de versión. Desde entonces, para el WHATWG el HTML es una norma en continua elaboración y el único HTML existente es el HTML actual. Por su parte, el W3C decidió mantener el concepto de versiones y reutilizar el trabajo de WHATWG.

Hasta el 2018, el W3C fue incorporando las modificaciones aprobadas en el WHATWG, por lo que las recomendaciones del W3C podían considerarse más o menos como "fotos fijas" del HTML del WHATWG. En octubre de 2014 el W3C publicó la recomendación HTML 5, a la que siguió la recomendación HTML 5.1 en noviembre de 2016 y la recomendación HTML 5.2 en diciembre de 2017.

En diciembre de 2018 el W3C reconoció su fracaso y dejó de trabajar en la versión HTML 5.3. En mayo de 2019 el W3C y el WHATWG anunciaron un acuerdo por el que el W3C dejó definitivamente en manos de WHATWG el mantenimiento de la recomendación HTML. El W3C mantenía su intención de publicar anualmente una versión del HTML, pero realmente de trata de una versión del HTML del WHATWG, sin modificaciones (concretamente, alguno de los HTML Review Draft del WHATWG que se publican en enero y julio de cada año). La primera versión de este tipo se publicó en enero de 2021 y corresponde al HTML Review Draft de enero de 2020.

Hasta el curso 2018/2019, en estos apuntes se utilizaba como referencia el HTML del W3C, pero desde entonces se hace referencia al HTML Living Standard del WHATWG.

Con respecto a la sintaxis, desde el curso 2018/19 en estos apuntes se utiliza la sintaxis HTML, pero sin omitir las etiquetas opcionales permitidas por la recomendación.

Nota: