Show Menu
Cheatography
  1. Home >
  2. Programming >

HTML5 Standard cheatsheet (español) Cheat Sheet by

Glosario de etiquetas e información básica sobre etiquetas HTML5 como material de apoyo básico del desarrollador web

Estructura básica

HTML
 
<!D­OCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>
La etiqueta 
<ht­ml>
representa la raíz de un documento HTML (HyperText Markup Language). Se recomienda que también se indique el doctype del documento.

Coment­arios

<!-- Comentario HTML -->

HEAD (cabecera)

<base>
Base utilizada para URls relativas
<base href="...">
 
<link>
Especifica otros recursos relaci­onados con el documento, como hojas de estilo
<link href="..." rel="...">
 
<meta>
Metadatos adicio­nales para el navegador
<meta charse­t="u­tf-­8" name="S­ema­">

<meta name="d­esc­rip­tio­n" conten­t="...">
 
<script>
Añade un fichero JavaScript
<script src="js­-fi­le.j­s">...<­/s­cri­pt>
 
<style>
Estilos CSS embebidos
<st­yle­>...</­sty­le>
 
<title>
Título del documento HTML
<ti­tle­>...</­tit­le>
Estas etiquetas son metadatos para el navegador, por lo que este contenido no será visible (excepto la etiqueta del título).

Atributos soportados en HTML5

Atributo
Descri­pción
accesskey
Tecla de acceso rápido
class
Clase o lista de clases
conten­ted­itable
Indica si el contenido es editable o no
contex­tmenu
Especifica el menú contextual para el elemento
data-*
Especifica metadatos
dir
Dirección del texto
draggable
Habilita o no el drag&drop
dropzone
Especifica el comporta-miento al arrastrar o soltar
hidden
Oculta el campo
id
Identi­ficador único
lang
Idioma
spellcheck
Indica si el elemento debe comprobar su ortografía
style
Estilos en línea
tabindex
Orden de tabulación
title
Aporta inform­ación adicional

Estructura HTML

  

Etiquetas estruc­turales

<address>
Inform­ación para el 
<ar­tic­le>
más cercano o ancestro 
<bo­dy>
 
<article>
Elemento de inform­ación auto-c­ont­enida de un documento, página o similar
 
<as­ide>
Contenido indire­cta­mente relaci­onado con el contenido principal del documento
 
<fo­ote­r>
Pie de página que aplica a la sección o ancestro más cercano (puede ser 
<ar­tic­le>
, 
<bo­dy>
, 
<fi­gur­e>
, 
<na­v>
, 
<se­cti­on>
, etc.)
 
<he­ade­r>
Encabezado
 
<ma­in>
Contenido principal y único del documento
 
<na­v>
Contenido para navegación y enlaces
 
<section>
Representa una sección genérica
Estas etiquetas permiten estruc­turar y organizar el contenido en partes lógicas, como si fuera un libro

Etiquetas de texto

<blockquote>
Crea citas en bloque
 
<di­v>
Crea divisiones que definen secciones o agrupa contenidos
 
<figcaption>
Subtítulo o leyenda asociado al 
<fi­gur­e>
padre
 
<figure>
Contenido indepe­ndi­ente, como una imagen o un fragmento de código
 
<hr>
Cambio de tema entre párrafos
 
<p>
Párrafo
 
<pr­e>
Representa texto prefor­mateado

Etiquetas de texto en línea

<a>
Enlace a una página, archivo, dirección de correo o ubicación
 
<ab­br>
Abrevi­ación o acrónimo
 
<b>
Negrita (b = bold)
 
<bd­i>
Permite cambiar la dirección de un texto; se anula con 
<bd­o>
 
<br>
Salto de línea
 
<cite>
Marca una referencia a una fuente o a un autor
 
<da­ta>
Vincula un contenido dado con una traducción legible por una máquina
 
<em>
Aplica énfasis a partes import­antes de un texto
 
<i>
Muestra el texto en cursiva o italica
 
<ma­rk>
Marca o resalta un fragmento de un texto debido a su relevancia o import­ancia
 
<q>
Indica que el texto adjunto es una cita corta en línea
 
<sp­an>
Contenedor de texto en línea, que permite aplicar estilo a subpartes del bloque de texto
 
<strong>
Refuerza un texto (más import­ancia que 
<b>
)
 
<sub>
Texto en forma subíndice
 
<sup>
Texto en forma superí­ndice
 
<time>
Representa un periodo específico de tiempo
Estas etiquetas son utilizadas para definir el signif­icado, estructura o estilo de una palabra, línea o fragmento de texto

Etiquetas de imagen y multimedia

<ar­ea>
Permite crear secciones de un mapa de imágenes
 
<audio>
Inserta un audio
 
<iframe>
Embebe otro documento HTML completo
 
<im­g>
Inserta una imagen
 
<sv­g>
Embebe una imagen en formato vector­izado
 
<vi­deo>
Inserta un vídeo
 

Formul­arios

<button>
Representa un elemento clickable de tipo botón para desenc­adenar acciones
 
<fieldset>
Organiza en grupos o conjuntos los campos de un formulario
 
<fo­rm>
Sección de un documento que contiene controles para recoger inform­ación introd­ucida por el usuario (formu­lario)
 
<in­put>
Campo de entrada de inform­ación, que podrá ser numérico, color, contra­seña, texto, fichero, url, email, etc.
 
<la­bel>
Permite indicar un texto que va junto a un control de formulario
 
<op­tgr­oup>
Permite crear agrupa­ciones de 
<op­tio­n>
dentro de un 
<se­lec­t>
 
<op­tio­n>
Permite crear opciones para el desple­gable de un 
<se­lec­t>
 
<pr­ogr­ess>
Muestra una barra de progreso
 
<se­lec­t>
Representa un control de formulario que muestra un menú de opciones, donde cada una es repres­entada con 
<op­tio­n>
 
<textarea>
Representa un control de formulario para la edición de multilínea de texto sin formato

Listas

<ul>
Lista desord­enada
 
<ol>
Lista ordenada (numerada)
 
<li>
Elemento o ítem de la lista
 
<dl>
Lista de defini­ciones
 
<dt>
Definición del término
 
<dd>
Descri­pción de la definición

Tablas

<ta­ble>
Tabla (datos en dos o más direcc­iones)
 
<th­ead>
Cabecera de la tabla
 
<tb­ody>
Cuerpo de la tabla
 
<th>
Celda de cabecera
 
<tr>
Fila
 
<td>
Celda de tabla
 
<tf­oot>
Pie de tabla
 
<caption>
Título de la tabla
 
<co­l>
Permite especi­ficar propie­dades para una columna o grupo de ellas
 
<colgroup>
Permite crear grupos de columnas

Scripting

<canvas>
Permite dibujar gráficos o animac­iones a través de JavaScript
 
<noscript>
Muestra su contenido cuando el navegador no soporta o no habilita JavaScript
 
<sc­rip­t>
Permite añadir contenido JavaSc­ript, bien en línea o bien refere­nciando una URL o ubicación
       
 

Metadata

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Web Programming Cheat Sheet
          HTML5 deutsch Cheat Sheet
            HTML 5 Cheat Sheet by Smashing Magazine