HTML

Mario González - Blog sobre desarrollo web

Nociones básicas de HTML

|

En nuestro anterior artículo Introducción al HTML y CSS explicamos en qué consiste el HTML (HyperText Markup Language) y vimos que es un lenguaje de marcado, es decir, un lenguaje que permite dotar de estructura y significado al contenido mediante el uso de marcas. En este artículo dirigido a recién llegados al HTML desarrollaremos las bases para un buen conocimiento del lenguaje: su sintaxis, sus etiquetas, y la estructura básica de un documento.

Etiquetas HTML

Cuando tenemos un documento con información para humanos que queremos que sea tratada por máquinas, generalmente necesitamos herramientas para decirle a esas máquinas qué hay en esa información, cómo se estructura el contenido y qué significa cada parte. Para eso se han ido desarollando los lenguajes de marcado, que consisten en un conjunto de marcas que acompañan al contenido y unas reglas para utilizarlas. El HTML es uno de estos lenguajes, y fue creado a principios de los 90 por Tim Berners Lee (considerado padre de la www) para crear documentos dirigidos a la web.

En el HTML hay definido un listado de marcas o etiquetas que podemos usar para acompañar al contenido, así como las reglas para usarlas correctamente. En realidad, tanto este listado de etiquetas como las reglas van cambiando a lo largo del tiempo, y se van creando nuevas versiones de las especificaciones (las normas de uso). En la actualidad las versiones más estandarizadas son la XHTML 1.0 y la HTML 4.01, mientras poco a poco se va haciendo hueco la nueva, HTML5. En otro artículo explicaremos las diferencias entre ellas, para esta ocasión basta con saber que el XHTML tiene prácticamente las mismas especificaciones que el HTML, pero es más estricto en cuanto a cómo se deben formar y anidar las etiquetas, ajustándose a las normas de uso del XML. Para entender mejor esto, recomendamos la lectura del artículo en la Wikipedia sobre Diferencias entre HTML y XHTML. En este post nos centraremos en XHTML 1.0, explicando algunas diferencias que hay frente a la nueva especificación HTML5 (podéis encontrar un listado de estas diferencias en 10 Diferencias entre la validación XHTML y HTML5).

Una etiqueta HTML se escribe siempre encerrada entre los símbolos < y >. Por ejemplo: <a> <div> o <strong>. El nombre de la etiqueta tiene que ir siempre en minúsculas (en HTML5 no). Cuando la etiqueta encierra contenido (texto u otras etiquetas), hay que escribir una de apertura y una de cierre, así:


<p>Texto contenido en una etiqueta de párrafo.</p>

Sin embargo, hay algunas etiquetas que no contienen nada, como por ejemplo <img>, <meta> o <link>. En ese caso, la etiqueta debe finalizar con / antes de su cierre (en HTML5 no):


<img src="logotipo.png" alt="MG Aplicaciones" />

Una etiqueta puede incluir, además de su nombre, uno o más atributos. Los atributos son propiedades de la etiqueta que tienen siempre un nombre y un valor, por ejemplo:


<a href="https://mariogl.com">

Donde el nombre del atributo es href y su valor es la URL que aparece entrecomillada después del =. Las reglas del XHTML para los atributos son:

  • siempre tienen que ir en minúscula
  • su valor siempre tiene que ir entre comillas
  • es obligatorio que tengan un valor (aunque el valor sea el mismo nombre del atributo)

En HTML5 todo esto ha cambiado un poco, ya no tienen que ir en mayúscula, los valores no siempre tienen que ir entrecomillados, y un atributo puede no tener valor.

Resumiendo, éstos serían ejemplos de unas etiquetas XHTML no válidas:


<img src="paisaje.jpg" alt="Paisaje" />
<!-- no válida: a la etiqueta le falta el cierre -->

<img src="paisaje.jpg" alt="Paisaje" />
<!-- válida -->

<a href=http://www.google.es>Enlace a Google</a>
<!-- no válida: el valor del atributo no va entrecomillado -->

<a href="http://www.google.es">Enlace a Google</a>
<!-- válida -->

<input type="text" disabled />
<!-- no válida: el segundo atributo no tiene valor -->

<input disabled="disabled" type="text" />
<!-- válida -->

<p dir="LTR">Texto del párrafo</p>
<!-- no válida: nombre de la etiqueta y atributos/valores en mayúsculas -->

<p dir="ltr">Texto del párrafo</p>
<!-- válida -->

Estructura de un documento HTML

Un documento HTML siempre parte de una estructura básica y obligatoria, que tiene los siguientes elementos:

  • El DOCTYPE: no es realmente un elemento HTML, es un código que le dice al navegador qué documento de especificaciones tiene que seguir a la hora de interpretar y renderizar (presentar en el dispositivo de salida) el HTML. Es fundamental para conseguir que la web se vea bien en todos los navegadores. Se define al principio del documento, así:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    

    Esta línea le dice al navegador que se base en las especificaciones de XHTML 1.0 en su variante Strict, que es la menos permisiva en cuanto a normas de uso. Para entender mejor el DOCTYPE y cuál tenemos que elegir, recomendamos la lectura de ¿Qué es el XHTML Doctype?

  • <html>: es el elemento raíz en cuyo interior van a ir todos los demás elementos del documento.
  • <head>: es un elemento que aloja información sobre el contenido, pero no hay contenido en su interior. Aquí es donde irá el título de la web, la codificación de caracteres o las llamadas a archivos CSS o JavaScript.
  • <body>: es el elemento en cuyo interior estará todo el contenido de la web.

Con estos elementos básicos, ya podemos construir el esqueleto de la web:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>    
        <!-- Aquí irá la información sobre el contenido del documento -->
    </head>
    <body>
        <!-- Aquí irá el contenido del documento -->
    </body>
</html>    

Podemos observar cómo cuando un elemento HTML está dentro de otro (o anidado), lo escribimos con un sangrado a la izquierda. El sangrado es un sistema que, si bien no influye en el comportamiento del navegador, facilita mucho entender la jerarquía de los elementos para quien esté leyendo el código.

A partir del esqueleto, podemos construir ya un simple documento HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>    
        <title>Aprendiendo HTML</title>
    </head>
    <body>
        <h1>Documento HTML básico</h1>
        <p>A partir del esqueleto, hemos podido construir un documento
<strong>HTML</strong> básico con contenido.</p>
    </body>
</html>    

Relaciones entre elementos HTML

Como hemos visto, en un documento HTML hay un elemento raíz, el <html>, y el resto de elementos se incluyen dentro de él. Además, estos otros elementos también se anidan entre sí, de modo que al final tenemos una estructura jerárquica de niveles, donde cada elemento tiene un lugar respecto a sus elementos ascendientes y descendientes. En nuestro ejemplo, podemos ver cómo la etiqueta <title> es hija de <head>, que a su vez es hija de <html>. O en un nivel más de profundidad, vemos cómo la etiqueta <strong> es hija de <p>, que a su vez es hija de <body>, que a su vez es hija de <html>. Entender estas relaciones nos será útil cuando usemos algunas características de CSS, y nos resultará fundamental cuando trabajemos con JavaScript.

¿Qué opinas?

Tu dirección de correo electrónico no será publicada. * Campos obligatorios