Tutorial básico html5

¡Hola! Bienvenido a este tutorial básico HTML5.

Con este tutorial básico HTML5 podrás empezar a crear la estructura básica de una página web, después podrás definir el aspecto de la misma combinando HTML5 con CSS3

Contenido

• ¿Qué es HTML5?
• ¿Para qué sirve HTML5?
• ¿Qué novedades trae la última versión?
• Concepto etiquetas HTML
• Estructura básica de un documento HTML
• Estructura intermedia de un documento HTML

¿Qué es HTML5?

Empecemos por el principio 😀

HTML5 (Hyper Text Markup Language) es la quinta versión del lenguaje básico de la World Wide Web (WWW).

Este es un lenguaje de marcado, no lo podemos considerar un lenguaje de programación, ya que estos incluyen tres capacidades básicas de generar flujos de procesos: la secuencial (secuencias de instrucciones), la condicional (capacidad para tomar decisiones o ejecutar un proceso u otro en función del valor de uno o varios parámetros) y la de repetición (capacidad para repetir un proceso un cierto número de veces). HTML no cuenta con ellas, no porque sea mejor ni peor, sino porque es una cosa distinta.

El lenguaje de marcado es básicamente un idioma que se caracteriza por etiquetar el contenido de una página web.

La base del HTML es el hipertexto. Entendemos por hipertexto la capacidad de enlazar documentos web de forma no secuencial.

Se considera el lenguaje web más importante, siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web. Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

El estándar HTML4 se lanzó en 1999, y como imaginas el contenido de las páginas web ahora no tiene nada que ver con lo que eran entonces. Por eso desde hace unos años se está implementando el nuevo estándar HTML5. Menú ⬆️

¿Para qué sirve HTML5?

HTML es el elemento de construcción más básico de una página web y se usa para crear y representar visualmente una página web.

Determina el contenido de la página web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad (JavaScript).

HTML se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir a los documentos web de contenido y estructura. Etiquetamos las distintas partes de un documento web para aportar información al usuario, a los motores de búsqueda y a los navegadores.

Si estás navegando por Internet, viendo esta web o muchas otras, ya estás utilizando la tecnología HTML5 aunque no lo sepas. También es posible que en ocasiones, hablando de seguridad o contenidos, también te encuentres con este concepto. Por eso, aunque sea algo sencillo, vamos a intentar explicártelo de la manera más entendible posible en este tutorial básico HTML5. Menú ⬆️

¿Qué novedades trae la última versión?

Multimedia:

• HTML5 es la última versión del estándar HTML que se utiliza para crear las páginas web que estás visitando, e incorpora algunas novedades interesantes. Una de las notables, es darle cobertura a la reproducción de contenido multimedia, de forma que ya no tengas que ir a recursos de terceros como el obsoleto Flash Player.
• Se incorporan nuevos elementos audio y video para poder gestionar de manera estándar los codecs y formatos multimedia para poder incluir contenido multimedia en los documentos. Los elementos audio y video incorporan unos potentes API para poder interactuar con sus funcionalidades.

Semántica:

• Se incorporan nuevos elementos que nos permiten dotar de mayor semántica a los documentos. Sobre todo a la hora de estructurar la información o los contenidos. Pasamos de un modelo gobernado por las capas span y los bloques div dónde la semántica se establecía con los elementos CSS, a tener elementos específicos con su semántica.

• Así, en HTML5 encontramos elementos como article, section, aside, header, footer, …

Formularios:

• Se han revisado los formularios proporcionando nuevos tipos de input así como incluyendo nuevos elementos para los formularios como datalist para la gestión de listas, progress y meter para las barras de progreso u output para las salidas de datos.
• Además, se proporciona una valiosísima API de validación de formularios así como validaciones explícitas en los propios campos.

Gráficos y Efectos 2D/3D:

• Las limitaciones gráficas de HTML 4.01 eran muy grandes y no podíamos tener elementos gráficos. En HTML5 se incluye el elemento canvas que nos permite crear gráficos 2D y 3D con una gran interacción, llegando a la posibilidad de poder montar juegos gráficos sobre ellos.

