Cómo se hace una web: Qué es HTML [Parte 1]

Read this article in English

Todas las páginas web que solemos navegar están escritas en un lenguaje llamado HTML. No es el único lenguaje y componente que hay en una web, pero si es el primero y el fundamental para que los navegadores interpretan los contenidos. Si entendemos el HTML como esqueleto, el resto de lenguajes, como CSS o JS vienen a completar y dar estilo a ese esqueleto, pero siempre es necesario que exista una capa de HTML debajo de todo, si no no tendremos nada sobre qué apoyarnos.

Diferencias entre versiones HTML5 vs HTML4

HTML no es un lenguaje nuevo. Data de principios de los años 90 y durante este tiempo ha ido sufriendo modificación y añadidos, de ahí que podamos hablar de versiones HTML 3, HTML 4 y la actual HTML 5. Cada una de estas versiones hereda la anterior, elimina aquellos elementos o especificaciones obsoletas y añade nuevos contenidos.

Versiones de HTML

Por ello cuando se habla de HTML5 no estamos hablando de algo totalmente distinto a HTML4. Nada más lejos de la realidad, es el mismo lenguaje con la misma sintaxis pero con nuevos añadidos y mejoras. Por todo ello si estás empezando con el diseño web y su estructura, puedes aprender directamente HTML5 que es el estándar a día de hoy. No tendría mucho sentido empezar por HTML4 y después aprender las diferencias entre uno y otro, pese a que también es un método válido de aprendizaje.

Elementos en HTML: etiquetas de apertura y cierre

Para identificar un elemento de HTML solo debemos de buscar su etiqueta de apertura, contenido entre los símbolos menor que y mayor que, por ejemplo <h1>. Para la etiqueta de cierre se incluye una barra justo detrás del símbolo inicial de menor que: </h1>

Elementos en HTML

Con este par de etiquetas (de apertura y cierre) ya tenemos nuestro elemento HTML definido, en este caso un h1, útil para indicar al navegador que el contenido que encierra es un título de orden 1, el mayor que podemos tener.

<h1>Título del artículo</h1>

La mayoría de elementos en HTML están definidos por este par de etiquetas, aunque no siempre es así, elementos como img o los input funcionan de forma diferente.

Atributos en HTML

Uno de los aspectos más importantes en HTML es conocer cómo funcionan los atributos, que es en definitiva información extra que añadimos a cada elemento en el HTML para poder ajustar su diseño y comportamiento. Un ejemplo fácil de un atributo es la url que podemos indicar a todo enlace que haya en nuestra web.

<a href="http://www.silocreativo.com.com">Link</a>

Atributos en HTML

Todos los atributos tienen unas características comunes:

– Siempre se describen en la etiqueta de apertura del HTML
– Siempre cumplen con la estructura de nombre="valor"
– Existen atributos comunes a todos los elementos (class o id) y también atributos propios de cada elemento (href para <a>, o src para <img>)

En cuanto a la forma correcta de definir a los atributos, la W3C recomienda (aunque no es obligatorio ya en HTML5) las siguientes reglas:

– Uso de minúsculas para definir el nombre de un atributo
– Uso de doble comillas para contener el valor de un atributo

Ejemplos HTML atributos

La razón de esta recomendación es evitar problemas con navegadores antiguos (por ejemplo las versiones anteriores a Internet Explorer 9) y poder incluir dentro del valor del atributo el elemento comilla simple sin tener miedo a cerrar dicho atributo.

Dando estilo al HTML con CSS

Una vez tenemos nuestro esqueleto de HTML listo, ya podemos cargarlo con el navegador. Si todos los elementos están correctamente cerrados la web se mostrará sin problemas, pero el diseño será muy básico y las fuentes y colores usados serán los que aplique el navegador por defecto.

Para evitar esto y que todas las páginas webs tengan el mismo estilo y diseño web, es necesario que apliquemos unos estilos propios. Estos estilos se añaden usando el lenguaje CSS que es el que se encarga del diseño responsive a mostrar en todos los dispositivos, y pueden ser agregados de tres formas:

– Estilos en línea, directamente en el elemento HTML, en su etiqueta de apertura
– En la cabecera de la web, dentro de la etiqueta
– En una hoja de estilos con extensión .css

El orden de los anteriores puntos va de menos recomendable (estilos en línea) a más recomendable (hoja de estilos externa .css). Los motivos para este orden es buscar un mejor rendimiento y renderización del HTML en el navegador (cuanto menos bytes más rápido cargará la web obteniendo una mejor experiencia de usuario) y un cierto orden y estructura para el trabajo del diseñador web. De ahí que trabajar con una hoja de estilos externa sea lo más idóneo para evitar tener que sobrescribir el HTML cada vez que haya un cambio en el diseño.

Profundizaremos en el CSS en la siguiente parte del tutorial fundamentos básicos. Estad atentos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *