Saltar al contenido

¿Cómo utilizar las etiquetas HTML? Te explicamos las fundamentales

diciembre 20, 2017

Ya estamos listos para comenzar a crear nuestra página web tras los dos artículos que habéis visto anteriormente. Hoy pasamos a materia interesante, y es que hemos hablado bastante del HTML y comenzar un proyecto con Bootstrap, pero no hemos comentado que es realmente el HTML5. Pues bien, de sus siglas en inglés, significa Lenguaje de Marcas de HiperTexto en su versión 5, y vamos a desgranar un poco este significado. Para empezar, hipertexto significa enlaces, es una forma que tienen los lenguajes web de enlazar distintas webs, lo cual es un factor importante de posicionamiento SEO.

Por último, un lenguaje de marcas es muy distinto a lo que solemos entender por lenguaje de programación. Al igual que el XML, el HTML no tiene la capacidad de realizar operaciones ni funciones, solamente es la estructura de la que será nuestra web. Ya lo comentamos en la portada de este curso, pero en el lenguaje web son importantes tres tipos de código: la estructura (HTML), el diseño (CSS) y la funcionalidad (PHP, Java Script, …).

Como buen lenguaje de marcas, tenemos … ¡marcas! (muy bien), pero necesitamos conocerlas si realmente queremos aprender a programar en este lenguaje. A estas marcas también se les conoce como etiquetas, así que no os extrañéis si usamos ambas palabras en este artículo.

Cómo sangrar HTML

Antes de pasar con estas etiquetas, tenemos que aprender a como sangrar un buen archivo HTML. Como en la mayoría de lenguajes, el sangrado no importa e incluso a nivel máquina es mucho mejor un problema que no lo tiene, pues es más ligero que un archivo con sangrado. Sin embargo, para que sea entendible por humano, ya seamos nosotros u otros desarrolladores, vamos a aprender a como sangrar nuestro HTML.

Una buena técnica es la de que cada vez que insertéis una nueva etiqueta, la sangréis. Así sabréis que elementos están dentro de otros. Por ejemplo, si yo quiero crear una imagen y dentro poner un texto, colocaríamos primero las etiquetas de apertura y cierre y dentro de ellas y sangrado las etiquetas del texto. Quizás no entendáis la siguiente imagen, pero este es un ejemplo de cómo se debe sangrar un proyecto:

Como podéis ver, he organizado el código por capas, como una cebolla. Con el tiempo, nos acostumbramos a hábitos como a no sangrar el body respecto el html o incluso a no sangrar las primeras capas del body respecto a el mismo. No obstante, todos estos cambios los vas haciendo conforme os vayáis sintiendo más cómodos.

Las etiquetas HTML más importantes

Ahora sí, lo que esperabais.

Etiquetas HTML básicas

  • <html> Engloba todo el lenguaje HTML de esa página.
  • <head> Encierra el código de la cabecera.
  • <title> Muestra el título de la página. Va en el head.
  • <meta> Engloba a los diferentes metadatos como meta description o las desfasadas meta keywords. Va en el head.
  • <body> Encierra el cuerpo del código HTML.
  • <h_> Muestra un título. Tenemos desde el H1 hasta el H6.
  • <p> Muestra texto en formato párrafo. No hace falta ponerlo cada vez que se vaya a utilizar.
  • <nav> Crear una barra de navegación.
  • <div> nos permite crear distintas divisiones del código. Útil para utilizar distintos estilos.

Etiquetas HTML para textos

  • <b> Negrita.
  • <i> Cursiva.
  • <a> Enlace.
  • <br/> Salto de línea.
  • <q> Comentario.
  • <li> Lista con viñetas.

Otras etiquetas HTML de interés

  • <button> Crea un botón
  • <form> Crear un formulario
  • <progressbar> Crea una barra de progreso