La hoja de referencia de HTML Essentials: etiquetas, atributos y más

La creación de páginas web comienza con HTML. Embellecerlos y hacerlos interactivos llegará más tarde. Pero para comenzar a crear sitios web estáticos funcionales, necesita comprender HTML. (¿Quieres una introducción rápida a este lenguaje de marcado? Lea nuestro Preguntas frecuentes sobre HTML.)

Como parte del aprendizaje del idioma, existe una larga lista de elementos que debe agregar a su vocabulario HTML. Y esta tarea puede parecer desalentadora al principio, por eso hemos creado la siguiente hoja de trucos. Le brinda una manera fácil de descubrir / comprender / recuperar elementos HTML en cualquier momento que los necesite.

La hoja de referencia cubre etiquetas y atributos para estructurar páginas web, formatear texto, agregar formularios, imágenes, listas, enlaces y tablas. También incluye etiquetas que se introdujeron en HTML5 y códigos HTML para caracteres especiales de uso común.

DESCARGA GRATIS: Esta hoja de trucos está disponible como PDF descargable de nuestro socio de distribución, TradePub. Deberá completar un breve formulario para acceder a él solo por primera vez. Descargar

La hoja de referencia de HTML Essentials.

La hoja de referencia de HTML Essentials

... ... ... ... ...

...

Atajo	Acción
Etiquetas básicas
...	La primera y la última etiqueta de un documento HTML. Todas las demás etiquetas se encuentran entre estas etiquetas de apertura y cierre.
...	Especifica la colección de metadatos del documento.
	Describe el título de la página y aparece en la barra de título del navegador.
...	Incluye todo el contenido que se mostrará en la página web.
Información del Documento
Menciona la URL base y todos los enlaces relativos al documento.
Para obtener información adicional sobre la página como autor, fecha de publicación, etc.
Enlaces a elementos externos como hojas de estilo.
	Contiene información sobre el estilo del documento, como CSS (hojas de estilo en cascada).
	Contiene enlaces a scripts externos.
Formato de texto
... O ...	Hace que el texto esté en negrita.
...	Pone en cursiva el texto y lo pone en negrita.
...	Pone en cursiva el texto pero no en negrita.
...	Texto tachado.
...	Cita al autor de una cita.
...	Etiqueta una parte eliminada de un texto.
...	Muestra una sección que se ha insertado en el contenido.
...	Para mostrar cotizaciones. A menudo se usa con el etiqueta.
...	Para cotizaciones más breves.
...	Para abreviaturas y formas completas.
...	Especifica los detalles de contacto.
...	Para obtener definiciones.
...	Para fragmentos de código.
...	Para escribir subíndices
...	Para escribir superíndices.
...	Para reducir el tamaño del texto y marcar información redundante en HTML5.
Estructura del documento
...	Diferentes niveles de títulos. H1 es el más grande y H6 es el más pequeño.
...	Para dividir contenido en bloques.
...	Incluye elementos en línea, como una imagen, icono, emoticón, sin arruinar el formato de la página.
...	Contiene texto sin formato.
	Crea una nueva línea.
	Dibuja una barra horizontal para mostrar el final de la sección.
Liza
...	Para una lista ordenada de artículos.
...	Para una lista desordenada de elementos.
...	Para elementos individuales de una lista.
...	Lista de elementos con definiciones.
...	La definición de un solo término en línea con el contenido del cuerpo.
...	La descripción del término definido.
Enlaces
...	Etiqueta de anclaje para hipervínculos.
...	Etiqueta para vincular a direcciones de correo electrónico.
...	Etiqueta de anclaje para enumerar los números de contacto.
...	Etiqueta de anclaje para vincular a otra parte de la misma página.
...	Navega a una sección div de la página web. (Variación de la etiqueta anterior)
Imagenes
	Para mostrar archivos de imagen.
Atributos para el etiqueta
src = "url"	Enlace a la ruta de origen de la imagen.
alt = "texto"	El texto que se muestra cuando se coloca el mouse sobre la imagen.
altura = ””	Alto de la imagen en píxeles o porcentajes.
ancho = ””	Ancho de imagen en píxeles o porcentajes.
alinear = ””	Alineación relativa de la imagen en la página.
border = ””	Grosor del borde de la imagen.
	Enlace a un mapa en el que se puede hacer clic.
	Nombre de la imagen del mapa.
