Conceptos básicos de HTML5
Antes de comenzar, deberá tener en cuenta que este artículo esta dirigido para iniciantes en el mundo del desarrollo web, ya que se tocarán temas básicos. Por otro lado, si ya tiene experiencia y desea repasar o posiblemente encontrar algo nuevo, le invito a continuar con la lectura.
Ahora a empezar!
Que es HTML ?
El Lenguaje de Marcado de Hipertexto (HTML) se utiliza para definir un significado y estructura a un sitio web. Por ejemplo, si queremos crear un sitio web para algún cliente, primero debemos pensar en como estará estructurado esto, ya sea pensar si tendrá título, imágenes, video, enlaces, listas, tablas, etc.
Para entenderlo mejor, definamos por separado lenguaje de marcado e hipertexto.
En primer lugar, el lenguaje de marcado hace referencia a las distintas etiquetas que se usan para mostrar algún contenido en el navegador o para el mismo. Más adelante, veremos alguna de estas etiquetas.
Por otro lado, hipertexto se refiere a los enlaces que conectan páginas web entre sí. Al subir contenido y enlazarlo a otros sitios web formas parte del ecosistema de la Word Wide Web.
Estructura Básica de un documento HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Título principal</h1>
</body>
</html>Los archivos HTML tienen como extensión ".html". Por ejemplo, "index.html", ya que este suele ser lo que los navegadores leer por defecto y el que contiene lo principal de su sitio web, es la página de inicio.
Estructura de un elemento HTML
<p class="center">Hola Mundo</p>
<!--
- <p> : Etiqueta de apertura o inicio.
- class="center" : El atributo class sirve para asignar clases de CSS, las cuales le dan estilos a un elemento HTML.
- Hola Mundo : Es el contenido de un elemento, en esta caso texto.
- </p> : Etiqueta de cierre.
-->A continuación veremos algunas etiquetas.
Html, Head y Body
La etiqueta principal que contiene todo el documento HTML es <html></html>. Esta puede tener un atributo "lang" que define el idioma de dicha página, esto sirve para indicar a los navegadores el idioma del contenido y mostrar en los resultados de usuarios con el mismo idioma.
La etiqueta html tiene 2 etiquetas hijas, head y body. Todo el contenido en <head></head> es información para los navegadores y algoritmos de búsqueda, ya que no será visible para el usuario. Por otro lado, el contenido dentro de <body></body> será toda la información que el usuario podrá visualizar e interactuar.
Algunas etiquetas dentro de head
<meta charset="utf-8">Especifica la codificación de caracteres del documento.
<title>Mi título</title>Representa el título del documento.
<meta name="author" content="Aquí va el nombre del autor de mi sitio web">Indica quien escribió la página.
<meta name="description" content="Aquí va la descripción de mi sitio web">Indica de que trata el contenido de la página.
<meta http-equiv="X-UA-Compatible" content="IE=edge">Indica al navegador con que versión de motor de renderizado deberá usar (Si en caso se usará, se recomienda el más reciente).
<meta name="viewport" content="width=device-width, initial-scale=1.0">Permite controlar las dimensiones de la página basado en el tamaño de pantalla del dispositivo.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >Agrega un favicon a la página.
<link rel="preload" as="front" type="font/woff2" href="fonts/poppins-webfont.woff2" >Permite la pre-carga de archivos (font, audio, fetch, image, object, style, script) que se requiere que estén disponibles temprano en el ciclo de vida de la página.
<link rel="sitemap" type="application/xml" href="sitemap.xml" >Facilita el rastreo de URL de páginas e imágenes que deseas que Google indexe.
<meta name="robots" content="noindex" >Indica a los navegadores que la página no debe ser indexada en los resultados de búsqueda.
<link rel="canonical" href="https://misitio.com" >Indica que página se deberá rastrear cuando se tiene contenido duplicado en diferentes URLs.
<link rel=¨"stylesheet" href="./css/styles.css" >Indica al navegador la ubicación del archivo de estilos que se deberá usar.
<style></style>Permite añadir estilos a los elementos HTML.
Ahora veremos algunas etiquetas que se usan para mostrar la información apropiada en redes sociales como Facebook y Twitter.
En el caso de Facebook utiliza el protocolo Open Graph y algunas de sus etiquetas son :
<!-- Título de la publicación -->
<meta property="og:title" content="Mi título">
<!-- Descripción de la publicación -->
<meta property="og:description" content="Esta es la descripción de mi página web">
<!-- Imagen de la publicación -->
<meta property="og:image" content="https://misitio.com/image-website.jpg">
<!-- URL de la publicación -->
<meta property="og:url" content="https://misitio.com">Para Twitter se usa un protocolo similar al de Open Graph pero con su prefijo "twitter". Adicionalmente, se puede especificar el tipo de visualización de la carta, como se ve a continuación :
<!-- Título de la publicación -->
<meta name="twitter:title" content="Mi título">
<!-- Descripción de la publicación -->
<meta name="twitter:description" content=" Esta es la descripción de mi página web">
<!-- Imagen de la publicación -->
<meta name="twitter:image" content=" https://misitio.com/twitter-image-website.jpg">
<!-- Formato de la carta -->
<meta name="twitter:card" content="summary_large_image">Es momento de ver algunas etiquetas dentro del body, aquellas que si son visuales para el usuario.
Etiquetas dentro del body
Layout
<main></main>La etiqueta main indica el contenido principal.
<header></header>La etiqueta header indica la sección del encabezado. Se puede utilizar dentro del body o en otras secciones.
<footer></footer>La etiqueta footer ndica el pie de página, ubicado generalmente al final de la página.
<nav></nav>La etiqueta nav indica la sección de la navegación con enlaces a las secciones principales del sitio web.
<aside></aside>La etiqueta aside indica la sección lateral. Sirve para brindar información adicional, enlaces, publicidad, etc.
Subsecciones
<section></section>La etiqueta section agrupa una sección relacionada a la página. Por ejemplo, un conjunto de artículos de un blog.
<article></article>La etiqueta article agrupa un bloque de contenido que tiene sentido por sí mismo, sin necesidad de relacionarse con la página web.
<div></div>La etiqueta div agrupa un contenido sin brindar relación semántica. Se utiliza para asignar estilos a un conjunto de elementos.
De texto
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>En esta caso, cada elemento representa un encabezado, dando mayor prioridad o importancia al h1 y reduciéndolo hasta el h6. Por ejemplo, si en una página web tengo h1 y h2, el h1 sería para mi título y el h2 para mi subtítulo. Se recomienda usar máximo hasta h3 por página, ya que si se requiere un h4 y/o h5 habría que plantearse si es mejor crear una nueva página con otro contenido.
<p></p>La etiqueta p permite agregar párrafos.
<span></span>Al igual que el div, la etiqueta span sirve para asignar estilos a un fragmento de texto en particular, ya que no proporciona algún significado semántico.
<strong></strong>La etiqueta strong permite agregar importancia a un texto en específico.
<em></em>La etiqueta em permite agregar énfasis a un texto en específico.
<a></a>Permite convertir algún contenido (texto, imagen, etc) en un enlace hacia otra URL. El destino se deberá agregar en el atributo "href".
Listas
<ul></ul>La etiqueta ul nos permite agregar una lista desordenada.
<ol></ol>La etiqueta ol nos permite agregar una lista ordenada.
<li></li>La etiqueta li nos permite agregar elementos a la lista ordenada o desordenada.
Citas
<blockquote></blockquote>La etiqueta blockquote se usa para agregar citas en bloque o párrafo. La URL de referencia o fuente de información se coloca en el atributo "href".
<q></q>La etiqueta q se usa para agregar citas en línea. La URL de referencia o fuente de información se coloca en el atributo "href".
Otros
<br>La etiqueta br nos permite dar saltos de línea.
<p>x<sup>2</sup></p>La etiqueta sup nos permite agregar un super índice. Por ejemplo, cuando queremos poner algún número al cuadrado u otra potencia.
<p>h<sub>2</sub>o</p>La etiqueta sub nos permite agregar un sub índice. Por ejemplo, cuando queremos colocar algún elemento químico como el valor del agua.
<pre></pre>La etiqueta pre se usa para respetar los espacio en blanco del contenido que se encuentra dentro de dicha etiqueta.
<code></code>La etiqueta code sirve para marcar un fragmento de código informático.
<address></address>La etiqueta address se utiliza para envolver datos de un contacto. Por ejemplo, si tenemos una lista con el teléfono, dirección y correo de un usuario, podemos agregar dicha lista dentro de la etiqueta address.
<time></time>La etiqueta time nos permite agregar un formato legible del horario para el navegador.
<abbr title="Hypertext Markup Language">HTML</abbr>La etiqueta abbr se usa para agregar una abreviatura o acrónimo. La palabra abreviada se debe colocar en el atributo "title".
Tablas
<table></table>La etiqueta table se usa justamente para crear la tabla.
<caption></caption>La etiqueta caption sirve para agregarle un subtítulo a la tabla.
<thead></thead>La etiqueta thead delimita el encabezado de la tabla. Suele ser la primera fila.
<tbody></tbody>La etiqueta tbody delimita el contenido del cuerpo de la tabla.
<tfoot></tfoot>La etiqueta tfoot delimita el pie de de la tabla. Suele estar debajo del thead o en la última fila.
<tr><tr>La etiqueta tr permite crear una fila dentro de la tabla.
<th></th>La etiqueta th permite crear una celda dentro del head de la tabla.
<td></td>La etiqueta td permite crear una celda dentro del body o foot de la tabla.
Multimedia
<img src="perros.jpg" alt="Foto de perros corriendo en el parque">La etiqueta img permite agregar una imagen al documento html. En el atributo "src" se indica la ruta de la imagen y en el atributo "alt" se coloca un texto alternativo que describa brevemente la imagen.
<figure></figure>La etiqueta figure sirve para agrupar contenido relacionado a una imagen. Se suele usar acompañado de la etiqueta figcaption.
<figcaption></figcaption>La etiqueta figcaption sirve para agregar una descripción a una imagen ubicada dentro de la etiqueta figure.
<video></video>La etiqueta video sirve para insertar un video (En diferentes formatos soportados por el navegador) al documento html.
<audio src="./podcast/autor.ogg"></audio>La etiqueta audio sirve para insertar un audio (En diferentes formatos soportados por el navegador) al documento html.
<audio controls>
<source src="./podcast/autor.ogg" type="video/webm">
<source src="./podcast/autor.mp3" type="video/mp4">
</video>
<video controls muted>
<source src="./videos/primavera.webm" type="video/webm">
<source src="./videos/primavera.mp4" type="video/mp4">
</video>
<picture>
<source media="(min-width:650px)" srcset="perritos.jpg">
<source media="(min-width:465px)" srcset="cachorros.jpg">
<img src="perros.jpg" alt="Foto de perros corriendo en el parque" style="width:auto;">
</picture>La etiqueta source sirve agregar diferentes fuentes del recurso para audio, video y picture. En este caso cuando el navegador no soporte algún formato usará el siguiente.
<iframe></iframe>La etiqueta iframe nos permite insertar fragmentos web de otros sitios. Esto puede ser un mapa, un reproductor de audio o video, un editor de texto etc.
<canvas></canvas>La etiqueta canvas nos permite crear un lienzo donde podemos hacer dibujos en 2D y 3D.
<svg></svg>La etiqueta svg nos permite crear gráficos vectoriales en nuestro documento HTML. También, se utilizan las etiquetas rect, circle, polygon y text dentro de svg para facilitar la creación de determinadas figuras geométricas o texto.
Por último, si deseas aprender más sobre HTML puedes visitar la página de Developer Mozilla.
Te sugiero poner en práctica los conceptos aprendidos y experimentar la funcionalidad de cada una de las etiquetas.
Happy Coding! 👾