Offline y Almacenamiento:

• La red ha pasado de ser dominada por agentes de usuario que eran navegadores conectados constantemente a la red y de forma online a tener una amplia presencia y uso de dispositivos móviles, los cuales tienen menor capacidad de procesamiento, tasa de conexión y que además pueden estar offline.

• Es por ello que HTML5 nos ayuda en primer lugar a saber si el navegador está online u offline. Y además nos incluye una serie de capacidades de almacenamiento en la parte cliente como son la WebStorage, la base de datos IndexedDB y la gestión de ficheros mediante el API File.

Rendimiento e Integración:

• HTML5 nos ofrece un conjunto de API que nos ayudan en la creación de aplicaciones SPA (Single Page Application), para ello ha mejorado el objeto XMLHttpRequest generando el Level 2.

• Por otro ha creado los WebWorkers para que se puedan lanzar ejecuciones asíncronas desde el navegador y así no afectar a la interacción directa con el usuario.

• Otros apartados que se han trabajado para las aplicaciones SPA (Single Page Application) son la integración del Historial API con las SPA, capacidades Fullscreen y la posibilidad de controlar el drag&drop de elementos.

Conectividad:

• Las aplicaciones de cliente han pasado a un modelo de aplicaciones SPA (Single Page Application) de una gran riqueza visual, pero las cuales recuperar los datos de servicios de negocio externos.
• Así, con HTML5, han surgido tecnologías como Websockets para establecer conexiones permanentes con los servicios de negocio, Server-sent Events para poder publicar eventos desde el servidor al cliente o WebRTC para poder crear webs que nos permitan una experiencia real-time.

Gestión de Dispositivos:

• Como ya hemos comentado hemos pasado de ordenadores y su navegador a visualizar los documentos web en dispositivos móviles que ofrecen muchas posibilidades y una manera diferente de interacción por parte del usuario.
• Así como HTML5 podremos conocer la geolocalización del dispositivo, gestionar si el dispositivo está en horizontal o vertical o accede a sus capacidades y conocer el estado de la batería o poder utilizar la cámara. Menú ⬆️

Concepto etiquetas HTML

Una etiqueta es una información técnica que es capaz de ser detectada e interpretada por un navegador web. Las etiquetas pueden contener atributos que informan a los navegadores de los matices que se deben aplicar a un determinado elemento (título, encabezado, subtitulo etc.).

Las etiquetas generalmente tienen una instrucción de apertura y una instrucción de cierre. <> y </>

Existen también etiquetas que no tienen instrucción de cierre. En este caso se recomienda indicar una barra inclinada /> (XHTML)

En función del tipo de HTML que escribamos (XHTML, HTML4.01, HTML5) la sintaxis puede variar.

HTML5 incorpora etiquetas semánticas que además de aportar información para los navegadores también aportan informaciones para los motores de búsqueda.

Sigamos con este tutorial básico de HTML5 para poder realizar una página web desde 0. Menú ⬆️

Estructura básica de un documento HTML

HTML como lenguaje que es tiene un vocabulario y una sintaxis básica que debemos conocer.

Los archivos o documentos escritos en HTML tienen una extensión .html para que los servidores y los navegadores los interpreten.

La estructura básica es:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
	
</body>
</html>

El significado de las etiquetas es el siguiente:

• <!DOCTYPE html> Informa a los navegadores que a continuación van a leer HTML5. Esta línea no es una etiqueta sino una instrucción. Si googleáis encontraréis versiones más extensas, pero nosotros no las vamos a usar. Hacen referencia a versiones de html más antiguas.
• <html></html> Informa a los navegadores que en su interior es dónde vamos a encontrar el HTML5. Esta etiqueta debe abrirse y cerrarse una única vez por documento web. Justo a continuación de la instrucción !DOCTYPE y al finalizar el documento web.
• <head></head> Es la cabecera del documento web. La cabecera del documento web contiene informaciones técnicas para los navegadores web y para los motores de búsqueda. Por ejemplo aquí dentro encontraréis la etiqueta <title> y los <meta>. Solo debe aparecer un <head> en un documento web y nunca debéis confundirlo con la etiqueta semántica de HTML5 <header>
• <body></body> Es el cuerpo del documento web. Encierra las etiquetas que van a aportar estructura y contenido a nuestro documento web. También solo se escribe una única vez por documento web.

