Lenguaje HTML/El código

El documento que lee el navegador está escrito en un lenguaje de marcado llamado HTML, que son las siglas de HyperText Markup Language, un lenguaje de etiquetas que permite incluir o hacer referencia a todo tipo de información.

Dicho documento esta formado por etiquetas, que son la base del lenguaje HTML. Existen muchas etiquetas y cada una se utiliza para contener información y darle un cierto significado a dicha información, dependiendo de la etiqueta que se trate.

Por norma general, las etiquetas deben cerrarse para indicar donde finaliza su contenido. Las etiquetas HTML tienen la siguiente estructura:

<etiqueta>contenido</etiqueta>

La semántica de las etiquetas

En HTML no se puede utilizar cualquier palabra como etiqueta. Existen una serie de etiquetas concretas, cada una de ellas con su finalidad y características propias, que tendremos que utilizar según requiera la ocasión.

Veamos un ejemplo, en el siguiente código, la etiqueta <p> indica que ese texto se trata de un párrafo, y dentro de ese párrafo hay una etiqueta <strong> que resaltar la importancia de la palabra gato sobre el resto del contenido:

<p>Ese <strong>gato</strong> es de color gris.</p>

También habrás observado en este ejemplo, que se pueden incluir etiquetas dentro de otras, a esto se le llama anidar etiquetas.

Las etiquetas tienen semántica, esto quiere decir que las etiquetas tienen un significado concreto. Por ejemplo <p> significa párrafo, y <strong> significa importante, y es un error marcar un texto como <strong> si no es importante. Si se quiere cambiar la apariencia del contenido, debe hacerse a través del código CSS.

• HTML: Define la semántica y el significado del contenido.
• CSS: Define la presentación y el apartado visual del contenido.

Prácticas obsoletas

Antiguamente, en las versiones obsoletas de HTML como HTML4, era común usar etiquetas para definir el apartado visual. Por ejemplo, en HTML4 el siguiente código era correcto, mientras que en HTML5 es completamente erróneo.

<!-- El siguiente código es erróneo en HTML5 -->
<big>Este texto es grande</big>
<center>Este texto está centrado.</center>

Estas etiquetas están obsoletas, y el anterior es un error. El motivo es que la etiqueta <big> indica que el texto debe verse grande, y la etiqueta <center> indica que el texto debe estar centrado, pero estas etiquetas no dan ninguna información sobre el significado de su contenido. Para hacer grande un texto o centrarlo en HTML5, debe hacerse uso de lenguaje CSS.

Los atributos y sus valores

Las etiquetas pueden tener atributos, estos atributos contienen información adicional sobre el elemento.

Por ejemplo, el atributo id, este sirve para darle un identificador a una etiqueta HTML. En el siguiente ejemplo, hay un párrafo que tiene el id="parrafo-muy-original".

<p>Esto es un párrafo normal</p>
<p>Esto es otro párrafo normal</p>
<p id="parrafo-muy-original">Este párrafo tiene un identificador único</p>

Estos siempre siguen la misma estructura: <etiqueta atributo="valor"> ... </etiqueta>

• Los atributos deben estar en la etiqueta inicial, nunca en la final.
• El orden de los atributos dentro de la etiqueta es indiferente.
• Los valores deben estar encerrados con comillas, dobles o simples.
• Un elemento puede tener varios atributos: <elemento atributo1="valor" atributo2="valor"> ... </elemento>