A continuación hemos creado un práctico resumen de etiquetas HTML en formato de chuleta. Aprende rápidamente las etiquetas clave para diseñar páginas web. Esperamos que esta tabla resumen te ayude en el desarrollo de tus proyectos de diseño de sitios web.
Contenidos del artículo
1. Estructura básica
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link href="estilos.css" rel="stylesheet">
</head>
<body>
<!-- Comentario -->
<p>párrafo</p>
</body>
</html>
2. Elementos estructurales
Elemento
Descripción
<!DOCTYPE html>
Indica que el documento está bajo el estándar de HTML5.
<html>
Representa la raíz de un documento HTML. Es una buena práctica indicar el idioma mediante el atributo lang.
<head>
En su interior se incluye la colección de metadatos sobre el documento, los enlaces a scripts y hojas de estilo.
<title>
Representa el título del documento. Se muestra en la barra superior del navegador o en las pestañas de página.
<link>
Enlaza documentos externos, por ejemplo CSS.
<meta>
Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<style>
Usada para escribir CSS interno.
<script>
Define un script interno o un enlace hacia un script externo de JavaScript.
<body>
Recoge todo el contenido que puede ver un usuario de un documento HTML. Sólo puede existir un elemento <body> en el documento.
Especifica una sección que contiene un menú de navegación.
<article>
Determina secciones de contenido.
<aside>
Define la barra lateral de una página web.
<h1><h2><h3><h4><h5><h6>
Describe el tema de la sección. Disponemos de seis niveles: de h1 a h6, siendo <h1> la cabecera de mayor importancia. Sólo puede existir una etiqueta <h1> en el documento.
<header>
Determina la cabecera de una web o de un elemento.
<footer>
Define el pie de página. También se puede utilizar para definir el pie de otros elementos.
<address>
Especifica una sección que contiene información de contacto.
<main>
Determina el contenido principal del documento. Solo puede existir un elemento <main> en el documento.
Define un comentario aparte, es decir, textos de políticas de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
<s>
Representa contenido que no es exacto, tiene el estilo tachado.
<cite>
Indica el título de una obra.
<q>
Representa una cita textual entre comillas.
<dfn>
Sirve para marcar el término que se quiere definir.
<abbr>
Envuelve un texto que al pasar el puntero por encima despliega un tooltip. El contenido del tooltip se detalla mediante el atributo title.
<time>
Determina un valor de fecha y hora.
<code>
Establece un código de programación.
<sub><sup>
Establece un subíndice y un superíndice respectivamente.
<i>
Muestra el texto marcado con un estilo en cursiva o itálica.
<b>
Representa el texto marcado con un estilo en negrita.
<u>
Muestra el texto subrayado.
<mark>
Representa un texto marcado o resaltado.
<span>
Especifica texto en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.
<br>
Inserta un salto de línea.
<wbr>
Indica una oportunidad de salto de línea, es decir, un punto sugerido donde el texto puede ser dividido para mejorar su legibilidad.
Permite organizar en grupos los campos de un formulario.
<legend>
Representa el título de un <fieldset>.
<label>
Representa el título de un elemento de control de un formulario.
<input>
Se usa para crear controles interactivos que reciben datos del usuario.
<button>
Representa un botón.
<option>
Representa una opción en un elemento <select> o <datalist>.
<select>
Representa un elemento de control que permite la selección entre un conjunto de opciones <option>.
<optgroup>
Representa un conjunto de opciones, agrupadas lógicamente dentro de un <select>
<datalist>
Se utiliza junto con la etiqueta <input> para proporcionar una lista de opciones <option> que ayudan a los usuarios a seleccionar un valor mientras escriben en un campo de entrada <input>.
<textarea>
Representa un elemento de control de edición de texto multilínea.
<output>
Representa el resultado de un cálculo.
Tabla 7. Etiquetas para la creación de formularios
Tipo de input: text, password, checkbox, radio, etc.
value
Valor inicial del input.
readonly
El input es de solo lectura.
disabled
El input no se puede modificar.
size
Cantidad de caracteres visibles en un input. Su valor por defecto es 20. Funciona en los inputs de los siguientes tipos: text, search, tel, url, email, and password.
maxlength
Máximo número de caracteres del input.
min / max
Mínimo y máximo número de caracteres del input.
pattern
Nos permite indicar un patrón.
placeholder
Describe el valor esperado en un campo.
required
Especifica que es obligatorio completar el input.
autofocus
Indica que se hace foco en ese input cuando se carga la página.
Casilla de verificación que permite seleccionar o deseleccionar distintos valores.
color
Control para especificar un color; abre un selector de colores cuando está activo.
date
Permite indicar una fecha (año, mes y día, sin hora). Abre un selector de fechas para año, mes y día.
email
Permite insertar un correo electrónico haciendo su validación.
file
Permite seleccionar un archivo.
image
Botón con imagen de tipo submit. La imagen se define en el atributo src.
month
Permite ingresar mes y año.
number
Permite ingresar un número. Muestra un selector y agrega validación predeterminada.
password
Valor oculto. Usado para contraseñas.
radio
Permite seleccionar un valor único entre múltiples opciones.
range
Nos deja ingresar un número cuyo valor exacto no es importante. Se muestra como un widget de rango con un valor predeterminado en el medio. Se utiliza en conjunto con «min» y «max» para definir el rango de valores aceptados.
search
Campo para ingresar cadenas de búsqueda.
submit
Botón que envía el formulario
tel
Control para ingresar un número de teléfono y agrega validación predeterminada.
text
Control para campo de texto con validación predeterminada.
Etiquetas HTML en bloque:<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><ol><p><pre><section><table><ul><video>
15. Elementos en línea o inline
Etiquetas HTML en línea: <a><abbr><b><button><cite><code><dfn><em><i><img><input><label><q><select><small><span><strong><sub><sup><textarea><time>
Define el título del documento, que se muestra en la barra de título del navegador y en los resultados de búsqueda.
<meta charset="UTF-8">
Especifica la codificación de caracteres utilizada en el documento. UTF-8 es la codificación más comúnmente utilizada para admitir caracteres multilingües.
<meta name="description" content="">
Proporciona una breve descripción del contenido del sitio web. Es utilizado por los motores de búsqueda para mostrar información sobre el sitio en los resultados de búsqueda.
<meta name="keywords" content="">
Especifica palabras clave relacionadas con el contenido del sitio web. Aunque no es tan relevante para los motores de búsqueda modernos, aún puede ser utilizado para conocer la temática del sitio web.
<meta name="viewport" content="">
Define cómo se debe ajustar y escalar el contenido en dispositivos móviles. Es importante para lograr un diseño responsive. Ver configuración de la metaetiqueta viewport.
<meta name="author" content="">
Especifica el nombre del autor del documento.
<meta name="copyright" content="">
Indica los derechos de autor del documento.
<meta name="robots" content="">
Indica a los motores de búsqueda si deben indexar y seguir los enlaces dentro del documento.