Aviso: No se puede escribir HTML entre las etiquetas <html> y <head>, tampoco se puede escribir html entre las etiquetas </head> y <body>, y pasa lo mismo entre las etiquetas </body> y </html>.

En esta estructura básica podemos empezar a incluir dentro de la etiqueta <head> otras etiquetas como por ejemplo:

• <meta> Con información para los navegadores (idioma del documento, tipo de documento etc.).
• <title> Para poner el título de nuestro documento web (formulario, contacto etc.).
• <link> Que sirven para enlazar con documentos o archivos adicionales (hojas de estilos CSS, imagen del favicon, recursos JavaScript etc.).

Aquí tienes el código de ejemplo con las etiquetas anteriores:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Titulo de la web</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
	
</body>
</html>

Como puedes observar, dentro de las etiquetas se pueden incluir atributos HTML.

¿Qué son los atributos en HTML?

Los atributos en HTML se pueden considerar como información adicional que se coloca siempre en la etiqueta de apertura, esto para añadir, complementar información o significado al elemento HTML al que estamos colocando.

• lang =” ”: Especifica el idioma del contenido del elemento.
• charset=” ”: Especifica la codificación de caracteres.
• http-equiv=” ”: Proporciona un encabezado HTTP para la información / valor del atributo de contenido.
• content=” ”: Da el valor asociado con el atributo http-equiv o name.
• name=” ”: Especifica el nombre del elemento.
• rel =” ”: Especifica la relación entre el documento actual y el documento vinculado.
• href =” ”: Especifica la URL de la página a la que va el enlace.

Un atributo se escribe de la siguiente manera: Atributo=“valor”  en esa forma, el nombre del atributo, seguido del signo igual (=) y entre comillas el valor, todo esto siempre dentro de la etiqueta de apertura. Menú ⬆️

Estructura intermedia de un documento HTML

En esta última versión de HTML tenemos etiquetas muy interesantes para ubicar los contenidos dentro de nuestra etiqueta <body>, las más importantes son:

• <header> Es la cabecera donde va el nombre del sitio, el logotipo y descripción de la página web.
• <aside> Lo que viene siendo nuestro SIDEBAR o barra lateral.
• <footer> Esté es el pie de página del documento web.

Aquí tienes el código con todos los ejemplos anteriores de HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Titulo de la web</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
   <header>
      <h1>Mi sitio web</h1>
      <p>Mi sitio web creado en html5</p>
   </header>
   <aside>
      <h3>Titulo de contenido</h3>
          <p>contenido</p>
   </aside>
   <footer>
       Creado por mí el 2022
   </footer>
</body>
</html>

En este ejemplo puedes encontrar las siguientes etiquetas:

• <h1>: Encabezado o título principal.
• <p>: Para elementos de párrafo.
• <h3>: Para elementos subtítulo.

Puedes copiar y pegar este código en un editor de texto y guardarlo con extensión .html. Después solo tienes que abrirlo con tu navegador favorito y ver cómo se vería la página web.

Recordar que el HTML se debe usar para dotar de contenido y estructura a un documento web, no para temas estéticos. Para ese propósito tenemos el lenguaje CSS, del cual puedes aprender en este tutorial básico css.

Y esto es todo en este tutorial básico de HTML5. Para seguir aprendiendo sobre este lenguaje te dejo el enlace al tutorial avanzado html5.

Te dejo el enlace a la W3C (Word Wide Web Consortium), la página general aquí y la página del consorcio en habla hispana aquí. Menú ⬆️

Última actualización del tutorial básico de HTML5: 04/01/2022 18:10:00 UTC/GMT +1