📅 Vie, 18 Oct 2024 ⏲️ ~ 8 minutos Iniciación

CheatSheet HTML

Es el lenguaje estándar para crear y estructurar páginas web. Permite definir el contenido de un documento web a través de una serie de elementos y etiquetas.

Cada elemento puede tener atributos que modifican su comportamiento o apariencia (frecuentemente en combinación con CSS y JS).

Estructura mínima

El esqueleto básico de un documento HTML incluye los elementos principales como doctype, html, head, y body.

<!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>
    <!-- Contenido de la página -->
  </body>
</html>

Comentarios en HTML

Los comentarios se usan para incluir notas en el código sin que afecten el contenido.

<!-- Este es un comentario -->

Título

Define el título de la página, que aparece en la pestaña del navegador y en los resultados de búsqueda.

<title>Título de la Página</title>

Etiquetas Meta

Las etiquetas meta en el head proporcionan información adicional sobre al web (por ejemplo, para SEO).

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción del sitio">
<meta name="author" content="Nombre del Autor">

Etiqueta	Descripción
`description`	Resumen del contenido de la página para SEO.
`author`	Nombre del autor del contenido.
`viewport`	Optimiza la visualización en dispositivos móviles.
`charset`	Define el conjunto de caracteres utilizado.

Añadir un Favicon

El favicon es el ícono que aparece en la pestaña del navegador. Se puede añadir utilizando una etiqueta <link>:

<link rel="icon" href="favicon.ico" type="image/x-icon">

Añadir CSS

Para incluir un archivo CSS externo y estilizar la página, usa la etiqueta <link>:

<link rel="stylesheet" href="styles.css">

Si deseas incluir CSS en línea, utiliza la etiqueta <style>:

<style>
  body {
    background-color: lightblue;
  }
</style>

Añadir JavaScript

Para incluir un archivo JavaScript externo, utiliza la etiqueta <script> en la parte inferior del <body> o en el <head> con el atributo defer para asegurar que el DOM esté cargado antes de ejecutar el script:

<script src="script.js" defer></script>

Para incluir código JavaScript directamente:

<script>
  console.log('Hola, mundo!');
</script>

Elementos y Etiquetas

HTML está compuesto por una serie de elementos, cada uno definido por una etiqueta que puede tener un contenido y atributos.

Etiqueta	Descripción
`<html>`	Raíz del documento HTML.
`<head>`	Contiene metadatos sobre el documento.
`<title>`	Título de la página que aparece en la pestaña del navegador.
`<body>`	Contenido visible de la página.
`<h1>` a `<h6>`	Encabezados, donde `<h1>` es el más importante y `<h6>` el menos.
`<p>`	Define un párrafo.
`<a>`	Crea un enlace.
`<img>`	Inserta una imagen.
`<div>`	Se utiliza como contenedor para otros elementos.
`<span>`	Define un texto en línea.
`<strong>`	Indica que el texto tiene una importancia fuerte (negrita).
`<em>`	Indica énfasis (cursiva).
`<br>`	Inserta un salto de línea.
`<hr>`	Crea una línea horizontal.
`<blockquote>`	Define un bloque de texto citado.

Atributos HTML

Los atributos proporcionan información adicional sobre los elementos. Se colocan dentro de la etiqueta de apertura.

Atributo	Descripción
`id`	Identificador único para un elemento.
`class`	Define una o más clases para un elemento.
`style`	Define estilos CSS en línea.
`href`	Especifica la URL de un enlace.
`src`	Define la fuente de una imagen o archivo de medios.
`alt`	Texto alternativo para una imagen.
`title`	Proporciona información adicional al pasar el mouse.
`target`	Especifica cómo abrir el enlace (p. ej., `_blank` para abrir en nueva pestaña).
`rel`	Define la relación entre el documento actual y el recurso enlazado.
`lang`	Especifica el idioma del contenido.

<p id="parrafo1" class="texto-destacado" style="color: red;" title="Texto importante">Este es un párrafo.</p>

Encabezados

Los encabezados (h1 a h6) son usados para títulos y subtítulos, donde h1 es el más importante y h6 el menos.

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>

Párrafos

Para bloques de texto normal se usa el elemento p.

<p>Este es un párrafo de texto.</p>

Énfasis y Negrita

<strong> enfatiza texto en negrita, mientras que <em> enfatiza con cursiva.

<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>

Texto subíndice y superíndice

Para ecuaciones o notación científica se usan <sub> y <sup>.

H<sub>2</sub>O (agua) y E = mc<sup>2</sup> (energía).

Hipervínculos

Los enlaces se crean con el elemento a y el atributo href.

<a href="https://example.com">Visita Example</a>

Enlaces ancla (navegación interna)

Se usan para saltar a una sección específica de la página.

<a href="#seccion">Ir a sección</a>

<!-- El destino de la ancla -->
<h2 id="seccion">Título de Sección</h2>

Abrir enlaces en una nueva pestaña

Para abrir un enlace en una nueva pestaña, se usa el atributo target="_blank".

<a href="https://example.com" target="_blank">Abrir en nueva pestaña</a>

Evitar hacerlo, salvo que tengas un motivo realmente justificado (no quiero que se vayan de mi web no es un motivo justificado)

Insertar imágenes

Usa el elemento img con el atributo src para especificar la ruta de la imagen.

<img src="imagen.jpg" alt="Descripción de la imagen">

Atributos de la etiqueta <img>

Atributo	Descripción
`src`	Ruta de la imagen.
`alt`	Texto alternativo para la imagen.
`width`	Ancho de la imagen.
`height`	Altura de la imagen.

Atributo alt para accesibilidad

El atributo alt describe la imagen en caso de que no se pueda cargar o para lectores de pantalla.

<img src="foto.jpg" alt="Una foto de un paisaje al atardecer.">

Las listas son útiles para agrupar elementos similares (que forman parte de una misma colección).

Listas ordenadas

Se usan cuando el orden de los elementos es importante, con el elemento ol.

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
</ol>

Listas desordenadas

Para listas sin orden, se usa el elemento ul.

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

Listas anidadas

Puedes anidar listas dentro de otras listas.

<ul>
  <li>Elemento principal
    <ul>
      <li>Subelemento 1</li>
      <li>Subelemento 2</li>
    </ul>
  </li>
</ul>

Crear tablas en HTML

Se usan los elementos table, tr (fila), th (encabezado), y td (celda).

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Luis</td>
    <td>23</td>
  </tr>
</table>

Combinar celdas

Usa colspan o rowspan para combinar celdas horizontal o verticalmente.

<td colspan="2">Celda combinada</td>

Atributos de tabla

Atributo	Descripción
`border`	Define el ancho del borde de la tabla.
`cellpadding`	Espacio entre el borde de la celda y su contenido.
`cellspacing`	Espacio entre las celdas de la tabla.

Formularios básicos

Los formularios se crean con el elemento form y sus diferentes tipos de entrada (input, textarea, select).

<form action="/enviar" method="post">
  <input type="text" name="nombre" placeholder="Nombre">
  <input type="submit" value="Enviar">
</form>

Tipos de input comunes

Los tipos de entrada más comunes son text, password, email, number, date, y checkbox.

<input type="email" name="correo" placeholder="Correo">
<input type="password" name="clave" placeholder="Contraseña">

Etiquetas para accesibilidad

El uso de la etiqueta label mejora la accesibilidad.

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

Elementos de formulario

Elemento	Descripción
`<input>`	Campo para la entrada de datos.
`<textarea>`	Área de texto multilínea.
`<select>`	Lista desplegable de opciones.
`<button>`	Botón para enviar o realizar una acción.

Vídeos

Para insertar vídeos, se usa el elemento video.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta el video.
</video>

Atributos de la etiqueta <video>

Atributo	Descripción
`controls`	Muestra los controles de reproducción.
`autoplay`	Reproduce el video automáticamente.
`loop`	Repite el video al finalizar.
`muted`	Silencia el video.

Audio

El elemento audio es similar al de video pero para archivos de sonido.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta el audio.
</audio>

Atributos de la etiqueta <audio>

Atributo	Descripción
`controls`	Muestra los controles de reproducción.
`autoplay`	Reproduce el audio automáticamente.
`loop`	Repite el audio al finalizar.
`muted`	Silencia el audio.

Canvas

El elemento canvas se utiliza para dibujar gráficos con JavaScript.

<canvas id="miCanvas" width="200" height="100"></canvas>

SVG (Scalable Vector Graphics)

SVG permite dibujar gráficos vectoriales en HTML.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

Elementos semánticos

Los elementos semánticos son aquellos que tienen un significado claro y ayudan a los motores de búsqueda y a los lectores de pantalla a entender el contenido.

Elemento	Descripción
`<header>`	Define un encabezado para un documento o sección.
`<nav>`	Navegación principal.
`<footer>`	Define un pie de página.
`<article>`	Representa un contenido independiente.
`<section>`	Define secciones temáticas en un documento.
`<aside>`	Contenido relacionado, como una barra lateral.
`<main>`	Contenido principal de un documento.
`<figure>`	Contiene contenido ilustrativo, como imágenes.
`<figcaption>`	Leyenda para un `<figure>`.

<header>
  <h1>Bienvenido a mi sitio web</h1>
</header>
<nav>
  <a href="#">Inicio</a>
  <a href="#">Contacto</a>
</nav>
<section>
  <h2>Sobre nosotros</h2>
  <p>Información sobre nuestra empresa.</p>
</section>
<footer>
  <p>Derechos reservados © 2024</p>
</footer>

Roles de ARIA

Los roles de ARIA mejoran la accesibilidad para usuarios de lectores de pantalla.

<nav role="navigation">
  <!-- Enlaces de navegación -->
</nav>

Atributos de accesibilidad

Los atributos como aria-label y aria-hidden son útiles para mejorar la accesibilidad.

<button aria-label="Cerrar">X</button>

Estructura básica de html

Añadir elementos básicos

Resumen de elementos y atributos

Elementos de texto

Enlaces y navegación

Imágenes

Listas

Tablas

Formularios y entradas

Multimedia y gráficos

Estructura semántica

Accesibilidad en HTML