El área de imagen de un mapa de imágenes.
Atributos para el etiqueta
forma = ”"	Forma del área de la imagen.
coords = ””	Coordenadas del área de la imagen del mapa.
Formularios
...	La etiqueta principal de un formulario HTML.
Atributos para el etiqueta
action = "url"	La URL donde se envían los datos del formulario.
método = ””	Especifica el protocolo de envío de formularios (POST o GET).
enctype = ””	El esquema de codificación de datos para envíos POST.
autocompletar	Especifica si el autocompletado de formularios está activado o desactivado.
no validar	Especifica si el formulario debe validarse antes de enviarlo.
aceptar juegos de caracteres	Especifica la codificación de caracteres para el envío de formularios.
objetivo	Muestra dónde se mostrará la respuesta al envío del formulario.
...	Agrupa elementos relacionados en el formulario /
...	Especifica lo que el usuario debe ingresar en cada campo del formulario.
...	Un título para el elemento fieldset.
Especifica qué tipo de entrada tomar del usuario.
Atributos para el etiqueta
tipo = ””	Determina el tipo de entrada (texto, fechas, contraseña).
nombre = ””	Especifica el nombre del campo de entrada.
valor = ””	Especifica el valor en el campo de entrada.
tamaño = ””	Establece el número de caracteres para el campo de entrada.
maxlength = ””	Establece el límite de caracteres de entrada permitidos.
requerido	Hace que un campo de entrada sea obligatorio.
ancho = ””	Establece el ancho del campo de entrada en píxeles.
altura = ””	Establece la altura del campo de entrada en píxeles.
placeholder = ””	Describe el valor de campo esperado.
patrón = ""	Especifica una expresión regular, que se puede usar para buscar patrones en el texto del usuario.
min = ””	El valor mínimo permitido para un elemento de entrada.
max = ””	El valor máximo permitido para un elemento de entrada.
discapacitado	Desactiva el elemento de entrada.
...	Para capturar cadenas de datos más largas del usuario.
...	Especifica una lista de opciones entre las que el usuario puede elegir.
Atributos para el etiqueta
nombre = ””	Especifica el nombre de una lista desplegable.
tamaño = ””	Número de opciones dadas al usuario.
múltiple	Establece si el usuario puede elegir varias opciones de la lista.
requerido	Especifica si es necesario elegir una opción para enviar el formulario.
enfoque automático	Especifica que una lista desplegable se enfoca automáticamente después de que se carga una página.
...	Define elementos en una lista desplegable.
valor = ””	Muestra el texto de cualquier opción dada.
seleccionado	Establece la opción predeterminada que se muestra.
...	Etiqueta para crear un botón para el envío de formularios.
Objetos e iFrames
	Describe el tipo de archivo incrustado.
Atributos para el
altura = ””	La altura del objeto.
ancho = ””	El ancho del objeto.
tipo = ””	El tipo de medio que contiene el objeto.
	Un marco en línea para incrustar información externa.
nombre = ””	El nombre del iFrame.
src = ””	La URL de origen del contenido dentro del marco.
srcdoc = ””	El contenido HTML dentro del marco.
altura = ””	La altura del iFrame.
ancho = ””	El ancho del iFrame.
Agrega parámetros adicionales para personalizar el iFrame.
...	Incorpora una aplicación o complemento externo.
Atributos para el
altura = ""	Establece la altura de la inserción.
ancho = ""	Establece el ancho de la inserción.
tipo = ””	El tipo o formato de la inserción.
src = ””	La ruta de origen del archivo incrustado.
Mesas
...	Define todo el contenido de una tabla.
Una descripción de la mesa.
Encabezados para cada columna de la tabla.
Define los datos del cuerpo de la tabla.
Describe el contenido del pie de página de la tabla.
Contenido para una sola fila.
	...	Los datos en un solo elemento de encabezado.
	...	Contenido dentro de una sola celda de tabla.
Agrupa columnas para formatear.
Una sola columna de información.
Nuevas etiquetas HTML5
...	Especifica el encabezado de la página web.
	Especifica el pie de página de la página web.
...	Marca el contenido principal de la página web.
...	Especifica un artículo.
	Especifica el contenido de la barra lateral de una página.
...	Especifica una sección particular de la página web.
...	Para describir información adicional.
...	Se utiliza como encabezado de la etiqueta anterior. Siempre es visible para el usuario.
...	Crea un cuadro de diálogo.
...	Se utiliza para incluir gráficos y figuras.
	Describe un elemento.
...	Destaca una parte específica del texto.
	Conjunto de enlaces de navegación en una página web.
...	Un elemento en particular de una lista o un menú.
...	Mide datos dentro de un rango determinado.
...	Coloca una barra de progreso y realiza un seguimiento del progreso.
...	Muestra texto que no admite anotaciones Ruby.
...	Muestra detalles de caracteres tipográficos de Asia Oriental.
...	Una anotación Ruby para la tipografía de Asia Oriental.
...	Identifica la hora y la fecha.
Un salto de línea dentro del contenido.
¹Objetos de carácter HTML5
" O & quot;	Comillas
& lt;	Menor que el signo (
> O & gt;	Mayor que el signo (>)
O & nbsp;	Espacio irrompible
© O &Copiar ;	símbolo de copyright
™ O & ucirc;	Símbolo de marca registrada
@ O & Uuml;	Símbolo "arroba" (@)
& O & amp;	Símbolo de ampersand (&)
• O & ouml;	Bala pequeña
¹ Ignore el espacio antes del punto y coma al escribir un carácter HTML.

Cree un sitio web para una experiencia práctica

Una vez que hayas entendido los conceptos básicos del código HTML y tener conocimientos prácticos de CSS y JavaScript, prueba tu mano en la construcción de un sitio web Cómo hacer un sitio web: para principiantesHoy te guiaré a través del proceso de creación de un sitio web completo desde cero. No se preocupe si esto suena difícil. Lo guiaré a través de él en cada paso del camino. Lee mas . Además, asegúrese de guardar nuestro Hoja de referencia de propiedades CSS3 La hoja de trucos de propiedades esenciales de CSS3Domine la sintaxis CSS esencial con nuestra hoja de trucos de propiedades CSS3. Lee mas y Hoja de referencia de JavaScript La última hoja de trucos de JavaScriptObtenga un repaso rápido sobre los elementos de JavaScript con esta hoja de trucos. Lee mas ¡para uso futuro!