¿Qué es HTML? Guía de desarrollo web
HTML es el primer lenguaje que debemos aprender si nos queremos dedicar al desarrollo web. Es un lenguaje sencillo y agradecido, al alcance de cualquier persona que tenga un mínimo de interés en crear una página web. En este post podrás conocer muchos detalles del lenguaje HTML esenciales si estás empezando en el mundo del desarrollo web.
¿Qué es HTML?
HTML corresponde con las siglas de HyperText Markup Language (Lenguaje de Marcación de Hipertexto). Es el lenguaje estándar con el que se declaran los contenidos que deben de mostrar las páginas web.
Decimos que HTML es un lenguaje de marcación porque está compuesto por etiquetas o marcas. Cada etiqueta expresa qué tipo de contenido se debe mostrar en el documento y la función que realiza ese elemento en la página, por ejemplo si es un encabezamiento, un elemento de lista, un script, etc.
Estructura básica de un documento HTML
Todo documento HTML está compuesto por etiquetas. Las etiquetas tienen una sintaxis característica al estar encerradas en signos de menor y mayor qué. Además generalmente las etiquetas tienen una que indica el comienzo del elemento y otra que indica el fin del elemento. Por ejemplo tenemos y
Además, los documentos HTML tienen una estructura en la que hay siempre una cabecera, con información de control que generalmente no aparecerá al visualizar la página y un cuerpo, que es donde se define qué elementos tendrá la página al verse en el navegador.
Esqueleto de un documento HTML
Para entender mejor cómo es el lenguaje HTML vamos a ver la estructura básica de un documento.
<!DOCTYPE html> <html lang='es'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Título de la página</title> </head> <body> </body> </html>
Dentro de este código encontramos diversos elementos que vamos a describir.
Doctype
La declaración doctype define el tipo de documento. Su sintaxis depende de la versión de HTML que estemos usando. Actualmente se define simplemente con !DOCTYPE html
Es importante incluirlo al inicio de cualquier página HTML para asegurar que los navegadores saben la versión del HTML que estamos usando.
Head
La sección head contiene meta-información del documento HTML. Podemos incluir en este bloque diversos asuntos de interés, como el conjunto de caracteres utilizado, enlace a las hojas de estilo en el lenguaje CSS, el título de la página, sus keywords y muchas otras cosas.
Body
El cuerpo del documento se expresa dentro del la etiqueta body. Es donde se sitúa todo el contenido que los navegadores mostrarán al visualizarse la página web. En el cuerpo encontraremos como textos, imágenes y enlaces, entre otras cosas.
Elementos esenciales en HTML
Ahora, dentro del cuerpo podemos encontrar una rica cantidad de etiquetas que usaremos dependiendo de la función que hace el contenido dentro del documento.
Títulos y encabezados (h1-h6)
Las etiquetas h1 a h6 se utilizan para definir los encabezados o titulares. El de mayor importancia es h1 (debería haber un solo encabezamiento principal) y el menos importante es el h6.
Párrafos y saltos de línea
Muy importantes son los elementos p, que define un párrafo en la página y la etiqueta br que se utiliza para insertar un salto de línea.
<p> Esto es un párrafo. </p>
Aquí es importante mencionar que en el código HTML no importan los saltos de línea. Dicho de otro modo, al navegador le importa que existan saltos de línea en el código, simplemente los ignorará. Si queremos que haya una separación entre líneas tenemos que introducir una etiqueta br, o bien encerrar los elementos dentro de una etiqueta de bloque como div.
También es interesante saber que no todas las etiquetas requieren su correspondiente cierre y br es un ejemplo de esa excepción.
Listas ordenadas y no ordenadas
En HTML podemos generar listas. Existen dos tipos:
- Las listas ordenadas (ol)
- Las listas no ordenadas (ul)
En las listas tenemos el primer ejemplo de etiqueta que tiene que trabajar en coordinación con otras etiquetas. Así, para iniciar la lista usamos ol o ul y para los ítem tenemos que usar etiquetas li.
<ul> <li>Manzana</li> <li>Plátano</li> <li>Uva</li> <li>Mango</li> <li>Fresa</li> </ul>
Creando hipervínculos en HTML
En el lenguaje HTML y el desarrollo web en general, uno de los elementos más representativos son los hipervínculos, que nos permiten navegar desde una página a otra.
Enlaces a páginas internas y externas
Para los hipervínculos, también llamados simplemente enlaces, se utiliza la etiqueta a. Aquí estamos ante la primera etiqueta que requiere atributos para funcionar. El atributo es como una persinalización del funcionamiento de una etiqueta. En el caso de los enlaces el atributo href nos permite indicar la URL a la que va dirigido el enlace.
<a href='URL'>texto del enlace</a>
Las URL pueden ser internas (dentro de la misma página) o externas (a páginas distintas).
Un ejemplo de enlace con la ruta externa sería el siguiente:
<a href='https://www.google.com'>Ir a Google</a>
Ahora, si los enlaces son a otras partes del mismo documento, necesitamos dos etiquetas, primero las anclas y luego los enlaces.
Anclas para navegación dentro de una página
Las anclas también se consiguen con la etiqueta a, solo que usamos el atributo name para indicar el nombre del ancla.
Podemos entenderlas como puntos de referencia dentro de una página para navegar a través de enlaces. Los enlaces a las anclas tienen que colocarse con href usando una almohadilla y el nombre del ancla al que nos queremos dirigir.
<a href='#nombre-del-ancla'>Ir a un ancla</a>
Incorporando contenido multimedia
Ahora vamos a ver algunas etiquetas que nos permiten colocar elementos más allá del simple texto o enlaces.
Etiqueta img para imágenes
Para insertar imágenes se utiliza la etiqueta img. Esta etiqueta también requiere de atributos, al menos src para indicar la ruta del archivo de la imagen. Adicionalmente es recomendable usar el atributo alt para indicar la descripción de la imagen, para fines de accesibilidad y posicionamiento en buscadores.
<img src='ruta-de-la-imagen.jpg' alt='Descripción de la imagen'>
Uso de elementos multimedia: audio y video
Desde la versión 5 de HTML (HTML5) podemos usar las etiquetas
Aquí tenemos un ejemplo, aunque es importante que te documentes un poco más si quieres usarlas porque son etiquetas con bastantes posibilidades.
<audio controls> <source src='ruta-del-archivo-de-audio.mp3' type='audio/mpeg'> Tu navegador no soporta el elemento de audio. </audio>
Organizando datos con tablas
Cuando tenemos que representar información tabulada, en filas y columnas, podemos echar mano de la etiqueta Es importante saber que esta etiqueta se debe usar solo cuando tenemos que representar una información tabulada, como el horario de clases en el colegio o una clasificación en un campeonato de equipos. Nunca se deben usar las tablas simplemente por el hecho de que nos proporcionen un posicionamiento en rejilla, para eso existe el CSS Grid Layout. Las tablas son una de las construcciones más complejas que podemos encontrar en HTML, ya que involucra el uso de varias etiquetas. Las tablas se crean con <table>, y se estructuran con filas (tr) y celdas, que pueden ser de celda de encabezado (th) o celda de datos generales (td). Estas son las etiquetas básicas y fundamentales. Además tenemos thead y tbody para encerrar la parte de una tabla que hace función de encabezamiento y la parte que hace la función de cuerpo, aunque estas dos etiquetas son meramente opcionales. Podemos ver un ejemplo a continuación. Los formularios son la principal vía que tenemos para recopilar datos del usuario. En ellos podemos incluir diversos controles de entrada, como campos de texto, casillas de verificación, etc. Dentro de un formulario se pueden incorporar diferentes controles como input, textarea, etc. Podemos ver un ejemplo de formulario para encontrar varios tipos de elementos. En este código puedes ver un formulario de contacto. Hemos colocado solamente algunos de los elementos que puedes incluir en formularios, como campos de texto de una línea y de línea múltiple, así como un botón de envío. Pero hay bastantes otros. Es relevante mencionar que los formularios tienen atributos necesarios para indicar qué pasa cuando se envían. En este caso se mandarán los datos a una página PHP (ver atributo action) por el método POST (ver atributo method). En HTML existen muchos elementos que tienen un significado especial. A menudo estos elementos tienen una representación específica en la página pero a veces simplemente están para indicar que cierto elemento contiene un contenido principal, accesorio, etc. Algunas de estas etiquetas como main o aside fueron introducidas en HTML5. Para encontrar más información te recomendamos la lectura del post dedicado al HTML 5 semántico. En el desarrollo web son especialmente relevantes los encabezados de la página, que nos sirven para indicar los titulares. Estos encabezados los hemos mencionado ya. Son los que consigues con las etiquetas h1 a h6. Son tan importantes porque sirven para la optimización de motores de búsqueda (lo que se conoce como SEO), ya que aportan estructura y relevancia al contenido. Otros elementos semánticos son strong que denota que el texto es más relevante y em permite dar énfasis al texto. Estos elementos son ideales también para darle un poco de sentido semántico al documento y además son útiles para la accesibilidad. Una estructura semántica clara ayuda a los motores de búsqueda a entender y procesar el contenido de una página, para saber qué informaciones son vitales y cuáles son accesorias. Para saber cuáles son las palabras clave, etc. Debemos de saber que, todo aquello que ayude a los buscadores a entender mejor la página será positivo para mejorar su posicionamiento SEO. No podemos hablar de HTML sin mencionar el lenguaje CSS. Lo que debemos tener claro es que: Nunca debemos indicar etiquetas de HTML como font para cambiar el estilo. Estas etiquetas, aunque ya no existen en las versiones actuales de HTML siguen funcionando por compatibilidad hacia atrás y no son nada recomendables porque se meten en la parcela que debería cubrir el CSS. Aunque existen varios mecanismos para poder asociar CSS al HTML, las hojas de estilo se vinculan al HTML usando la etiqueta link, indicando con el atributo href la ruta donde está el CSS que se desea usar para aplicar estilos al documento. Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online..
Estructura básica de una tabla
<table>
<thead>
<tr>
<th>Posición</th>
<th>Equipo</th>
<th>PJ (Partidos Jugados)</th>
<th>PG (Partidos Ganados)</th>
<th>PE (Partidos Empatados)</th>
<th>PP (Partidos Perdidos)</th>
<th>GF (Goles a Favor)</th>
<th>GC (Goles en Contra)</th>
<th>Puntos</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Equipo A</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>0</td>
<td>8</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Equipo B</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>7</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>Equipo C</td>
<td>4</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>6</td>
<td>5</td>
<td>7</td>
</tr>
</tbody>
</table>
Creación de formularios interactivos
Controles de entrada: campos de texto, botones, casillas de verificación, etc.
<form action='ruta-donde-se-procesara-el-formulario.php' method='post'>
<label for='name'>Nombre:</label>
<input type='text' id='name' name='name' required>
<label for='email'>Email:</label>
<input type='email' id='email' name='email' required>
<label for='subject'>Asunto:</label>
<input type='text' id='subject' name='subject'>
<label for='message'>Mensaje:</label>
<textarea id='message' name='message' rows='6' required></textarea>
<input type='submit' value='Enviar'>
</form>
Uso de elementos semánticos
Encabezados adecuados para SEO
Elementos de texto enriquecido: strong, em, etc.
Beneficios de la estructura semántica para el posicionamiento en buscadores
La importancia de CSS en el diseño web
Vinculación de hojas de estilo CSS en HTML
<link rel='stylesheet' href='ruta-del-css.css'>
Productos relacionados: