#21 Fundamentos de la Web: Qué es HTML

Podcast (episodios): Reproducir en una nueva ventana | Descargar

Suscríbete: Spotify | RSS | Más

Hoy hablamos de cómo está construída una página web en su código, hablaremos de qué es HTML. David nos va a contar en qué consiste el HTML y en qué se diferencia del HTML5, entre otras cosas.

Pero antes, vamos a ver algunas noticias:

Y ahora, ya sí, nos metemos en el tema del día.

Fundamentos de la Web: Qué es HTML

En concreto, vamos a ver qué es HTML5, que es el standard que se usa hoy día. David nos contará la diferencia entre los dos tipos de lenguajes que hay para construir webs:

  • Lenguaje de cliente
  • Lenguaje de servidor

HTML es un lenguaje del lado del cliente, por lo que es interpretado por el navegador, mientras que los lenguajes de servidor como PHP son interpretados del lado del servidor.

Algunas características del lenguaje HTML son:

  • HTML sirve para definir la estructura del contenido.
  • Utiliza un sistema de etiquetas.
  • HTML fue inventado por Tim Berners-Lee en 1990
  • HTML5 se consolidó más o menos en 2014, y se caracteriza por la semántica, conexión, rendimiento y soporte multimedia.
<div>
  <h1>Título principal</h1> 
  <h2>Subtítulo interesante</h2>
  <p>Primer párrafo</p> 
  <img src="/" alt="Imagen"> 
  <p>Segundo párrafo con un <a href="https://ejemplo.com">hipervínculo</a></p>
</div>
  • La mayoría de las etiquetas abren y cierran con <etiqueta> </etiqueta>
  • Las etiquetas HTML que debes conocer son:
    • Composición base:
      • <!DOCTYPE html>, indica al navegador que va a leer HTML5.
      • <html>, indica el comienzo de la raíz del documento
      • <head> Metadatos del documento. Título
      • <meta name=”robots” content=”index, follow”>. Con esta etiqueta le indicamos a los buscadores qué contenido pueden rastrear o cuál no.
      • <title>Head – Glosario | MDN</title>. Se trata de la cabecera que vemos en la pestaña de nuestro navegador.
      • <link rel=»preload» href=»/static/fonts/locales/ZillaSlab-Regular.subset.bbc33fb47cf6.woff2″ as=»font» type=»font/woff2″ crossorigin=»»>
      • <link rel=»shortcut icon» href=»/static/img/favicon.png»>. Con estas etiquetas cargamos contenidos tan importantes como el favicon, el pequeño icono que vemos en la parte superior de la pestaña del navegador.
      • <meta name=»description» content=».»>
      • <body>, aquí es donde de verdad empieza la parte de la página web que vemos en el navegador.
    • <div>, permite delimitar contenido en una especie de caja.
<html>
  <head>
    <!-- INFORMACION META-->  
  </head>
  <body>
    <!-- CONTENIDO DE LA PAGINA -->
  </body>
</html>

¿Cuáles son las secciones de un documento HTML5?

Todas las páginas web tienen varias secciones claramente diferenciadas, gracias a las nuevas etiquetas que se introdujeron para este cometido.

  • <header> Cabecera de un documento o artículo
  • <nav> Navegación de elementos
  • <footer> Pie de página
  • <aside> Barra lateral
  • <main> Contenido principal del body
  • <article> Composición autocontenida en un documento
  • <section> Sección genérica

¿Cómo añadimos contenido en HTML?

Para añadir contenido en HTML utilizaremos las siguientes etiquetas, tanto si se trata de texto como de contenido multimedia.

  • Si se trata de contenido multimedia, utilizaremos las siguientes etiquetas:
    • <video>
    • <audio>
    • <iframe>
  • Para contenido de texto utilizaremos las siguientes:
    • <h1>, <h2>, <h3>, <h4>, <h5>
    • <p>
    • <br/>
    • <a> href class rel
    • <img>
    • <strong>
    • <em>
    • <button>
    • <ul><li></li></ul>
    • input: type

Por último, es muy importante tener en cuenta comprender qué es HTML, que este lenguaje solamente sirve para añadir y estructurar el contenido. Para darle estilos utilizaremos CSS, y para añadirle un comportamiento usaremos Javascript.

Fuentes

MDN Mozilla Web docs: https://developer.mozilla.org/es/docs/HTML/HTML5

¿Qué es HTML? https://www.hostinger.es/tutoriales/que-es-html/

El libro de Matthew Macdonald es fantástico para aprender qué es HTML y domininarlo.
Portada del libro HTML5, the missing manual. Libro fantástico para aprender HTML5.

El libro que hemos recomendado durante el episodio es Missing Manuals HTML5, de Matthew Macdonald, y es un libro fantástico para iniciarse y comprender todos los conceptos que hemos explicado aquí.

Deja un comentario