Show Menu
Cheatography

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
       
 

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