HTML5 Notes Traducido

Machine Translated by Google HTML5
Notas para profesionales HTML5
Notas para profesionales
más de 100 páginas

de consejos y trucos profesionales
Descargo
GolKicker.com Libros de de responsabilidad Este es un libro gratuito no oficial creado con fines
educativos y no está asociado con grupos o empresas oficiales de H
Programación Gratis Todas las marcas comerciales y marcas registradas
son propiedad de sus respectivos dueños
Machine Translated by Google
Contenido
Sobre .................................................... .................................................... .................................................... ............................. 1
Capítulo 1: Primeros pasos con HTML .................................................... .................................................... ............ 2
Sección 1.1: Hola mundo .................................................... .................................................... ............................................. 2
Capítulo 2: Doctipos .............................................. .................................................... .................................................... .. 5
Sección 2.1: Agregando el Doctype .................................................. .................................................... .................................... 5

Sección 2.2: Tipo de documento HTML 5 ........................................... .................................................... ............................................. 5
Capítulo 3: Títulos .............................................. .................................................... .................................................... .. 6
Sección 3.1: Uso de encabezados ............................................... .................................................... .......................................... 6

Capítulo 4: Párrafos .............................................. .................................................... .............................................................7
Sección 4.1: Párrafos HTML ............................................... .................................................... ...................................... 7
Capítulo 5: Formato de texto ............................................... .................................................... ...................................... 8
Sección 5.1: Resaltar ............................................... .................................................... .......................................... 8
Sección 5.2: Negrita, cursiva y subrayado .................................................... .................................................... ..................... 8
Sección 5.3: Abreviatura .................................................... .................................................... .......................................... 9
Sección 5.4: Insertado, Eliminado o Tachado Sección .................................................... .................................................... ............... 9
5.5: Superíndice y Subíndice .................................. .................................................... .................................... 9

Capítulo 6: Anclajes e hipervínculos ............................................... .................................................... ..................... 11
Sección 6.1: Enlace a otro sitio .................................................... .................................................... ............................... 11
Sección 6.2: Enlace a un ancla .................................................... .................................................... ................................ 12
Sección 6.3: Enlace a una página en el mismo sitio .................................................... .................................................... ........ 12
Sección 6.4: Enlace que marca un número .................................................... .................................................... ..................... 12
Sección 6.5: Abrir enlace en una nueva pestaña/ventana .................................. .................................................... ...................... 13
Sección 6.6: Enlace que ejecuta JavaScript ........................................... .................................................... .......................... 13
Sección 6.7: Enlace que ejecuta el cliente de correo electrónico .................................................... .................................................... .................. 14
Capítulo 7: Listas .................................................... .................................................... .................................................... ...... 15

Sección 7.1: Lista ordenada .................................................... .................................................... .......................................... 15
Sección 7.2: Lista desordenada .................................................... .................................................... ..................................... dieciséis
Sección 7.3: Listas anidadas .................................................... .................................................... .......................................... 17
Sección 7.4: Lista de descripción .................................................... .................................................... ..................................... 17
....................................................
Capítulo 8: Tablas Sección 8.1: Tabla .................................................... .................................................... . 19
simple Sección 8.2: Expansión de.................................................... .................................................... ........................................ 19
columnas o filas Sección 8.3: Grupos de .................................................... .................................................... ................ 19
columnas ........... .................................................... .................................................... .......... 20

Sección 8.4: Tabla con encabezado, cuerpo, pie y título ........................................... .................................................... .. 21
Sección 8.5: Alcance del encabezado ............................................. .................................................... .......................................... 22
Capítulo 9: Comentarios .................................................... .................................................... .......................................... 24
Sección 9.1: Crear comentarios .................................................... .................................................... ............................. 24
Sección 9.2: Comentar espacios en blanco entre elementos en línea .................................................... ..................... 24
Capítulo 10: Clases e ID .................................................... .................................................... ............................... 26
Sección 10.1: Asignación de una clase a un .................................................... .................................................... .................. 26
elemento Sección 10.2: Asignación de un ID a .................................................... .................................................... ................... 27

.................................................... .................................................... .............................
un elemento Sección 10.3: Valores aceptables 27
Sección 10.4: Problemas relacionados con ID duplicados .................................................... .................................................... . 29
Capítulo 11: Atributos de los datos .................................................... .................................................... ............................... 30
Sección 11.1: Compatibilidad con navegadores más antiguos .................................. .................................................... .......................... 30
Sección 11.2: Uso de atributos de datos .................................................... .................................................... ............................. 30
Capítulo 12: Enlace de recursos .................................................... .................................................... ......................... 31
Sección 12.1: JavaScript ............................................... .................................................... ............................................... 31
Sección 12.2: Hoja de estilo CSS externa ........................................... .................................................... .......................... 32

Sección 12.3: Favicon .................................................... .................................................... .......................................................... 32
Sección 12.4: CSS alternativo .................................................... .................................................... .................................... 32
Sección 12.5: Sugerencia de recursos: dns-prefetch, prefetch, prerender .................................. .......................................... 33

Sección 12.6: Atributo 'medios' del enlace .................................................... .................................................... ........................ 33
Sección 12.7: Anterior y Siguiente .................................................... .................................................... ..................................... 33
Sección 12.8: Fuente web .................................................... .................................................... .......................................... 33
Capítulo 13: Incluir código JavaScript en HTML .................................................... .......................................... 35
Sección 13.1: Manejo de Javascript deshabilitado ........................................... .................................................... .......... 35
Sección 13.2: Vinculación a un archivo JavaScript externo Sección .................................................... ................................................ 35
13.3: Inclusión directa de código JavaScript Sección 13.4: Inclusión.................................................... .................................................... .. 35
de un archivo JavaScript que se ejecuta de forma asíncrona .............. ............................................. 35
Capítulo 14: Uso de HTML con CSS Sección 14.1: Uso .................................................... .................................................... .................. 36
de la hoja de estilo externa Sección 14.2: Hoja de .................................................... .................................................... ..................... 36
estilo interna .......................... .................................................... ............................................... 36
Sección 14.3: Estilo en línea ............................................. .................................................... ............................................... 37
Sección 14.4: Múltiples hojas de estilo ............................................... .................................................... .......................... 37

Capítulo 15: Imágenes .............................................. .................................................... .................................................... .. 38
Sección 15.1: Creación de una imagen ........................................... .................................................... .................................... 38
Sección 15.2: Elegir texto alternativo .................................................... .................................................... ................................ 38
Sección 15.3: Imagen receptiva usando el atributo srcset Sección 15.4: .................................................... .................................... 39
Imagen receptiva usando el elemento de imagen .................................................... ............................................. 40
Capítulo 16: Mapas de imágenes ............................................. .................................................... ..........................................41

Sección 16.1: Introducción a los mapas de imágenes .................................. .................................................... ..................... 41
Capítulo 17: Elementos de control de entrada .................................................... .................................................... .............. 43
Sección 17.1: Texto .................................................... .................................................... .................................................... .... 43
Sección 17.2: Casilla de verificación y botones de opción .................................................... .................................................... ........... 44
Sección 17.3: Validación de entrada .................................................... .................................................... .................................... 46
Sección 17.4: Color .................................................... .................................................... .................................................... .. 47
Sección 17.5: Contraseña .................................................... .................................................... ............................................ 48
Sección 17.6: Archivo .................................................... .................................................... .................................................... ..... 48
Sección 17.7: Botón .................................................... .................................................... .......................................................... 49
Sección 17.8: Enviar .................................................... .................................................... .......................................................... 50
Sección 17.9: Restablecer .................................................... .................................................... .................................................... . 50
Sección 17.10: Oculto .................................................... .................................................... .......................................................... 50
Sección 17.11: Teléfono .................................................... .................................................... .................................................... ..... 50
Sección 17.12: Correo electrónico .................................................... .................................................... .................................................... 51
Sección 17.13: Número .................................................... .................................................... ............................................................. 51
Sección 17.14: Alcance ............................................... .................................................... .................................................... .. 51

Sección 17.15: Búsqueda .................................................... .................................................... ................................................ 51
Sección 17.16: Imagen ............................................... .................................................... .................................................... ... 51

Sección 17.17: Semana .................................................... .................................................... .................................................... 52
Sección 17.18: URL .................................................... .................................................... .................................................... .... 52
Sección 17.19: DateTime-Local .................................................... .................................................... ................................ 52
Sección 17.20: Mes .................................................... .................................................... ................................................ 52
Sección 17.21: Tiempo .................................................... .................................................... .................................................... . 52
Sección 17.22: Fecha y hora (Global) ........................................... .................................................... .................................... 53

Sección 17.23: Fecha .................................................... .................................................... .................................................... 53
Capítulo 18: Formularios .................................................... .................................................... .................................................... 54
Sección 18.1: Envío .................................................. .................................................... ............................................... 54
Sección 18.2: Atributo de destino en la etiqueta de formulario .................................. .................................................... ..................... 55
Sección 18.3: Carga de archivos .................................................... .................................................... .................................... 55
Sección 18.4: Agrupación de algunos campos de entrada.................................................... .................................................... .............. 55
Capítulo 19: Elemento Div .................................................... .................................................... ...................................... 57
Sección 19.1: Uso básico ............................................... .................................................... ............................................. 57
Sección 19.2: Anidamiento ............................................... .................................................... .................................................... 57
Capítulo 20: Elementos de sección .................................................... .................................................... ................... 59
Sección 20.1: Elemento de navegación .................................................... .................................................... ...................................... 59
Sección 20.2: Artículo Elemento .................................................... .................................................... .................................... 60
Sección 20.3: Elemento Principal .................................................... .................................................... ..................................... 61
Sección 20.4: Elemento de encabezado .................................................... .................................................... ................................ 62
Sección 20.5: Elemento de pie de página .................................................... .................................................... .................................. 63
Sección 20.6: Elemento de sección .................................................... .................................................... ................................ 63
Capítulo 21: Barras de navegación .................................................... .................................................... ............................. 64
Sección 21.1: Barra de navegación básica .................................................... .................................................... ......................... 64
Sección 21.2: Barra de navegación HTML5 .................................................... .................................................... ..................... 64
Capítulo 22: Elemento de etiqueta Sección .................................................... .................................................... .................................. sesenta y cinco
22.1: Acerca de la etiqueta .................................................... .................................................... ........................................ sesenta y cinco
Sección 22.2: Uso Básico .................................................... .................................................... .......................................... sesenta y cinco
Capítulo 23: Elemento de salida .................................................... .................................................... ............................. 67
Sección 23.1: Elemento de salida con atributos For y Form Sección .................................................... ............................... 67
23.2: Elemento de salida con atributos Capítulo 24: ....................................................
Elementos .................................................... ....... 67
vacíos .................................................... .................................................... ................................ 68
Sección 24.1: Elementos vacíos .................................................... .................................................... ..................................... 68
Capítulo 25: Elementos multimedia .................................................... .................................................... ............................. 69
Sección 25.1: Audio .................................................... .................................................... .................................................... . 69
Sección 25.2: Vídeo .................................................... .................................................... .................................................... 69
Sección 25.3: Uso de los elementos `<video>` y `<audio>` para mostrar contenido de audio/video Sección 25.4: ............................................. 69
Encabezado o fondo de video .............. .................................................... ............................................. 70
Capítulo 26: Elemento de progreso .................................................... .................................................... ......................... 71
Sección 26.1: Progreso ............................................... .................................................... ............................................. 71
Sección 26.2: Cambiar el color de una barra de progreso .................................................... ............................................................. 71
Sección 26.3: HTML alternativo .................................................... .................................................... .................................... 72
Capítulo 27: Controles del menú de selección .................................................... .................................................... ........... 73
Sección 27.1: Seleccionar Menú .................................................... .................................................... ........................................ 73
Sección 27.2: Opciones ............................................... .................................................... .................................................... 73
Sección 27.3: Grupos de opciones ............................................. .................................................... .......................................... 74

Sección 27.4: Lista de datos .................................................... .................................................... .......................................................... 74
Capítulo 28: Incrustar .................................................... .................................................... ................................................ 76
Sección 28.1: Uso básico ............................................... .................................................... ............................................. 76
Sección 28.2: Definición del tipo MIME ............................................... .................................................... .......................... 76
Capítulo 29: Marcos flotantes.................................................... .................................................... ............................................................. 77
Sección 29.1: Conceptos básicos de un marco en línea .................................................... .................................................... .................. 77
Sección 29.2: Sandboxing ............................................... .................................................... .......................................... 77
Sección 29.3: Configuración del tamaño del .................................................... .................................................... ..................... 77
marco Sección 29.4: Uso del atributo "srcdoc" .................................................... .................................................... ............ 78
Sección 29.5: Uso de anclajes con IFrames .................................................... .................................................... ............ 78

Capítulo 30: Idiomas del contenido ............................................. .................................................... .......................... 79
Sección 30.1: Idioma del documento base ........................................... .................................................... ..................... 79
Sección 30.2: Lenguaje de elementos ........................................... .................................................... .......................... 79
Sección 30.3: Elementos con Múltiples Idiomas ........................................... .................................................... ........ 79
Sección 30.4: URL regionales .................................................... .................................................... .................................... 79
Sección 30.5: Manejo de atributos con diferentes idiomas .................................. ............................................... 79

Capítulo 31: SVG .................................................... .................................................... .................................................... ..... 81
Sección 31.1: SVG en línea .................................................... .................................................... ............................................ 81
Sección 31.2: Incrustación de archivos SVG externos en HTML .................................................... ............................................. 81
Sección 31.3: Incrustación de SVG mediante CSS....................................................

Capítulo .................................................... ............... 82
32: Lienzo .................................................... .................................................... ................................................ 83
Sección 32.1: Ejemplo básico ............................................... .................................................... ....................................... 83

Sección 32.2: Dibujar dos rectángulos en un <lienzo> .................................................... .......................................... 83
Capítulo 33: Metainformación Sección 33.1: .................................................... .................................................... .......................... 85
Información de la página Sección 33.2:.................................................... .................................................... ............................... 85
Codificación de caracteres ............................... .................................................... ....................................... 85

Sección 33.3: Robots .................................................... .................................................... ................................................ 86
Sección 33.4: Redes Sociales .................................................... .................................................... ...................................... 86
Sección 33.5: Control de diseño móvil .................................................... .................................................... ...................... 87

Sección 33.6: Actualización automática .................................................... .................................................... ............................ 88
Sección 33.7: Reconocimiento de número de teléfono ........................................... .................................................... ................... 88

Sección 33.8: Redirección automática .................................................... .................................................... ............................ 88
Sección 33.9: Aplicación web ............................................. .................................................... .................................................. 89
Capítulo 34: Marcado de código de computadora Sección .................................................... .................................................... .... 90
34.1: Bloquear con <pre> y <code> .................................................... .................................................... ........... 90

Sección 34.2: En línea con <código> .................................................... .................................................... ............................. 90
Capítulo 35: Cotizaciones de marcado ........................................... .................................................... ............................. 91
Sección 35.1: En línea con <q> ........................................... .................................................... ............................................. 91

Sección 35.2: Bloquear con <blockquote> ........................................... .................................................... .......................... 91
Capítulo 36: Tabindex .................................................... .................................................... ............................................ 93
Sección 36.1: Agregar un elemento al orden de tabulación .................................................... .......................................................... 93
Sección 36.2: Eliminar un elemento del orden de tabulación Sección .................................................... .................................... 93
36.3: Definir un orden de tabulación personalizado (no recomendado) .............. .................................................... ... 93
Capítulo 37: Atributos globales .................................................... .................................................... .......................... 94
Sección 37.1: Atributo Editable .................................................... .................................................... .................. 94
Capítulo 38: Caché de HTML 5 .................................................... .................................................... .................................. 95
Sección 38.1: Ejemplo básico de caché HTML5 .................................................... .................................................... ...... 95

Capítulo 39: Atributos de eventos HTML .................................................... .................................................... ............... 96
Sección 39.1: Eventos de formulario HTML .................................................... .................................................... ............................ 96
Sección 39.2: Eventos de teclado .................................................... .................................................... ............................... 96
Capítulo 40: Entidades de personajes .................................................... .................................................... ....................... 97
Sección 40.1: Entidades de caracteres en HTML .................................................... .................................................... ............... 97
Sección 40.2: Caracteres especiales comunes .................................................... .................................................... .......... 97
Capítulo 41: ARIA Sección ....................................................

41.1: .................................................... .................................................... ... 98
role="presentation" ................................ .................................................... ............................................. 98

Sección 41.2: rol="alerta" .................................................... .................................................... ............................................. 98
Sección 41.3: rol="alertdialog" ........................................... .................................................... .......................................... 98

Sección 41.4: rol="aplicación" ........................................... .................................................... ...................................... 98

Sección 41.5: rol="artículo" .................................................... .................................................... ............................................. 98
Sección 41.6: rol="banner" .................................................... .................................................... ..................................... 99
Sección 41.7: rol="botón" .................................................... .................................................... ...................................... 99
Sección 41.8: rol="celda" .................................................... .................................................... ............................................ 99
Sección 41.9: rol="casilla de verificación" .................................................... .................................................... .................................. 99
Sección 41.10: rol="encabezado de columna" .................................................... .................................................... ..................... 100
Sección 41.11: rol="combobox" .................................................... .................................................... ............................ 100
Sección 41.12: rol="complementario" ........................................... .................................................... .......................... 100

Sección 41.13: rol="infocontenido" .................................................... .................................................... .......................... 100
Sección 41.14: rol="definición" .................................................... .................................................... ............................... 100
Sección 41.15: rol="diálogo" ........................................... .................................................... .......................................... 101

Sección 41.16: rol="directorio" ........................................... .................................................... ...................................... 101
Sección 41.17: rol="documento" .................................................... .................................................... ............................ 101
Sección 41.18: rol="formulario" .................................................... .................................................... ..................................... 101
Sección 41.19: rol="cuadrícula" ....................................... .................................................... ............................................... 102

Sección 41.20: rol="gridcell" ........................................... .................................................... ........................................ 102
Sección 41.21: rol="grupo" ....................................... .................................................... .......................................... 102
Sección 41.22: rol="encabezado" ....................................... .................................................... .......................................... 102

Sección 41.23: rol="img" ....................................... .................................................... ............................................... 103
Sección 41.24: rol="enlace" .................................................... .................................................... ............................................. 103
Sección 41.25: rol="lista" .................................................... .................................................... ........................................ 103
Sección 41.26: rol="cuadro de lista" .................................................... .................................................... .................................... 103
Sección 41.27: rol="listitem" .................................................... .................................................... .................................. 103
Sección 41.28: rol="registro" ....................................... .................................................... .......................................... 104

Sección 41.29: rol="principal" .................................................... .................................................... ..................................... 104
Sección 41.30: rol="marquesina" ........................................... .................................................... ..................................... 104

Sección 41.31: rol="matemáticas" .................................................... .................................................... ..................................... 104
Sección 41.32: rol="menú" .................................................... .................................................... .................................... 104
Sección 41.33: rol="barra de menú" .................................................... .................................................... ............................... 104
Sección 41.34: rol="menuitem" .................................................... .................................................... ............................ 105
Sección 41.35: rol="menuitemcheckbox" .................................................... .................................................... ........... 105
Sección 41.36: rol="menuitemradio" .................................................... .................................................... ................... 105
Sección 41.37: rol="navegación" ........................................... .................................................... .................................... 105

Sección 41.38: rol="nota" .................................................... .................................................... ..................................... 105
Sección 41.39: rol="opción" ........................................... .................................................... .......................................... 105

Sección 41.40: rol="barra de progreso" ........................................... .................................................... ............................. 106
Sección 41.41: rol="radio" .................................................... .................................................... ..................................... 106
Sección 41.42: rol="región" ........................................... .................................................... .......................................... 106

Sección 41.43: rol="gruporadio" ........................................... .................................................... .................................... 106
Sección 41.44: rol="fila" .................................................... .................................................... ............................................. 106
Sección 41.45: rol="grupofilas" ....................................... .................................................... .................................... 107

Sección 41.46: rol="encabezado de fila" .................................................... .................................................... .......................... 107
Sección 41.47: rol="barra de desplazamiento" .................................................... .................................................... ............................... 107
Sección 41.48: rol="buscar" .................................................... .................................................... .................................. 107
Sección 41.49: rol="caja de búsqueda" .................................................... .................................................... .......................... 108
Sección 41.50: rol="separador" ....................................... .................................................... .................................... 108

Sección 41.51: rol="control deslizante" .................................................... .................................................... ..................................... 108
Sección 41.52: rol="botón giratorio" ....................................... .................................................... .................................... 108

Sección 41.53: rol="estado" .................................................... .................................................... .................................... 108
Sección 41.54: rol="cambiar" .................................................... .................................................... .................................... 108
Sección 41.55: rol="tab" .................................................... .................................................... ............................................. 109

Sección 41.56: rol="tabla" .................................................... .................................................... ..................................... 109
Sección 41.57: rol="lista de tablas" .................................................... .................................................... .................................... 109
Sección 41.58: rol="tabpanel" ........................................... .................................................... ...................................... 109

Sección 41.59: rol="cuadro de texto" .................................................... .................................................... ................................ 109
Sección 41.60: rol="temporizador" .................................................... .................................................... ..................................... 110
Sección 41.61: rol="barra de herramientas" .................................................... .................................................... .................................. 110
Sección 41.62: rol="información sobre herramientas" ....................................... .................................................... .......................................... 110

Sección 41.63: rol="árbol" .................................................... .................................................... ...................................... 110
Sección 41.64: rol="treegrid" ........................................... .................................................... .......................................... 111

Sección 41.65: rol="treeitem" .................................................... .................................................... ............................... 111
Créditos .................................................... .................................................... .................................................... ...................... 112
También te puede interesar.................................................... .................................................... .................................................... 117

Sobre
No dude en compartir este PDF con cualquier persona de forma

gratuita, la última versión de este libro se puede descargar desde:
https://goalkicker.com/HTML5Book
Este libro HTML5 Notes for Professionals está compilado a partir de Stack Overflow
Documentation, el contenido está escrito por la hermosa gente de Stack Overflow.
El contenido del texto se publica bajo Creative Commons BY-SA, vea los créditos al final de este libro
que contribuyeron a los diversos capítulos. Las imágenes pueden ser propiedad de sus respectivos
propietarios a menos que se especifique lo contrario
Este es un libro gratuito no oficial creado con fines educativos y no está afiliado con grupos o
compañías oficiales de HTML5 ni con Stack Overflow. Todas las marcas comerciales y marcas
comerciales registradas son propiedad de sus respectivos
dueños de la empresa
No se garantiza que la información presentada en este libro sea correcta ni precisa, utilícela bajo
su propio riesgo.
Envíe comentarios y correcciones a web@petercv.com
GoalKicker.com – Notas HTML5 para profesionales 1

Capítulo 1: Primeros pasos con HTML

Versión Especificación Fecha de lanzamiento
1.0 N/A 1994-01-01
2.0 RFC 1866 1995-11-24
3.2 W3C: Especificación HTML 3.2 W3C: 1997-01-14
4.0 Especificación HTML 4.0 1998-04-24
4.01 W3C: especificación HTML 4.01 1999-12-24

5 WHATWG: estándar de vida HTML 2014-10-28
5.1 W3C: especificación HTML 5.1 2016-11-01
Sección 1.1: Hola mundo
Introducción
HTML (Hypertext Markup Language) utiliza un sistema de marcado compuesto por elementos que representan
contenido. El marcado significa que con HTML declaras lo que se presenta a un espectador, no cómo se presenta. Visual
las representaciones se definen mediante hojas de estilo en cascada (CSS) y realizado por los navegadores. Aún existen elementos que
permitir tal, como, por ejemplo , fuente, "están completamente obsoletos y no deben ser utilizados por los autores"[1].
HTML a veces se denomina lenguaje de programación, pero no tiene lógica, por lo que es un lenguaje de marcado. Etiquetas HTML
proporcionar significado semántico y legibilidad automática al contenido de la página.
Un elemento generalmente consta de una etiqueta de apertura (<element_name>), una etiqueta de cierre (</element_name>), que contienen el
el nombre del elemento entre paréntesis angulares y el contenido entre ellos:
<element_name>...contenido...</element_name>
Hay algunos elementos HTML que no tienen una etiqueta de cierre ni ningún contenido. Estos se llaman elementos vacíos. Vacío
los elementos incluyen <img>, <meta>, <link> y <input>.
Los nombres de los elementos se pueden considerar como palabras clave descriptivas del contenido que contienen, como video, audio,
tabla, pie de página.
Una página HTML puede constar potencialmente de cientos de elementos que luego son leídos por un navegador web, interpretados
y convertido en contenido legible por humanos o audible en la pantalla.
Para este documento es importante notar la diferencia entre elementos y etiquetas:
Elementos: video, audio, tabla, pie de página
Etiquetas: <video>, <audio>, <tabla>, <pie de página>, </html>, </cuerpo>
Información del elemento
Desglosemos una etiqueta...
La etiqueta <p> representa un párrafo común.
Los elementos suelen tener una etiqueta de apertura y una etiqueta de cierre. La etiqueta de apertura contiene el nombre del elemento en ángulo.

corchetes (<p>). La etiqueta de cierre es idéntica a la etiqueta de apertura con la adición de una barra diagonal (/) entre el corchete de apertura y
el nombre del elemento (</p>).
El contenido puede ir entre estas dos etiquetas: <p>Este es un párrafo simple.</p>.
Crear una página sencilla
El siguiente ejemplo de HTML crea una página web simple "Hello World" .
Los archivos HTML se pueden crear usando cualquier editor de texto. Los archivos deben guardarse con una extensión .html o .htm[2] para que se
reconozcan como archivos HTML.
Una vez creado, este archivo se puede abrir en cualquier navegador web.
<!DOCTYPEhtml>
<html lang="es">
<cabeza>
<meta charset="UTF-8">
<título>¡Hola!</título>
</cabeza>
<body>
<h1>¡Hola mundo!</h1> <p>Este
es un párrafo simple.</p> </body>
</html>
Desglose de página simple
Estas son las etiquetas utilizadas en el ejemplo:
Etiqueta Significado
Define la versión HTML utilizada en el documento. En este caso es HTML5.
<!DOCTYPE>
Consulte el tema de tipos de documentos para obtener más información.
Abre la página. Ningún marcado debe ir después de la etiqueta de cierre (</html>). El atributo lang declara el idioma principal de la
<html> página utilizando los códigos de idioma ISO (en para inglés).
Consulte el tema Idioma del contenido para obtener más información.
Abre la sección de encabezado, que no aparece en la ventana principal del navegador pero que contiene principalmente
<cabeza> información sobre el documento HTML, denominada metadatos. También puede contener importaciones de hojas de estilo y
scripts externos. La etiqueta de cierre es </head>.
Le da al navegador algunos metadatos sobre el documento. El atributo charset declara la codificación de caracteres . Los documentos
HTML modernos siempre deben usar UTF-8, aunque no es un requisito. En HTML, la etiqueta <meta> no requiere una etiqueta de
<meta>
cierre.
Consulte el tema Meta para obtener más información.
El título de la página. El texto escrito entre esta apertura y la etiqueta de cierre (</title>) se mostrará en la pestaña de la
<título>
página o en la barra de título del navegador.
Abre la parte del documento que se muestra a los usuarios, es decir, todo el contenido visible o audible de una página. No se debe
<cuerpo>
agregar contenido después de la etiqueta de cierre </body>.

Un encabezado de nivel 1 para la página.

<h1>
Consulte los encabezados para obtener más información.
<p> Representa un párrafo común de texto.
1. ÿ HTML5, 11.2 Funciones no conformes

2. ÿ .htm se hereda del límite de extensión de archivo de tres caracteres heredado de DOS .

Capítulo 2: Doctipos
Doctypes, abreviatura de 'tipo de documento', ayuda a los navegadores a comprender la versión de HTML en la que está escrito el documento para una mejor interpretación.
Las declaraciones de tipo de documento no son etiquetas HTML y pertenecen a la parte superior de un documento. Este tema explica la estructura y declaración de varios
doctypes en HTML.
Sección 2.1: Agregar el tipo de documento

La declaración <!DOCTYPE> siempre debe incluirse en la parte superior del documento HTML, antes de la etiqueta <html> .
Versión ÿ 5
Consulte HTML 5 Doctype para obtener detalles sobre HTML 5 Doctype.
<!DOCTYPEhtml>
Sección 2.2: Tipo de documento HTML 5

HTML5 no se basa en SGML (Lenguaje de marcado generalizado estándar) y, por lo tanto, no requiere una referencia a una DTD (Definición de tipo de documento).
Declaración de tipo de documento HTML 5:
<!DOCTYPEhtml>
Insensibilidad a mayúsculas y minúsculas
Según W3.org HTML 5 DOCTIPO Especificaciones:
Un DOCTYPE debe constar de los siguientes componentes, en este orden:
1. Una cadena que no distingue entre mayúsculas y minúsculas de ASCII para la cadena "<!DOCTYPE".
por lo tanto, los siguientes DOCTYPE también son válidos:
<!doctype html> <!

doctype html> <!
doctype html>
Este artículo de SO analiza el tema ampliamente: ¿Doctype en mayúsculas o minúsculas?

Capítulo 3: Encabezados
HTML proporciona no solo etiquetas de párrafo simples, sino también seis etiquetas de encabezado separadas para indicar encabezados de varios tamaños y
grosores. Enumerados como encabezado 1 a encabezado 6, el encabezado 1 tiene el texto más grande y grueso, mientras que el encabezado 6 es el más pequeño
y delgado, hasta el nivel del párrafo. Este tema detalla el uso adecuado de estas etiquetas.
Sección 3.1: Uso de encabezados

Los encabezados se pueden usar para describir el tema al que preceden y se definen con las etiquetas <h1> a <h6> . Los encabezados admiten todos los atributos
globales.
<h1> define el encabezado más importante.

<h6> define el encabezado menos importante.
Definición de un encabezado:
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6 </h6>
La estructura correcta importa
Los motores de búsqueda y otros agentes de usuario suelen indexar el contenido de la página en función de los elementos del encabezado, por ejemplo,
para crear una tabla de contenido, por lo que es importante utilizar la estructura correcta para los encabezados.
En general, un artículo debe tener un elemento h1 para el título principal seguido de subtítulos h2 , bajando una capa si es necesario. Si hay elementos h1 en un
nivel superior, no deben usarse para describir ningún contenido de nivel inferior.
Documento de ejemplo (intención adicional para ilustrar la jerarquía):
<h1> Título principal</

h1> <p>Introducción</p>
<h2>Razones</h2>
<h3>Razón 1</h3>
<p>Párrafo</p>
<h3>Razón 2</h3>
<p>Párrafo</p>
<h2>En conclusión</h2>
<p>Párrafo</p>

Capítulo 4: Párrafos
Columna Columna
<p> Define un párrafo
<br> Inserta un solo salto de línea
<pre> Define texto preformateado
Los párrafos son el elemento HTML más básico. Este tema explica y demuestra el uso del párrafo
elemento en HTML.
Sección 4.1: Párrafos HTML

El elemento HTML <p> define un párrafo:
<p>Esto es un párrafo.</p>
<p>Este es otro párrafo.</p>
Mostrar
No puede estar seguro de cómo se mostrará HTML.
Las pantallas grandes o pequeñas y las ventanas redimensionadas crearán resultados diferentes.
Con HTML, no puede cambiar la salida agregando espacios adicionales o líneas adicionales en su código HTML.
El navegador eliminará los espacios adicionales y las líneas adicionales cuando se muestre la página:
<p>Esto es otro párrafo, los navegadores eliminarán los espacios adicionales</p>

Capítulo 5: Formato de texto

Si bien la mayoría de las etiquetas HTML se utilizan para crear elementos, HTML también proporciona etiquetas de formato en el texto
para aplicar estilos específicos relacionados con el texto a partes del texto. Este tema incluye ejemplos de formato de texto HTML,
como resaltado, negrita, subrayado, subíndice y texto tachado.
Sección 5.1: Resaltado

El elemento <mark> es nuevo en HTML5 y se usa para marcar o resaltar texto en un documento "debido a su relevancia en otro
contexto".1
El ejemplo más común sería en los resultados de una búsqueda donde el usuario ha ingresado una consulta de búsqueda y los
resultados se muestran resaltando la consulta deseada.
<p>Aquí hay algo de contenido de un artículo que contiene la <mark> consulta buscada</mark> que estamos buscando. Resaltar
el texto facilitará que el usuario encuentre lo que busca .</p>
Producción:
Un formato estándar común es texto negro sobre fondo amarillo, pero esto se puede cambiar con CSS.
Sección 5.2: negrita, cursiva y subrayado

Texto en negrita
Para poner texto en negrita, use las etiquetas <strong> o <b> :
<strong> Texto en negrita aquí</strong>
<b>Texto en negrita aquí</b>
¿Cual es la diferencia? Semántica. <strong> se usa para indicar que el texto es fundamental o semánticamente importante para
el texto que lo rodea, mientras que <b> indica que no tiene tanta importancia y simplemente representa el texto que debe estar en negrita.
Si tuviera que usar <b> un programa de texto a voz no diría la(s) palabra(s) de manera diferente a las otras palabras a su alrededor;
simplemente está llamando la atención sobre ellas sin agregar ninguna importancia adicional. Sin embargo, al usar <strong>, el mismo
programa querría decir esas palabras con un tono de voz diferente para transmitir que el texto es importante de alguna manera.
Texto en cursiva
Para poner el texto en cursiva, use las etiquetas <em> o <i> :

<em>Texto en cursiva aquí</em>
<i>Texto en cursiva aquí</i>
¿Cual es la diferencia? Semántica. <em> se usa para indicar que el texto debe tener un énfasis adicional que debe enfatizarse, mientras
que <i> simplemente representa el texto que debe destacarse del texto normal que lo rodea.
Por ejemplo, si quisiera enfatizar la acción dentro de una oración, podría hacerlo enfatizándola en cursiva a través de <em>: "¿Podría
enviar la edición ya?"
Pero si estuviera identificando un libro o periódico que normalmente pondría en cursiva estilísticamente, simplemente usaría <i>: "Me
obligaron a leer Romeo y Julieta en la escuela secundaria.
Texto subrayado
Si bien el elemento <u> en sí quedó obsoleto en HTMl 4, se reintrodujo con un significado semántico alternativo en HTML 5, para
representar una anotación no textual y no articulada. Puede usar una representación de este tipo para indicar texto mal escrito en la
página o para una marca de nombre propio en chino.
<p>Este párrafo contiene texto <u>mal escrito</u> .</p>
Sección 5.3: Abreviatura

Para marcar alguna expresión como abreviatura, use la etiqueta <abbr> :
<p>¡Me gusta escribir <abbr title="Hypertext Markup Language">HTML</abbr>!</p>
Si está presente, el atributo de título se utiliza para presentar la descripción completa de dicha abreviatura.
Sección 5.4: Insertado, Eliminado o Tachado

Para marcar texto como insertado, use la etiqueta <ins> :
<ins> Texto nuevo</ins>
Para marcar el texto como eliminado, use la etiqueta <del> :
<del> Texto eliminado </del>
Para tachar el texto, usa la etiqueta <s> :
<s>Texto tachado aquí</s>
Sección 5.5: Superíndice y Subíndice

Para desplazar el texto hacia arriba o hacia abajo, puede usar las etiquetas <sup> y <sub>.
Para crear un superíndice:
<sup>superíndice aquí</sup>

Para crear un subíndice:
<sub>subíndice aquí</sub>

Capítulo 6: Anclajes e hipervínculos

Parámetro Detalles
Especifica la dirección de destino. Puede ser una URL absoluta o relativa, o el nombre de un ancla. Una URL absoluta es la URL
completa de un sitio web como http://example.com/. Una URL relativa apunta a otro directorio y/o documento dentro del mismo
href sitio web, por ejemplo, /acerca-de-nosotros/ apunta al directorio "acerca-de-nosotros" dentro del directorio raíz (/). Cuando apunta
a otro directorio sin especificar explícitamente el documento, los servidores web generalmente devuelven el documento "index.html"
dentro de ese directorio.
Especifica el idioma del recurso vinculado por el atributo href (que debe estar presente con este). Usar valores de idioma de
hreflang
BCP 47 para HTML5 y RFC 1766 para HTML 4.
real Especifica la relación entre el documento actual y el documento vinculado. Para HTML5, los valores deben estar definidos en la
especificación o registrados en la wiki de Microformatos.
Especifica dónde abrir el enlace, por ejemplo, en una nueva pestaña o ventana. Los valores posibles son _blank,
objetivo _self, _parent, _top y framename (obsoleto). No se recomienda forzar tal comportamiento ya que viola el control del
usuario sobre un sitio web.
Especifica información adicional sobre un enlace. La información suele mostrarse como un texto de información sobre
título herramientas cuando el cursor se mueve sobre el enlace. Este atributo no está restringido a enlaces, puede usarse en casi todas
las etiquetas HTML.
Especifica que el objetivo se descargará cuando un usuario haga clic en el hipervínculo. El valor del atributo será el nombre
del archivo descargado. No hay restricciones sobre los valores permitidos, y el navegador detectará automáticamente la extensión
descargar
de archivo correcta y la agregará al archivo (.img, .pdf, etc.). Si se omite el valor, se utiliza el nombre de archivo original.
Las etiquetas de anclaje se usan comúnmente para vincular páginas web separadas, pero también se pueden usar para vincular entre diferentes
lugares en un solo documento, a menudo dentro de la tabla de contenido o incluso iniciar aplicaciones externas. Este tema explica la implementación
y aplicación de etiquetas de anclaje HTML en varios roles.
Sección 6.1: Enlace a otro sitio

Este es el uso básico de <a> (elemento de anclaje) elemento:
<a href="http://example.com/">Enlace a example.com</a>
Crea un hipervínculo a la URL http://example.com/ como se especifica en el atributo href (referencia de hipertexto), con el texto ancla "Enlace a
example.com". Se vería algo como lo siguiente:
Enlace a ejemplo.com
Para indicar que este enlace conduce a un sitio web externo, puede utilizar el tipo de enlace externo :
<a href="http://example.com/" rel="external"> sitio de ejemplo</a>
Puede vincular a un sitio que utiliza un protocolo que no sea HTTP. Por ejemplo, para vincular a un sitio FTP, puede hacer,
<a href="ftp://example.com/">Esto podría ser un enlace a un sitio FTP</a>
En este caso, la diferencia es que esta etiqueta de anclaje solicita que el navegador del usuario se conecte a ejemplo.com mediante el
Protocolo de transferencia de archivos (FTP) en lugar del Protocolo de transferencia de hipertexto (HTTP).
Esto podría ser un enlace a un sitio FTP

Sección 6.2: Enlace a un ancla

Los anclajes se pueden usar para saltar a etiquetas específicas en una página HTML. La etiqueta <a> puede apuntar a cualquier elemento que tenga un
atributo id . Para obtener más información sobre las identificaciones, visite la documentación sobre clases e identificaciones. Los anclajes se usan
principalmente para saltar a una subsección de una página y se usan junto con etiquetas de encabezado.
Supongamos que ha creado una página (page1.html) sobre muchos temas:
<h2>Primer tema</h2>
<p>Contenido sobre el primer tema</p> <h2>Segundo
tema</h2> <p>Contenido sobre el segundo tema</p>
Una vez que tenga varias secciones, es posible que desee crear una tabla de contenido en la parte superior de la página con enlaces rápidos (o
marcadores) a secciones específicas.
Si le dio un atributo de identificación a sus temas, luego podría vincularlos
<h2 id="Tema1">Primer tema</h2>

<p>Contenido sobre el primer tema</p> <h2
id="Tema2">Segundo tema</h2> <p>Contenido sobre
el segundo tema</ p>
Ahora puede usar el ancla en su tabla de contenido:
<h1>Índice</h1>
<a href='#Topic1'>Haga clic para saltar al primer tema</a> <a href='#Topic2'>Haga
clic para saltar al segundo tema</a>
Estos anclajes también se adjuntan a la página web en la que se encuentran (page1.html). Por lo tanto, puede vincular el sitio de una página a otra
haciendo referencia a la página y al nombre del ancla.
Recuerde, siempre puede <a href="page1.html#Topic1">repasar el primer tema</a> para obtener información de apoyo.
Sección 6.3: Enlace a una página en el mismo sitio

Puedes usar una ruta relativa para enlazar a páginas en el mismo sitio web.
<a href="/ejemplo">Texto aquí</a>
El ejemplo anterior iría al archivo de ejemplo en el directorio raíz (/) del servidor.
Si este enlace estaba en http://example.com, los siguientes dos enlaces llevarían al usuario a la misma ubicación
<a href="/page">Texto aquí</a> <a

href="http://example.com/page">Texto aquí</a>
Ambos de los anteriores irían al archivo de la página en el directorio raíz de ejemplo.com.
Sección 6.4: Enlace que marca un número

Si el valor del atributo href comienza con tel:, su dispositivo marcará el número cuando haga clic en él. Esto funciona en dispositivos móviles o en
computadoras/tabletas que ejecutan software, como Skype o FaceTime, que pueden hacer llamadas telefónicas.

<a href="tel:11234567890">Llámenos </a>
La mayoría de los dispositivos y programas solicitarán al usuario que confirme el número que está a punto de marcar.
Sección 6.5: Abrir enlace en nueva pestaña/ventana

<a href="example.com" target="_blank">Texto aquí</a>
El atributo de destino especifica dónde abrir el enlace. Al configurarlo en _blank, le dice al navegador que lo abra en una nueva
pestaña o ventana (según la preferencia del usuario).
¡ADVERTENCIA DE VULNERABILIDAD DE SEGURIDAD!
El uso de target="_blank" otorga al sitio de apertura acceso parcial al objeto window.opener a través de JavaScript, lo que
permite que esa página acceda y cambie window.opener.location de su página y redirija potencialmente a los usuarios a
sitios de malware o phishing.
Siempre que use esto para páginas que no controla, agregue rel="noopener" a su enlace para evitar que el objeto
window.opener se envíe con la solicitud.
Actualmente, Firefox no es compatible con noopener, por lo que deberá usar rel="noopener noreferrer" para obtener el
máximo efecto.
Sección 6.6: Enlace que ejecuta JavaScript

Simplemente use el protocolo javascript: para ejecutar el texto como JavaScript en lugar de abrirlo como un enlace normal:
<a href="javascript:myFunction();">Ejecutar código</a>
También puede lograr lo mismo usando el atributo onclick :
<a href="#" onclick="myFunction(); return false;">Ejecutar código</a>
El retorno falso; es necesario para evitar que su página se desplace hacia arriba cuando se hace clic en el enlace a # . Asegúrese de
incluir todo el código que le gustaría ejecutar antes, ya que regresar detendrá la ejecución de más código.
¡También cabe destacar que puede incluir un signo de exclamación ! después del hashtag para evitar que la página se desplace
hacia la parte superior. Esto funciona porque cualquier slug no válido hará que el enlace no se desplace a ninguna parte de la
página, porque no pudo ubicar el elemento al que hace referencia (un elemento con id="!"). También puede usar cualquier slug no
válido (como #scrollsNowhere) para lograr el mismo efecto. En este caso, devuelve false; no es requerido:
<a href="#!" onclick="myFunction();">Ejecutar código</a>
¿Deberías usar algo de esto?
La respuesta es casi seguro que no. Ejecutar JavaScript en línea con el elemento como este es una práctica
bastante mala. Considere usar soluciones de JavaScript puro que busquen el elemento en la página y, en su lugar,
vinculen una función. Escuchando un evento
Considere también si este elemento es realmente un botón en lugar de un enlace. Si es así, debe usar <button>.

Sección 6.7: Enlace que ejecuta el cliente de correo electrónico
Uso básico
Si el valor del atributo href comienza con mailto: intentará abrir un cliente de correo electrónico al hacer clic:
<a href="mailto:example@example.com">Enviar correo electrónico</a>
Esto pondrá la dirección de correo electrónico ejemplo@ejemplo.com como el destinatario del correo electrónico recién creado.
CC y CCO
También puede agregar direcciones para destinatarios cc o bcc utilizando la siguiente sintaxis:
<a href="mailto:example@example.com?cc=john@example.com&bcc=jane@example.com">Enviar correo electrónico</a>
Asunto y cuerpo del texto
También puede completar el asunto y el cuerpo del nuevo correo electrónico:
<a href="mailto:example@example.com?subject=Ejemplo+asunto&cuerpo=Mensaje+texto">Enviar correo electrónico</a>
Esos valores deben estar codificados como URL.
Al hacer clic en un enlace con mailto: intentará abrir el cliente de correo electrónico predeterminado especificado por su sistema operativo o le pedirá que
elija qué cliente desea usar. No todas las opciones especificadas después de la dirección del destinatario son compatibles con todos los clientes de correo
electrónico.

Capítulo 7: Listas
HTML ofrece tres formas de especificar listas: listas ordenadas, listas desordenadas y listas de descripción. Las listas ordenadas usan secuencias
ordinales para indicar el orden de los elementos de la lista, las listas desordenadas usan un símbolo definido, como una viñeta, para enumerar elementos sin
un orden designado, y las listas de descripción usan sangrías para enumerar elementos con sus elementos secundarios. Este tema explica la implementación
y combinación de estas listas en el marcado HTML.
Sección 7.1: Lista ordenada

Se puede crear una lista ordenada con la etiqueta <ol> y cada elemento de la lista se puede crear con la etiqueta <li> como en el siguiente ejemplo:
<ol>
<li>Artículo</li>
<li>Otro artículo</li> <li> Otro
artículo más</li> </ol>
Esto producirá una lista numerada (que es el estilo predeterminado):
1 articulo
2. Otro artículo
3. Otro artículo más
Cambiar manualmente los números
Hay un par de formas de jugar con los números que aparecen en los elementos de la lista en una lista ordenada. La primera forma es establecer un
número de inicio, utilizando el atributo de inicio . La lista comenzará en este número definido y continuará aumentando en uno como de costumbre.
<ol comienzo="3">
<li>Artículo</li>
<li>Algún otro artículo</li> <li> Otro
artículo más</li> </ol>
Esto producirá una lista numerada (que es el estilo predeterminado):
3. Artículo
4. Algún otro artículo
5. Otro artículo más
También puede establecer explícitamente un determinado elemento de la lista en un número específico. Más elementos de la lista después de uno con un
valor específico continuarán incrementándose en uno desde el valor de ese elemento de la lista, ignorando dónde estaba la lista principal.
<li valor="7"></li>
También vale la pena señalar que, al usar el atributo de valor directamente en un elemento de la lista, puede anular el sistema de numeración existente
de una lista ordenada reiniciando la numeración en un valor más bajo. Entonces, si la lista principal ya tenía el valor 7 y encontró un elemento de la lista
con el valor 4, ese elemento de la lista aún se mostraría como 4 y continuaría contando

desde ese punto otra vez.
<ol comienzo="5">
<li>Artículo</li>
<li>Otro artículo</li> <li
value="4">Un artículo de reinicio </li>
<li>Otro artículo</li> <li> Otro artículo
más</ li> </ol>
Entonces, el ejemplo anterior producirá una lista que sigue el patrón de numeración de 5, 6, 4, 5, 6, comenzando nuevamente en un número más
bajo que el anterior y duplicando el número 6 en la lista.
Nota: Los atributos de inicio y valor solo aceptan un número, incluso si la lista ordenada está configurada para mostrarse como Roman
números o letras.
Versión ÿ 5
Puede invertir la numeración agregando invertido en su elemento ol :
<ol al revés>
<li>Artículo</li>
<li>Otro artículo</li> <li
value="4">Un artículo de reinicio </li>
<li>Otro artículo</li> <li> Otro artículo
más</ li> </ol>
La numeración inversa es útil si continuamente agrega elementos a una lista, como nuevos episodios de podcast o presentaciones, y desea
que los elementos más recientes aparezcan primero.
Cambiar el tipo de numeral
Puede cambiar fácilmente el tipo de número que se muestra en el marcador de elementos de la lista utilizando el atributo de tipo
<ol type="1|a|A|i|I">
Escribe Descripción Ejemplos

1 Valor por defecto - Números decimales 1,2,3,4
a Ordenado alfabéticamente (en minúsculas) a,b,c,d

A Ordenado alfabéticamente (mayúsculas) A,B,C,D i
Números romanos (minúsculas) yo, ii, iii, iv
Números romanos (mayúsculas) I, II, III, IV
Debe usar ol para mostrar una lista de elementos, donde los elementos se ordenaron intencionalmente y se debe enfatizar el orden. Si
cambiar el orden de los elementos NO hace que la lista sea incorrecta, debe
usa <ul>.
Sección 7.2: Lista desordenada

Se puede crear una lista desordenada con la etiqueta <ul> y cada elemento de la lista se puede crear con la etiqueta <li> como se muestra en el siguiente
ejemplo:
GoalKicker.com – Notas HTML5 para profesionales dieciséis

<ul>
<li>Artículo</li>
<li>Otro artículo</li> <li> Otro
artículo más</li> </ul>
Esto producirá una lista con viñetas (que es el estilo predeterminado):
Articulo
Otro artículo
Otro artículo más
Debe usar ul para mostrar una lista de elementos, donde el orden de los elementos no es importante. Si cambiar el orden de los elementos hace que la lista
sea incorrecta, debe usar <ol>.
Sección 7.3: Listas anidadas

Puede anidar listas para representar subelementos de un elemento de lista.
<ul>
<li>elemento 1</li>
<li>elemento 2 <ul>
<li>subpunto 2.1</li>
<li>subpunto 2.2</li> </ul> </
li> <li>punto 3</li> </ul>
Objeto 1
artículo 2
subelemento 2.1
subelemento 2.2
elemento 3
La lista anidada tiene que ser un hijo del elemento li .
También puede anidar diferentes tipos de lista:
<ol>
<li>¡Hola, lista!</li> <li>
<ul>
<li>¡Hola, lista anidada!</li> </ul> </li> </
ol>
Sección 7.4: Lista de descripción

Se puede crear una lista de descripción (o lista de definiciones, como se llamaba antes de HTML5) con el elemento dl . Consiste en

grupos de nombre-valor, donde el nombre se da en el elemento dt y el valor se da en el elemento dd .
<dl>
<dt>nombre 1</dt>
<dd>valor para 1</dd>
<dt>nombre 2</dt> <dd>valor
para 2</dd> </dl>
Demo en vivo
Un grupo de nombre-valor puede tener más de un nombre y/o más de un valor (que representan alternativas):
<dl>
<dt>nombre 1</dt>
<dt>nombre 2</dt>
<dd>valor para 1 y 2</dd>
<dt>nombre 3</dt>
</dl>
Demo en vivo

Capítulo 8: Tablas
El elemento HTML <table> permite a los autores web mostrar datos tabulares (como texto, imágenes, enlaces, otras tablas, etc.) en
una tabla bidimensional con filas y columnas de celdas.
Sección 8.1: Tabla simple

<tabla>
<tr>
<th>Título 1/Columna 1</th>
<th>Título 2/Columna 2</th> </tr>
<tr>
<td>Fila 1 Columna de datos 1</td>
<td>Fila 1 Columna de datos 2</td>
</tr>
<tr>
<td> Columna de datos de fila 2 1</
td> <td> Columna de datos de fila 2
2</td> </tr> </table>
Esto generará una <tabla> que consta de tres filas en total (<tr>): una fila de celdas de encabezado (<th>) y dos filas de celdas de
contenido (<td>). Los elementos <th> son encabezados tabulares y los elementos <td> son datos tabulares. Puedes poner lo que
quieras dentro de un <td> o <th>.
Encabezado 1/Columna 1 Encabezado 2/Columna 2

Fila 1 Datos Columna 1 Fila 1 Datos Columna 2
Fila 2 Datos Columna 1 Fila 2 Datos Columna 2
Sección 8.2: Expansión de columnas o filas

Las celdas de la tabla pueden abarcar varias columnas o filas mediante los atributos colspan y rowspan . Estos atributos se pueden
aplicar a los elementos <th> y <td> .
<tabla>
<tr>
<td>fila 1 columna 1</td>
</tr>
<tr>
<td colspan="3">Esta segunda fila abarca las tres columnas</td> </tr>
<tr>
<td rowspan="2">Esta celda abarca dos filas</td> <td>fila
3 columna 2</td> <td>fila 3 columna 3</td>
</tr>
<tr>
</tr>
</tabla>

Resultará en
Tenga en cuenta que no debe diseñar una tabla en la que tanto las filas como las columnas se superpongan, ya que se trata de un HTML no válido y el resultado
se maneja de manera diferente según los distintos navegadores web.
filas = Un entero no negativo que especifica el número de filas que abarca una celda. El valor predeterminado de este
atributo es uno (1). Un valor de cero (0) significa que la celda se extenderá desde la fila actual hasta la última fila de la tabla (<thead>,
<tbody> o <tfoot>).
colspan = Un entero no negativo que especifica el número de columnas que abarca la celda actual. El valor predeterminado de
este atributo es uno (1). Un valor de cero (0) significa que la celda se extenderá desde la columna actual hasta la última del grupo
de columnas <colgroup> en el que se define la celda.
Sección 8.3: Grupos de columnas

En ocasiones, es posible que desee aplicar estilo a una columna o grupo de columnas. O por motivos semánticos, es posible que
desee agrupar columnas. Para hacer esto, use los elementos <colgroup> y <col> .
La etiqueta opcional <colgroup> le permite agrupar columnas. Los elementos <colgroup> deben ser elementos secundarios de
una <table> y deben ir después de cualquier elemento <caption> y antes de cualquier contenido de la tabla (p. ej., <tr>, <thead>,
<tbody>, etc.).
<tabla>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
...
</tabla>
La etiqueta opcional <col> le permite hacer referencia a columnas individuales o un rango de columnas sin aplicar una agrupación
lógica. Los elementos <col> son opcionales, pero si están presentes, deben estar dentro de un elemento <colgroup> .
<tabla>
<colgroup>
<col id="MiColumnaEspecial" />
<col /> </colgroup> <colgroup>
<col class="CoolColumn" /> <col
class="NeatColumn" span="2" />
</colgroup>
...
</tabla>
Los siguientes estilos CSS se pueden aplicar a los elementos <colgroup> y <col> :
frontera
antecedentes

ancho
visibilidad
pantalla (como en pantalla: ninguno)
pantalla: ninguno; en realidad eliminará las columnas de la pantalla, lo que hará que la tabla se represente como si esas
celdas no existieran
Para obtener más información, consulte Datos tabulares de HTML5.
Sección 8.4: Tabla con encabezado, cuerpo, pie y título

HTML también proporciona a las tablas los elementos <thead>, <tbody>, <tfoot> y <caption> . Estos elementos adicionales son útiles
para agregar valor semántico a sus tablas y para proporcionar un lugar para estilos CSS separados.
Al imprimir una tabla que no cabe en una página (en papel), la mayoría de los navegadores repiten el contenido de <thead> en
cada página
Hay un orden específico que debe cumplirse, y debemos ser conscientes de que no todos los elementos encajan como cabría esperar. El siguiente
ejemplo demuestra cómo deben colocarse nuestros 4 elementos.
<tabla>
<caption> Título de la tabla</caption>  <thead> 
<tr>
<th>Contenido del encabezado 1</
th> <th>Contenido del encabezado
2</th> </tr> </thead>
<tbody> 

<tr>
<td>Contenido del cuerpo 1</td>
<td>Contenido del cuerpo 2</td>
</tr> </tbody>
<tfoot>

<tr>
<td>Contenido de pie de página 1</td>
<td>Contenido de pie de página 2</td>
</tr>
</tfoot>
</tabla>
Los resultados del siguiente ejemplo se muestran dos veces: la primera tabla carece de estilos, la segunda tabla tiene algunas propiedades CSS
aplicadas: color de fondo, color y borde*. Los estilos se proporcionan como una guía visual y no son un aspecto esencial del tema en cuestión.

Elemento Se aplican estilos

<caption> Texto amarillo sobre fondo negro. <thead>
Texto en negrita sobre fondo morado. <tbody> Texto
sobre fondo azul. <tfoot> Texto sobre fondo verde.
<th> Bordes naranjas.

<td> Bordes rojos.
Sección 8.5: Alcance del encabezado
Los elementos th se usan muy comúnmente para indicar encabezados para filas y columnas de tablas, así:
<tabla>
<cabeza>
<tr>
<td></td>
<th>Título de columna 1</th>
<th>Título de columna 2</th> </tr>
</thead> <tbody> <tr>
<th> Encabezado de fila 1</

th> <td></td> <td></td>
</tr>
<tr>
<th> Encabezado de fila 2</th>
<td></td> <td></td>
</tr>
</tbody> </
tabla>
Esto se puede mejorar para la accesibilidad mediante el uso del atributo de alcance . El ejemplo anterior se modificaría de la siguiente manera:
<tabla>
<cabeza>
<tr>
<td></td>
<th scope="col"> Título de columna 1</th> <th
scope="col"> Título de columna 2</th>

</tr>
</thead>
<tcuerpo>
<tr>
<th scope="row"> Encabezado de fila 1</th>
<td></td> <td></td>
</tr>
<tr>
<th scope="row"> Encabezado de fila 1</th>
<td></td> <td></td>
</tr>
</tbody> </
tabla>
El alcance se conoce como un atributo enumerado, lo que significa que puede tener un valor de un conjunto específico de valores posibles.
Este conjunto incluye:
columna
fila
colgrupo
grupo de filas
Referencias:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope https://
www.w3.org/TR/WCAG20-TECHS/H63.html

Capítulo 9: Comentarios
Al igual que otros lenguajes de programación, marcado y rebajas, los comentarios en HTML brindan a otros desarrolladores información específica del
desarrollo sin afectar la interfaz de usuario. Sin embargo, a diferencia de otros lenguajes, los comentarios HTML se pueden usar para especificar
elementos HTML solo para Internet Explorer. Este tema explica cómo escribir comentarios HTML y sus aplicaciones funcionales.
Sección 9.1: Creación de comentarios

Los comentarios HTML se pueden usar para dejar notas para usted o para otros desarrolladores sobre un punto específico del código. Se pueden iniciar
con , así:

Se pueden incorporar en línea dentro de otro contenido:
<h1>Esta parte se mostrará .</h1>
También pueden abarcar varias líneas para proporcionar más información:

Sin embargo, no pueden aparecer dentro de otra etiqueta HTML, como esta:
<h1 >Esto no funcionará</h1>
Esto produce HTML no válido, ya que todo el bloque <h1  se consideraría una única etiqueta de inicio h1 con alguna otra
información no válida contenida en él, seguida de un único corchete de cierre > que no hace nada.
Para compatibilidad con herramientas que intentan analizar HTML como XML o SGML, el cuerpo de su comentario no debe contener dos guiones.
--.
Sección 9.2: Comentar espacios en blanco entre elementos en

línea
Los elementos de visualización en línea, generalmente como span o a, incluirán hasta un carácter de espacio en blanco antes y después de ellos en
el documento. Para evitar líneas muy largas en el marcado (que son difíciles de leer) y espacios en blanco no intencionales (que afectan el formato),
el espacio en blanco se puede comentar.
 <a href="#">¡ Espero
que no haya espacios en blanco adicionales después de esto!</a><button >Foo</botón>
Pruébelo sin un comentario entre los elementos en línea y habrá un espacio entre ellos. A veces se desea recoger el carácter de espacio.
Código de ejemplo:


<a href="#">¡ Espero que no haya espacios en blanco adicionales después de esto!</a><button>Foo</
button> <hr>  <a href="#">¡ Espero que
no haya espacios en blanco adicionales después de esto!</a> <button>Foo</button>
Producción:

Capítulo 10: Clases e ID

Clase de Detalles
parámetro Indica la Clase del elemento (no único)
identificación
Indica el ID del elemento (único en el mismo contexto)
Las clases y los ID facilitan la referencia a elementos HTML de scripts y hojas de estilo. El atributo de clase se puede usar en una o
más etiquetas y CSS lo usa para diseñar. Sin embargo, los ID están destinados a referirse a un solo elemento, lo que significa que el
mismo ID nunca debe usarse dos veces. Los ID generalmente se usan con JavaScript y enlaces de documentos internos, y no se
recomiendan en CSS. Este tema contiene explicaciones y ejemplos útiles sobre el uso adecuado de los atributos de clase e ID en HTML.
Sección 10.1: Dar una clase a un elemento

Las clases son identificadores de los elementos a los que están asignadas. Utilice el atributo de clase para asignar una clase a un
elemento.
<div class="clase-ejemplo"></div>
Para asignar varias clases a un elemento, separe los nombres de clase con espacios.
<div clase=" clase1 clase2"></div>
Usando clases en CSS
Las clases se pueden usar para diseñar ciertos elementos sin cambiar todos los elementos de ese tipo. Por ejemplo, estos dos elementos
span pueden tener estilos completamente diferentes:
<span> <span
clase="especial">
Se pueden asignar clases con el mismo nombre a cualquier número de elementos en una página y todos recibirán el estilo asociado
con esa clase. Esto siempre será cierto a menos que especifique el elemento dentro del CSS.
Por ejemplo, tenemos dos elementos, ambos con el resaltado de clase:
<div class="highlight">Lorem ipsum</div> <span

class="highlight">Lorem ipsum
Si nuestro CSS es el siguiente, el color verde se aplicará al texto dentro de ambos elementos:
.resaltar { color: verde; }
Sin embargo, si solo queremos apuntar a div con el resaltado de clase , podemos agregar especificidad como a continuación:
div.highlight { color: verde; }
Sin embargo, al diseñar con CSS, generalmente se recomienda que solo se usen clases (p. ej ., .highlight) en lugar de elementos con
clases (p. ej ., div.highlight).
Como con cualquier otro selector, las clases se pueden anidar:
.main .highlight { color: rojo; } /* Combinador de descendientes */

.footer > .highlight { color: azul; } /* Combinador hijo */
También puede encadenar el selector de clase para seleccionar solo elementos que tengan una combinación de varias clases. Por ejemplo, si este
es nuestro HTML:
<div class=" menú izquierdo especial">Este texto será rosa</div>
Y queremos colorear este texto específico de rosa, podemos hacer lo siguiente en nuestro CSS:
.special.left.menu { color: rosa; }
Sección 10.2: Dar un ID a un elemento

El atributo ID de un elemento es un identificador que debe ser único en todo el documento. Su propósito es identificar de manera única el elemento
cuando se vincula (usando un ancla), se crea una secuencia de comandos o se diseña (con CSS).
<div id="ejemplo-id"></div>
No debe tener dos elementos con el mismo ID en el mismo documento, incluso si los atributos están adjuntos a dos tipos diferentes de elementos. Por
ejemplo, el siguiente código es incorrecto:
<div id="ejemplo-id"></div> <span

id="ejemplo-id">
Los navegadores harán todo lo posible para representar este código, pero pueden ocurrir comportamientos inesperados al diseñar con CSS o al agregar
funcionalidad con JavaScript.
Para hacer referencia a los elementos por su ID en CSS, prefije la ID con #.
#ejemplo-id { color: verde; }
Para saltar a un elemento con una ID en una página determinada, agregue # con el nombre del elemento en la URL.
http://example.com/about#example-id
Esta característica es compatible con la mayoría de los navegadores y no requiere JavaScript o CSS adicional para funcionar.
Sección 10.3: Valores aceptables

Para una identificación
Versión ÿ 5
Las únicas restricciones sobre el valor de una identificación son:
1. debe ser único en el documento 2. no debe

contener ningún carácter de espacio 3. debe contener al
menos un carácter
Entonces, el valor puede ser todos los dígitos, solo un dígito, solo caracteres de puntuación, incluir caracteres especiales, lo que sea. Simplemente sin
espacios en blanco.
Así que estos son válidos:
<div id="contenedor"> ... </div>

<div id="999"> ... </div> <div

id="#%LV-||"> ... </div> <div id="____V"> ...
</div>
<div id="ÿÿ"> ... </div>
<div id="ÿ"> ... </div> <div
id="{}"> ... </div> <div id="©"> ... </
div>
<div id="ÿÿ¤ÿ€~¥"> ... </div>
Esto no es válido:
<div id=" "> ... </div>
Esto tampoco es válido, cuando se incluye en el mismo documento:
<div id="resultados"> ... </div> <div

id="resultados"> ... </div>
Versión ÿ 4.01
Un valor de id debe comenzar con una letra, que luego solo puede ir seguida de:
letras (AZ/az) dígitos
(0-9) guiones ("-")
guiones bajos ("_")

dos puntos (":") puntos
(".")
Haciendo referencia al primer grupo de ejemplos en la sección HTML5 anterior, solo uno es válido:
<div id="contenedor"> ... </div>
Estos también son válidos:
<div id="texto de muestra"> ... </div> <div

id="texto de muestra"> ... </div> <div id="texto_de
muestra"> ... </div> <div id ="muestra:texto"> ... </
div> <div id="muestra.texto"> ... </div>
Nuevamente, si no comienza con una letra (mayúscula o minúscula), no es válido.
para una clase
Las reglas para las clases son esencialmente las mismas que para una identificación. La diferencia es que los valores de clase no necesitan ser únicos en
el documento.
Haciendo referencia a los ejemplos anteriores, aunque esto no es válido en el mismo documento:
<div id="resultados"> ... </div> <div

id="resultados"> ... </div>
Esto está perfectamente bien:
<div class="resultados"> ... </div>

<div class="resultados"> ... </div>
Nota importante: cómo se tratan los valores de ID y clase fuera de HTML
Tenga en cuenta que las reglas y los ejemplos anteriores se aplican en el contexto de HTML.
El uso de números, signos de puntuación o caracteres especiales en el valor de una identificación o una clase puede causar
problemas en otros contextos, como CSS, JavaScript y expresiones regulares.
Por ejemplo, aunque la siguiente identificación es válida en HTML5:
<div id="9leones"> ... </div>
... no es válido en CSS:
4.1.3 Caracteres y mayúsculas y minúsculas
En CSS, los identificadores (incluidos los nombres de los elementos, las clases y los ID en los selectores) solo pueden contener
los caracteres [a-zA-Z0-9] y los caracteres ISO 10646 U+00A0 y superiores, más el guión (-) y el guión bajo ( _); no pueden
comenzar con un dígito, dos guiones o un guión seguido de un dígito. (énfasis añadido)
En la mayoría de los casos, puede escapar caracteres en contextos donde tienen restricciones o significado especial.
Referencias W3C
3.2.5.1 El identificación atributo

3.2.5.7 El clase atributo
6.2 Tipos básicos de SGML
Sección 10.4: Problemas relacionados con identificaciones duplicadas
Tener más de un elemento con el mismo ID es un problema difícil de solucionar. El analizador HTML generalmente intentará representar
la página en cualquier caso. Normalmente no se produce ningún error. Pero el ritmo podría terminar en una página web que se comporta mal.
En este ejemplo:
<div id="aDiv">a</div> <div

id="aDiv">b</div>
Los selectores de CSS todavía funcionan
#aDiv
{ color: rojo;
}
Pero JavaScript no puede manejar ambos elementos:
var html = documento.getElementById("aDiv").innerHTML;
En este caso, la variable html solo tiene el contenido del primer div ("a").

Capítulo 11: Atributos de datos

Valor Descripción
algún valor Especifica el valor del atributo (como una cadena)
Sección 11.1: Compatibilidad con navegadores antiguos

Los atributos de datos se introdujeron en HTML5, que es compatible con todos los navegadores modernos, pero los navegadores anteriores a
HTML5 no reconocen los atributos de datos.
Sin embargo, en las especificaciones HTML, los atributos que no son reconocidos por el navegador deben dejarse solos y el navegador
simplemente los ignorará al mostrar la página.
Los desarrolladores web han utilizado este hecho para crear atributos no estándar que son atributos que no forman parte de las especificaciones
HTML. Por ejemplo, el atributo de valor en la línea a continuación se considera un atributo no estándar porque las especificaciones para la etiqueta
<img> no tienen un atributo de valor y no es un atributo global:
<img src="muestra.jpg" valor="prueba" />
Esto significa que aunque los atributos de datos no son compatibles con los navegadores más antiguos, aún funcionan y puede establecerlos y
recuperarlos usando los mismos métodos genéricos setAttribute y getAttribute de JavaScript , pero no puede usar la nueva propiedad de conjunto de
datos que solo es compatible con los navegadores modernos.
Sección 11.2: Uso de atributos de datos
Los atributos data-* de HTML5 proporcionan una manera conveniente de almacenar datos en elementos HTML. Los datos almacenados se pueden
leer o modificar usando JavaScript
<div data-submitted="yes" class="user_profile">

… algo de contenido …
</div>
La estructura del atributo de datos es data-*, es decir, el nombre del atributo de datos viene después de la parte de datos . Usando este
nombre, se puede acceder al atributo.
Los datos en formato de cadena (incluido json) se pueden almacenar utilizando el atributo data-* .

Capítulo 12: Enlace de recursos

Atributo Detalles
juego de caracteres Especifica la codificación de caracteres del documento vinculado
crossorigin Especifica cómo el elemento maneja las solicitudes de origen cruzado

href Especifica la ubicación del documento vinculado
hreflang Especifica el idioma del texto en el documento vinculado
medios de comunicación
Especifica en qué dispositivo se mostrará el documento vinculado, a menudo se usa con la selección de hojas de estilo
según el dispositivo en cuestión
real Requerido. Especifica la relación entre el documento actual y el documento vinculado
Rvdo Especifica la relación entre el documento vinculado y el documento actual
tamaños Especifica el tamaño del recurso vinculado. Solo cuando rel="icon"
objetivo Especifica dónde se cargará el documento vinculado
escribe Especifica el tipo de medio del documento vinculado
Especifica un hash codificado en base64 (sha256, sha384 o sha512) del recurso vinculado que permite la
integridad
navegador para verificar su legitimidad.
Si bien muchas secuencias de comandos, íconos y hojas de estilo se pueden escribir directamente en formato HTML, es una buena práctica y más
eficiente incluir estos recursos en su propio archivo y vincularlos a su documento. Este tema cubre la vinculación
recursos externos como hojas de estilo y scripts en un documento HTML.
Sección 12.1: JavaScript

Sincrónico
<secuencia de comandos src="ruta/a.js"></secuencia de comandos>
La práctica estándar es colocar etiquetas JavaScript <script> justo antes de la etiqueta de cierre </body> . Cargando sus scripts al final
permite que las imágenes de su sitio se muestren más rápidamente y evita que JavaScript intente interactuar con
elementos que aún no se han cargado.
Asincrónico
<script src="ruta/a.js" asíncrono></script>
Otra alternativa, cuando el código Javascript que se está cargando no es necesario para la inicialización de la página, se puede cargar
de forma asíncrona, acelerando la carga de la página. Al usar async , el navegador cargará el contenido del script en paralelo
y, una vez que se haya descargado por completo, interrumpirá el análisis de HTML para analizar el archivo Javascript.
Diferido
<script src="ruta/a.js" aplazar></script>
Las secuencias de comandos diferidas son como secuencias de comandos asíncronas, con la excepción de que el análisis solo se realizará una vez que se haya completado el HTML.
completamente analizado. Se garantiza que los scripts diferidos se carguen en el orden de declaración, de la misma manera que sincrónicos
guiones.
<sin guion>
<noscript>JavaScript deshabilitado</noscript>
El elemento <noscript> define el contenido que se mostrará si el usuario tiene los scripts deshabilitados o si el navegador no los tiene.
apoyo mediante scripts. La etiqueta <noscript> se puede colocar en <head> o en <body>.

Sección 12.2: Hoja de estilo CSS externa

<enlace rel="hoja de estilo" href="ruta/a.css" type="texto/css">
La práctica estándar es colocar etiquetas CSS <link> dentro de la etiqueta <head> en la parte superior de su HTML. De esta
manera, el CSS se cargará primero y se aplicará a su página a medida que se carga, en lugar de mostrar HTML sin estilo hasta
que se cargue el CSS. El atributo de tipo no es necesario en HTML5, porque HTML5 generalmente admite CSS.
<enlace rel="hoja de estilo" href="ruta/a.css" type="texto/css">
<enlace rel="hoja de estilo" href="ruta/hacia.css">
... hacer lo mismo en HTML5.
Otra práctica, aunque menos común, es usar una instrucción @import dentro de CSS directo. Me gusta esto:
< tipo de estilo="texto/css">

@import("ruta/hacia.css") </
style>
<estilo>
@import("ruta/hacia.css") </
estilo>
Sección 12.3: Favicon

<enlace rel="icono" tipo="imagen/png" href="/favicon.png"> <enlace
rel="icono de acceso directo" tipo="imagen/icono-x" href="/favicon.ico">
Utilice la imagen/png de tipo mimo para archivos PNG y la imagen/icono x para archivos de icono (*.ico) . Para conocer la diferencia, consulte esta
pregunta SO .
Un archivo llamado favicon.ico en la raíz de su sitio web normalmente se cargará y aplicará automáticamente, sin necesidad de una
etiqueta <link> . Si este archivo cambia alguna vez, los navegadores pueden volverse lentos y obstinados a la hora de actualizar su caché.
Sección 12.4: CSS alternativo

<link rel="hoja de estilo alternativa" href="ruta/al/estilo.css" title="tuTítulo">
Algunos navegadores permiten aplicar hojas de estilo alternativas si se ofrecen. Por defecto no se aplicarán, pero normalmente
se pueden cambiar a través de la configuración del navegador:
Firefox le permite al usuario seleccionar la hoja de estilo usando el submenú Ver > Estilo de página, Internet Explorer también es
compatible con esta función (a partir de IE 8), también se accede desde Ver > Estilo de página (al menos a partir de IE 11), pero
Chrome requiere una extensión para utilizar la función (a partir de la versión 48). La página web también puede proporcionar su propia
interfaz de usuario para permitir que el usuario cambie de estilo.
(Fuente: los documentos de MDN)

Sección 12.5: Sugerencia de recursos: dns-prefetch, prefetch, prerender

Preconectar
La relación de preconexión es similar a dns-prefetch en que resolverá el DNS. Sin embargo, también realizará el protocolo de enlace TCP y la negociación TLS opcional.
Esta es una característica experimental.
<enlace rel="preconectar" href="URL">

Precarga de DNS
Informa a los navegadores para que resuelvan el DNS de una URL, de modo que todos los activos de esa URL se carguen más rápido.
<enlace rel="dns-prefetch" href="URL">

captación previa
Informa a los navegadores que un recurso determinado debe precargarse para que pueda cargarse más rápidamente.
<enlace rel="prefetch" href="URL">
DNS-Prefetch resuelve solo el nombre de dominio, mientras que prefetch descarga/almacena los recursos especificados.
preprocesar
Informa a los navegadores que obtengan y representen la URL en segundo plano, de modo que puedan entregarse al usuario instantáneamente mientras el
usuario navega a esa URL. Esta es una característica experimental.
<enlace rel="prerender" href="URL">
Sección 12.6: Atributo 'medios' del enlace
<enlace rel="hoja de estilo" href="prueba.css" media="imprimir">
Medios especifica qué hoja de estilo se debe usar para qué tipo de medios. El uso del valor de impresión solo mostraría esa hoja de estilo para imprimir páginas.
El valor de este atributo puede ser cualquiera de los valores de tipo de medio (similar a una consulta de medios CSS).
Sección 12.7: Anterior y Siguiente
Cuando una página es parte de una serie de artículos, por ejemplo, uno puede usar anterior y siguiente para señalar las páginas que vienen antes y después.
<enlace rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<enlace rel="siguiente" href="http://stackoverflow.com/documentation/css/topics">
Sección 12.8: Fuente web
Utilice el atributo rel="alternate" para permitir la detección de sus fuentes Atom/RSS.
<link rel="alternate" type="aplicación/atom+xml" href="http://example.com/feed.xml" /> <link rel="alternate"

type="aplicación/rss+xml" href ="http://ejemplo.com/feed.xml" />

Consulte los documentos de MDN para fuentes RSS y Atomic RSS.

Capítulo 13: Incluir código JavaScript en

HTML
Atributo Detalles
origen Especifica la ruta a un archivo JavaScript. Ya sea una URL relativa o absoluta.
escribe Especifica el tipo MIME. Este atributo es obligatorio en HTML4, pero opcional en HTML5.
Especifica que el script se ejecutará de forma asíncrona (solo para scripts externos). Este atributo no requiere ningún valor (excepto
asíncrono
XHTML).
Especifica que la secuencia de comandos se ejecutará cuando la página haya terminado de analizarse (solo para secuencias de
aplazar
comandos externas). Este atributo no requiere ningún valor (excepto XHTML).
juego de caracteres Especifica la codificación de caracteres utilizada en un archivo de script externo, por ejemplo, UTF-8
crossorigin Cómo el elemento maneja las solicitudes crossorigin
mientras tanto Nonce criptográfico utilizado en las comprobaciones de la política de seguridad de contenido CSP3
Sección 13.1: Manejo de Javascript deshabilitado

Es posible que el navegador del cliente no sea compatible con Javascript o que tenga deshabilitada la ejecución de Javascript, quizás por razones de
seguridad. Para poder decirles a los usuarios que se supone que se debe ejecutar un script en la página, se puede usar la etiqueta <noscript> . El contenido
de <noscript> se muestra cada vez que Javascript está deshabilitado para la página actual.
<script>
document.write("¡Hola, mundo!"); </script> <noscript>Este
navegador no es compatible con Javascript.</noscript>
Sección 13.2: Vinculación a un archivo JavaScript externo

<secuencia de comandos src="ejemplo.js"></secuencia de comandos>
El atributo src funciona como el atributo href en las anclas: puede especificar una URL absoluta o relativa. El ejemplo anterior vincula a un archivo dentro
del mismo directorio del documento HTML. Esto generalmente se agrega dentro de las etiquetas <head> en la parte superior del documento html
Sección 13.3: Inclusión directa de código JavaScript

En lugar de vincular a un archivo externo, también puede incluir el código JS tal cual en su HTML:
<script>
// código JavaScript </script>
Sección 13.4: Incluir un archivo JavaScript que se

ejecuta de forma asíncrona
<script type="text/javascript" src="URL" asíncrono></script>

Capítulo 14: Uso de HTML con CSS

CSS proporciona estilos a los elementos HTML de la página. El estilo en línea implica el uso del atributo de estilo en las etiquetas y se desaconseja
encarecidamente. Las hojas de estilo internas usan la etiqueta <style> y se usan para declarar reglas para partes dirigidas de la página. Las hojas
de estilo externas se pueden usar a través de una etiqueta <link> que toma un archivo externo de CSS y aplica las reglas al documento. Este tema
cubre el uso de los tres métodos de conexión.
Sección 14.1: Uso de hojas de estilo externas

Use el atributo de enlace en el encabezado del documento:
<cabeza>
<enlace rel="hoja de estilo" type="texto/css" href="hoja de estilo.css"> </head>
También puede usar hojas de estilo proporcionadas desde sitios web a través de una red de entrega de contenido, o CDN para abreviar. (por
ejemplo, Bootstrap):
<cabeza>
<enlace rel="hoja de estilo"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integridad="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anónimo"> </head>
En general, puede encontrar soporte de CDN para un marco en su sitio web.
Sección 14.2: Hoja de estilo interna

También puedes incluir elementos CSS internamente usando la etiqueta <style> :
<cabeza>
<style type="text/css"> cuerpo
{ color de fondo: gris;
} </estilo>
</cabeza>
También se pueden incluir múltiples hojas de estilo internas en un programa.
<cabeza>
<style type="text/css"> cuerpo
{ color de fondo: gris;
} </estilo>
<style type="text/css"> p { color

de fondo: azul;
} </estilo>
</cabeza>

Sección 14.3: Estilo en línea

Puede diseñar un elemento específico utilizando el atributo de estilo :
<span style="color: red">Este texto aparecerá en rojo.
Nota: trate de evitar esto: el objetivo de CSS es separar el contenido de la presentación.
Sección 14.4: Múltiples hojas de estilo

Es posible cargar múltiples hojas de estilo:
<head>
<link rel="hoja de estilo" type="text/css" href="general.css"> <link rel="hoja
de estilo" type="text/css" href="específico.css">
</cabeza>
Tenga en cuenta que los archivos y declaraciones posteriores anularán los anteriores. Entonces, si general.css contiene:
cuerpo
{ color de fondo: rojo;
}
y specific.css contiene:
cuerpo
{ color de fondo: azul;
}
si se utilizan ambos, el fondo del documento será azul.

Capítulo 15: Imágenes

Parámetros Detalles
origen Especifica la URL de la imagen.
srcset Imágenes para usar en diferentes situaciones (p. ej., pantallas de alta resolución, monitores pequeños, etc.)
tamaños Tamaños de imagen entre puntos de interrupción
crossorigin Cómo el elemento maneja las solicitudes crossorigin
mapa de uso Nombre del mapa de imagen a usar
ismap Si la imagen es un mapa de imágenes del lado del servidor

alternativa
Texto alternativo que debería mostrarse si por algún motivo no se pudiera mostrar la imagen
ancho Especifica el ancho de la imagen (opcional)
altura Especifica la altura de la imagen (opcional)
Sección 15.1: Creación de una imagen

Para agregar una imagen a una página, use la etiqueta de imagen.
Las etiquetas de imagen (img) no tienen etiquetas de cierre. Los dos atributos principales que le da a la etiqueta img son src, la fuente de la imagen
y alt, que es un texto alternativo que describe la imagen.
<img src="imágenes/hola.png" alt="Hola mundo">
También puede obtener imágenes de una URL web:
<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="Usuario de StackOverflow Caleb Kleveter">
Nota: Técnicamente, las imágenes no se insertan en una página HTML, las imágenes están vinculadas a páginas HTML. La etiqueta <img>
crea un espacio de espera para la imagen de referencia.
También es posible incrustar imágenes directamente dentro de la página usando base64:
<img src="datos:imagen/png;base64,iVBOR..." alt="Hola mundo">
Sugerencia: para vincular una imagen a otro documento, simplemente anide la etiqueta <img> dentro de las etiquetas <a> .
Sección 15.2: Elegir texto alternativo

El texto alternativo es utilizado por lectores de pantalla para usuarios con discapacidades visuales y por motores de búsqueda. Por lo tanto, es importante
escribe un buen texto alternativo para tus imágenes.
El texto debería verse correcto incluso si reemplaza la imagen con su atributo alt. Por ejemplo:


<img src="anonymous.png" alt="Avatar de usuario anónimo"/> Un usuario anónimo escribió:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Editar icono"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Eliminar icono"/></a>
Sin las imágenes, esto se vería así:
Avatar de usuario anónimo Un usuario anónimo escribió:

Lorem ipsum dolor sed.
icono de edición / Eliminar icono
Para corregir esto:
Elimina el texto alternativo del avatar. Esta imagen agrega información para los usuarios videntes (un ícono fácilmente identificable para mostrar
que el usuario es anónimo), pero esta información ya está disponible en el texto.1 Elimine el "icono" del texto alternativo para los íconos. Saber que
esto sería un ícono si estuviera allí no ayuda a transmitir su propósito real.


<img src="anonymous.png" alt=""/> Un usuario anónimo escribió:
<blockquote>Lorem ipsum dolor sed.</blockquote> <a href="https://
google.com/"><img src ="editar.png" alt="Editar"/></a> / <a href="https://google.com/"><img
src="eliminar.png" alt="Eliminar"/>< /a>
Un usuario anónimo escribió:
Lorem ipsum dolor sed.
Editar / Eliminar
notas al pie
1 Existe una diferencia semántica entre incluir un atributo alt vacío y excluirlo por completo. Un atributo alt vacío indica que la imagen no es una parte clave
del contenido (como es cierto en este caso, es solo una imagen adicional que no es necesaria para comprender el resto) y, por lo tanto, puede omitirse de la
representación. Sin embargo, la falta de un atributo alt indica que la imagen es una parte clave del contenido y que simplemente no hay un equivalente textual
disponible para renderizar.
Sección 15.3: Imagen responsiva usando el atributo srcset

Usando srcset con tamaños
<img tamaños="(ancho mínimo: 1200px) 580px,

(ancho mínimo: 640px) 48vw, 98vw"
srcset="img/hola-300.jpg 300w, img/

hola-600.jpg 600w, img/hola-900.jpg
900w, img/hola-1200.jpg 1200w"
src="img/hola-900.jpg" alt="hola">
los tamaños son como consultas de medios, que describen cuánto espacio ocupa la imagen en la ventana gráfica.
si la ventana gráfica es más grande que 1200 px, la imagen es exactamente 580 px (por ejemplo, nuestro contenido está centrado en un contenedor
que tiene un ancho máximo de 1200 px. La imagen ocupa la mitad menos los márgenes). si la ventana gráfica está entre 640 px y 1200 px, la imagen
ocupa el 48 % de la ventana gráfica (por ejemplo, la imagen se escala con nuestra página y ocupa la mitad del ancho de la ventana gráfica menos los
márgenes). si la ventana gráfica tiene cualquier otro tamaño escala con nuestra página y toma el ancho completo de la ventana gráfica menos los
, en
márgenes). La condición de los medios nuestro
debe caso,para
omitirse menos de 640elemento.
el último px, la imagen ocupa el 98 % de la ventana gráfica (por ejemplo, la imagen
srcset simplemente le dice al navegador qué imágenes tenemos disponibles y cuáles son sus tamaños.

img/hello-300.jpg tiene 300 px de ancho,

img/hello-1200.jpg tiene 1200 px de ancho
src es siempre una fuente de imagen obligatoria. En caso de usar con srcset, src servirá una imagen alternativa en caso de que el navegador no sea
compatible con srcset.
Usando srcset sin tamaños
<img src="img/hola-300.jpg" alt="hola"

srcset="img/hola-300.jpg 1x, img/
hola-600.jpg 2x, img/hola-1200.jpg 3x">
srcset proporciona una lista de imágenes disponibles, con descriptor x proporción de píxeles del dispositivo .
si la proporción de píxeles del dispositivo es 1, use img/hello-300.jpg
si la proporción de píxeles del dispositivo es 2, use img/hello-600.jpg
si la relación de píxeles del dispositivo es 3, use img/hello-1200.jpg
src es siempre una fuente de imagen obligatoria. En caso de usar con srcset, src servirá una imagen alternativa en caso de que el navegador no sea
compatible con srcset.
Sección 15.4: Imagen receptiva usando elemento de imagen

Código
<imagen>
<source media="(min-width: 600px)" srcset="large_image.jpg"> <source media="(min-
width: 450px)" srcset="pequeña_imagen.jpg"> <img src=" imagen_predeterminada.jpg"
style="width:auto;"> </imagen>
Uso
Para mostrar diferentes imágenes en diferentes anchos de pantalla, debe incluir todas las imágenes que usan la etiqueta de origen en una
etiqueta de imagen como se muestra en el ejemplo anterior.
Resultado
En pantallas con ancho de pantalla >600px, muestra imagen_grande.jpg En

pantallas con ancho de pantalla >450px, muestra imagen_pequeña.jpg En
pantallas con otro ancho de pantalla, muestra imagen_predeterminada.jpg

Capítulo 16: Mapas de imágenes

Valor de etiqueta/atributo <img> A continuación, se muestran los atributos específicos del mapa de
imágenes que se deben usar con <img>. Se aplican los atributos regulares de <img> .
El nombre del mapa con un símbolo de almohadilla antepuesto. Por ejemplo, para un mapa con nombre="mapa", la imagen debe tener
mapa de uso
usemap="#mapa".
<mapa>
nombre
El nombre del mapa para identificarlo. Para ser usado con el atributo usemap de la imagen .
<área> A continuación se muestran los atributos específicos de <area>. Cuando se especifica href , haciendo que <area> sea un enlace,
<area> también admite todos los atributos de la etiqueta de anclaje (<a>) excepto ping. Véalos en los documentos de MDN.
alternativa
El texto alternativo para mostrar si las imágenes no son compatibles. Esto solo es necesario si href también está configurado en <area>.
Las coordenadas que delimitan el área seleccionable. Cuando forma="polígono", debe establecerse en una lista de pares "x, y" separados por
coordenadas
comas (es decir, forma="polígono" coords="x1, y1, x2, y2, x3, y3, ... ").
Cuando forma = "rectángulo", debe establecerse en izquierda, arriba, derecha, abajo. Cuando forma = "círculo",
debe establecerse en centroX, centroY, radio.
href La URL del hipervínculo, si se especifica. Si se omite, el <área> no representará un hipervínculo.
La forma del <área>. Se puede configurar de forma predeterminada para seleccionar la imagen completa (no se necesita atributo
forma de coordenadas), círculo o círculo para un círculo, rectángulo o recto para un rectángulo y polígono o poli para un área poligonal
especificada por puntos de esquina.
Sección 16.1: Introducción a los mapas de imágenes

Descripción
Un mapa de imagen es una imagen con áreas en las que se puede hacer clic que normalmente actúan como hipervínculos.
La imagen está definida por la etiqueta <img> , y el mapa está definido por un <map> etiqueta con <área> etiquetas para indicar cada área en la que
se puede hacer clic. Utilice los atributos usemap y name para enlazar la imagen y el mapa.
Ejemplo básico
Para crear un mapa de imagen de modo que se pueda hacer clic en cada una de las formas de la siguiente imagen:
El código sería el siguiente:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes"> <map name="shapes"> <area shape="polygon"

coords="79, 6,5,134,153,134"> < forma de área="rectángulo" coords="177,6,306,134"> < forma de área="círculo" coords="397,71,65">

</mapa>
Debería ver que el navegador reconoce las áreas cuando el cursor se convierte en un puntero. Ver una demostración en vivo en JSFiddle

Capítulo 17: Elementos de control de entrada

Clase de Detalles
parámetro Indica la Clase de la entrada
identificación
Indica el ID de la entrada.
Identifica el tipo de control de entrada para mostrar. Los valores aceptables son ocultos, texto, teléfono, URL, correo electrónico,
contraseña, fecha, hora, número, rango, color, casilla de verificación, radio, archivo, enviar, imagen, restablecer y botón.
escribe
El valor predeterminado es texto si no se especifica, si el valor no es válido o si el navegador no admite el tipo
especificado.
nombre Indica el nombre de la entrada.
Valor booleano que indica que la entrada debe deshabilitarse. Los controles deshabilitados no se pueden editar, son
discapacitado
no se envía al enviar el formulario y no puede recibir el foco.
Cuando el valor del atributo de tipo es radio o checkbox, la presencia de este atributo booleano
comprobado
indica que el control está seleccionado por defecto; de lo contrario, se ignora.
múltiple HTML5 Indica que se pueden pasar varios archivos o valores (se aplica solo a entradas de tipo de archivo y correo electrónico )
HTML5 Una sugerencia para el usuario de lo que se puede ingresar en el control contiene . El texto de marcador de posición no debe
marcador de posición
retornos de carro o saltos de línea
autocompletar HTML5 Indica si el navegador puede completar automáticamente el valor del control.
Valor booleano que indica que la entrada no es editable. Los controles de solo lectura todavía se envían en el formulario
solo lectura presentación, pero no recibirá el foco. HTML5: este atributo se ignora cuando el valor de tipo
el atributo está configurado como oculto, rango, color, casilla de verificación, radio, archivo o botón.
HTML5 Indica que debe estar presente un valor o que el elemento debe verificarse para que el formulario
requerido
ser presentado
alternativa
Un texto alternativo para las imágenes, en caso de que no se muestren.
enfoque automático El elemento <input> debe recibir el foco cuando se carga la página.
valor Especifica el valor del elemento <input> .
El atributo de paso especifica los intervalos de números legales. Funciona con los siguientes tipos de entrada:
paso
número, rango, fecha, fechahora-local, mes, hora y semana.
Un componente clave de los sistemas web interactivos, las etiquetas de entrada son elementos HTML diseñados para tomar una forma específica de
entrada de los usuarios. Diferentes tipos de elementos de entrada pueden regular los datos ingresados para ajustarse a un formato específico y
proporcionar seguridad a la entrada de contraseña.
Sección 17.1: Texto

El tipo de entrada más básico y la entrada predeterminada si no se especifica ningún tipo . Este tipo de entrada define un campo de texto de una sola línea
con saltos de línea eliminados automáticamente del valor de entrada. Todos los demás caracteres se pueden introducir en este. <entrada>
Los elementos se utilizan dentro de un elemento <form> para declarar controles de entrada que permiten a los usuarios introducir datos.
Sintaxis
< tipo de entrada="texto">
o (sin especificar un tipo, utilizando el atributo predeterminado):
<entrada>
El ancho predeterminado de una entrada de campo de texto es de 20 caracteres. Esto se puede cambiar especificando un valor para el tamaño
atributo como este:
< tipo de entrada="texto" tamaño="50">

El atributo de tamaño es claramente diferente a establecer un ancho con CSS. El uso de un ancho define un valor específico (en número de píxeles,
porcentaje del elemento principal, etc.) que la entrada siempre debe ser ancha. El uso del tamaño calcula la cantidad de ancho para asignar en
función de la fuente que se utiliza y el ancho normal de los caracteres.
Nota: El uso del atributo de tamaño no limita inherentemente la cantidad de caracteres que se pueden ingresar en el cuadro, solo el ancho que se
muestra en el cuadro. Para limitar la longitud, consulte Validación de entrada.
Un campo de entrada solo permite una línea de texto. Si necesita una entrada de texto de varias líneas para una cantidad considerable de texto, use
un elemento <textarea> en su lugar.
Sección 17.2: Casilla de verificación y botones de opción

Visión de conjunto
Las casillas de verificación y los botones de radio se escriben con la etiqueta HTML <input> y su comportamiento se define en la especificación HTML .
La casilla de verificación o botón de radio más simple es un elemento <input> con un atributo de tipo de casilla de verificación o radio,
respectivamente:
< tipo de entrada="casilla de

verificación"> < tipo de entrada="radio">
Se utiliza un único elemento de casilla de verificación independiente para una sola opción binaria, como una pregunta de sí o no. Las casillas de
verificación son independientes, lo que significa que el usuario puede seleccionar tantas opciones como desee en un grupo de casillas de verificación. En
otras palabras, marcar una casilla de verificación no desmarca las otras casillas de verificación en el grupo de casillas de verificación.
Los botones de opción generalmente vienen en grupos (si no está agrupado con otro botón de opción, probablemente quiso usar una casilla de
verificación en su lugar) identificados usando el mismo atributo de nombre en todos los botones dentro de ese grupo. La selección de botones de opción
es mutuamente excluyente, lo que significa que el usuario solo puede seleccionar una opción de un grupo de botones de opción.
Cuando se marca un botón de radio, cualquier otro botón de radio con el mismo nombre que se marcó previamente se desmarca.
Ejemplo:
< tipo de entrada="radio" nombre="color" id="rojo" valor="#F00"> < tipo de entrada="radio"

nombre="color" id="verde" valor="#0F0"> <entrada tipo="radio" nombre="color" id="azul"
valor="#00F">
Cuando se ven, los botones de radio aparecen como un círculo (sin marcar) o un círculo relleno (marcado). Las casillas de verificación aparecen
como un cuadrado (sin marcar) o un cuadrado relleno (marcado). Según el navegador y el sistema operativo, el cuadrado a veces tiene esquinas
redondeadas.
Atributos
Las casillas de verificación y los botones de radio tienen una serie de atributos para controlar su comportamiento:
valor
Como cualquier otro elemento de entrada, el atributo de valor especifica el valor de cadena que se asociará con el botón en caso de que se envíe un
formulario. Sin embargo, las casillas de verificación y los botones de radio son especiales porque cuando se omite el valor, se activa de forma
predeterminada cuando se envía, en lugar de enviar un valor en blanco. El atributo de valor no se refleja en la apariencia del botón.
comprobado

El atributo marcado especifica el estado inicial de una casilla de verificación o botón de radio. Este es un atributo booleano y puede omitirse.
Cada una de estas son formas válidas y equivalentes de definir un botón de opción marcado:
<entrada marcada>
<entrada marcada="">
<entrada marcada="marcada">
<entrada marcada="Chequear">
La ausencia del atributo marcado es la única sintaxis válida para un botón no marcado:
< tipo de entrada="radio"> <

tipo de entrada="casilla de verificación">
Al restablecer un <formulario>, las casillas de verificación y los botones de radio vuelven al estado de su atributo marcado .
Accesibilidad
Etiquetas
Para dar contexto a los botones y mostrar a los usuarios para qué sirve cada botón, cada uno de ellos debe tener una etiqueta. Esto se puede hacer usando
un elemento <label> para envolver el botón. Además, esto hace que se pueda hacer clic en la etiqueta, por lo que selecciona el botón correspondiente.
Ejemplo:
<etiqueta>
< tipo de entrada="radio" nombre="color" valor="#F00">
Rojo
</etiqueta>
o con un elemento <label> con un atributo for establecido en el atributo id del botón:
<input type="checkbox" name="color" value="#F00" id="red"> <label for="red">Rojo</label>
Grupos de botones
Dado que cada botón de opción afecta a los demás del grupo, es común proporcionar una etiqueta o contexto para todo el grupo de botones de opción.
Para proporcionar una etiqueta para todo el grupo, los botones de opción deben incluirse en un elemento <fieldset> con un elemento <legend>
dentro.
Ejemplo:
<fieldset>
<legend> Color del tema:</legend>
<p>
<input type="radio" name="color" id="red" value="#F00"> <label for="red">Rojo</label>
</p>
<p>
<input type="radio" name="color" id="green" value="#0F0"> <label for="green">Verde</
label> </p>

<p>
<input type="radio" name="color" id="blue" value="#00F"> <label for="blue">Azul</
label>
</p> </
conjunto de campos>
Las casillas de verificación también se pueden agrupar de manera similar, con un campo y una leyenda que identifiquen el grupo de casillas de verificación
relacionadas. Sin embargo, tenga en cuenta que las casillas de verificación no deben compartir el mismo nombre porque no se excluyen mutuamente.
Hacer esto dará como resultado que el formulario envíe múltiples valores para la misma clave y no todos los idiomas del lado del servidor manejan esto de la
misma manera (comportamiento indefinido). Cada casilla de verificación debe tener un nombre único o usar un conjunto de corchetes ([]) para indicar que el
formulario debe enviar una matriz de valores para esa clave.
El método que elija dependerá de cómo planee manejar los datos del formulario del lado del cliente o del lado del servidor. También debe mantener la leyenda
corta, ya que algunas combinaciones de navegadores y lectores de pantalla leen la leyenda antes de cada campo de entrada en el conjunto de campos.
Sección 17.3: Validación de entrada

El navegador realiza automáticamente la validación de la entrada HTML en función de los atributos especiales del elemento de entrada. Podría reemplazar
parcial o completamente la validación de entrada de JavaScript. El usuario puede eludir este tipo de validación a través de solicitudes HTTP especialmente
diseñadas, por lo que no reemplaza la validación de entrada del lado del servidor. La validación solo se produce cuando se intenta enviar el formulario, por lo
que todas las entradas restringidas deben estar dentro de un formulario para que se produzca la validación (a menos que esté utilizando JavaScript). Tenga
en cuenta que las entradas que están deshabilitadas o son de solo lectura no activarán la validación.
Algunos tipos de entrada más nuevos (como correo electrónico, URL, teléfono, fecha y muchos más) se validan automáticamente y no requieren sus
propias restricciones de validación.
Versión ÿ 5
Requerido
Utilice el atributo requerido para indicar que se debe completar un campo para pasar la validación.
<entrada requerida>
Longitud mínima / máxima
Utilice los atributos minlength y maxlength para indicar los requisitos de longitud. La mayoría de los navegadores evitarán que el usuario escriba más de un
máximo de caracteres en el cuadro, lo que evitará que su entrada sea inválida incluso antes de intentar enviarla.
<entrada longitud mínima="3">

<entrada longitud máxima="15">
<entrada longitud mínima="3" longitud máxima="15">
Especificación de un rango
Use atributos mínimos y máximos para restringir el rango de números que un usuario puede ingresar en una entrada de tipo número o rango
Marcas: <input type="number" size="6" name="marks" min="0" max="100" />

Comentarios del asunto: <input type="range" size="2" name="feedback" min="1" max="5" />
Versión ÿ 5
Coincidir con un patrón
Para obtener más control, use el atributo de patrón para especificar cualquier expresión regular que deba coincidir para pasar la validación. También
puede especificar un título, que se incluye en el mensaje de validación si el campo no pasa.

<input pattern="\d*" title="Solo números, por favor.">
Este es el mensaje que se muestra en la versión 51 de Google Chrome al intentar enviar el formulario con un valor no válido dentro de este campo:
No todos los navegadores muestran un mensaje de patrones no válidos, aunque existe un soporte completo entre los navegadores modernos más
utilizados.
Verifique el soporte más reciente en CanIUse e implementar en consecuencia.
Versión ÿ 5
Aceptar tipo de archivo
Para los campos de entrada de tipo archivo, es posible aceptar solo ciertos tipos de archivos, como videos, imágenes, audios, extensiones de
archivo específicas o ciertos tipos de medios. Por ejemplo:
<input type="file" accept="imagen/*" title="Solo se permiten imágenes">
Se pueden especificar varios valores con una coma, por ejemplo:
< tipo de entrada="archivo" aceptar="imagen/*,.rar,aplicación/zip">
Nota: Agregar el atributo novalidate al elemento del formulario o el atributo formnovalidate al botón de envío impide la validación en los elementos del
formulario. Por ejemplo:
<formulario>
< tipo de entrada="texto" nombre="nombre" requerido> <

tipo de entrada="correo electrónico" nombre="correo electrónico"
requerido> < patrón de entrada="\d*" nombre="número" requerido>
<input type="submit" value="Publish">  <input type="submit"
value="Save" formnovalidate>  </formulario>
El formulario tiene campos que son necesarios para "publicar" el borrador pero no son necesarios para "guardar" el borrador.
Sección 17.4: Color

Versión ÿ 5
< tipo de entrada="color" nombre="color favorito" valor="#ff0000">
En los navegadores compatibles, el elemento de entrada con un atributo de tipo cuyo valor es color crea un control similar a un botón, con un color igual
al valor del atributo de color (el valor predeterminado es negro si no se especifica el valor o es un formato hexadecimal no válido).

Al hacer clic en este botón, se abre el widget de color del sistema operativo, que permite al usuario seleccionar un color.
El respaldo para los navegadores que no admiten este tipo de entrada es un tipo de entrada normal = texto.
Sección 17.5: Contraseña
< tipo de entrada="contraseña" nombre="contraseña">
El elemento de entrada con un atributo de tipo cuyo valor es contraseña crea un campo de texto de una sola línea similar al tipo de entrada = texto, excepto que el
texto no se muestra cuando el usuario lo ingresa.
< tipo de entrada="contraseña" nombre="contraseña" marcador de posición="Contraseña">
El texto del marcador de posición se muestra en texto sin formato y se sobrescribe automáticamente cuando un usuario comienza a escribir.
Nota: Algunos navegadores y sistemas modifican el comportamiento predeterminado del campo de contraseña para mostrar también el último carácter escrito
durante un breve período, así:
Sección 17.6: Archivo
< tipo de entrada="archivo" nombre="archivoSubmisión">
Las entradas de archivos permiten a los usuarios seleccionar un archivo de su sistema de archivos local para usarlo con la página actual. Si se usan junto con un
elemento de formulario , se pueden usar para permitir que los usuarios carguen archivos en un servidor (para obtener más información, consulte Carga de archivos).
El siguiente ejemplo permite a los usuarios usar la entrada del archivo para seleccionar un archivo de su sistema de archivos y cargar ese archivo en un script en el
servidor llamado upload_file.php.
<form action="upload_file.php" method="post" enctype="multipart/form-data">

Seleccione el archivo para
cargar: <input type="file" name="fileSubmission" id="fileSubmission"> <input type="submit"
value="Subir su archivo" name="submit">
</formulario>

Múltiples archivos
Agregando el atributo múltiple el usuario podrá seleccionar más de un archivo:
<input type="file" name="fileSubmission" id="fileSubmission" multiple>
Aceptar archivos
El atributo Aceptar especifica los tipos de archivos que el usuario puede seleccionar. Por ejemplo , .png, .gif, .jpeg.
<input type="file" name="fileSubmission" accept="imagen/x-png,imagen/gif,imagen/jpeg" />
Sección 17.7: Botón

< tipo de entrada="botón" valor="Texto del botón">
Los botones se pueden usar para desencadenar acciones en la página, sin enviar el formulario. También puede usar el
elemento <button> si necesita un botón que pueda diseñarse más fácilmente o que contenga otros elementos:
<button type="button"> Texto del botón</button>
Los botones se utilizan normalmente con un evento "onclick":
<input type="button" onclick="alert('¡hola mundo!')" value="Haz clic en mí">
<button type="button" onclick="alert('¡hola mundo!')">Haz clic en mí</button>
Atributos
[nombre]
El nombre del botón, que se envía con los datos del formulario.
[escribe]
El tipo del botón.
Los valores posibles son:
enviar : el botón envía los datos del formulario al servidor. Este es el valor predeterminado si no se especifica el atributo o si el atributo
se cambia dinámicamente a un valor vacío o no válido.
reset : El botón resetea todos los controles a sus valores iniciales.
button : el botón no tiene un comportamiento predeterminado. Puede tener scripts del lado del cliente asociados con los eventos del
elemento, que se activan cuando ocurren los eventos.
menu : El botón abre un menú emergente definido a través de su elemento designado.
[valor]
El valor inicial del botón.
Versión ÿ 5

Atributos adicionales para los botones Enviar

Atributo Descripción
formulario
Especifica el ID del formulario al que pertenece el botón.
Si no se especifica ninguno, pertenecerá a su elemento de formulario antepasado (si existe).
formacion Especifica dónde enviar los datos del formulario

cuando se envía el formulario con este botón.
Especifica cómo se deben codificar los datos del formulario al

tipo de formulario enviarlos al servidor mediante este botón.
Solo se puede usar con formmethod="post".
formamétodo Especifica el método HTTP a usar (POST o GET) al enviar datos

de formulario usando este botón.
formnovalidate Especifica que los datos del formulario no deben validarse en el envío.
Especifica dónde mostrar la respuesta que se recibe después de enviar el

objetivo de formulario
formulario con este botón.
Sección 17.8: Enviar
< tipo de entrada="enviar" valor="Enviar">
Una entrada de envío crea un botón que envía el formulario en el que se encuentra cuando se hace clic.
También puede usar el elemento <button> si necesita un botón de envío que se pueda diseñar más fácilmente o que contenga otros elementos:
<button type="enviar"> <img

src="enviar-icono.jpg" /> Enviar </botón>
Sección 17.9: Restablecer
< tipo de entrada="reiniciar" valor="Reiniciar">
Una entrada de tipo restablecer crea un botón que, cuando se hace clic, restablece todas las entradas en el formulario en el que están contenidas a su
estado predeterminado.
El texto en un campo de entrada se restablecerá a un espacio en blanco o a su valor predeterminado (especificado mediante el atributo de valor ).
Cualquier opción en un menú de selección será deseleccionada a menos que tenga el atributo seleccionado .
Todas las casillas de verificación y casillas de radio quedarán deseleccionadas a menos que tengan el atributo marcado .
Nota: un botón de reinicio debe estar dentro o adjunto (a través del atributo de formulario ) a un elemento <form> para que tenga algún efecto. El botón
solo restablecerá los elementos dentro de este formulario.
Sección 17.10: Oculto
< tipo de entrada="oculto" nombre="nombreEntrada" valor="valorEntrada">
Una entrada oculta no será visible para el usuario, pero su valor se enviará al servidor cuando se envíe el formulario.
sin embargo.
Sección 17.11: Teléfono
< tipo de entrada="tel" valor="+8400000000">

El elemento de entrada con un atributo de tipo cuyo valor es tel representa un control de edición de texto sin formato de una línea para ingresar
un número de teléfono.
Sección 17.12: Correo electrónico
Versión ÿ 5
El <input type="email"> se usa para campos de entrada que deben contener una dirección de correo electrónico.
<formulario>
<etiqueta>Correo electrónico: <etiqueta> <
tipo de entrada="correo electrónico" nombre="correo electrónico">

</formulario>
La dirección de correo electrónico se puede validar automáticamente cuando se envía según el soporte del navegador.
Sección 17.13: Número

Versión ÿ 5
< tipo de entrada="número" valor="0" nombre="cantidad">
El elemento de entrada con un atributo de tipo cuyo valor es número representa un control preciso para establecer el valor del elemento en una
cadena que representa un número.
Tenga en cuenta que este campo no garantiza tener un número correcto. Simplemente permite todos los símbolos que podrían usarse en cualquier
número real, por ejemplo, el usuario podrá ingresar un valor como e1e-,0.
Sección 17.14: Rango

Versión ÿ 5
< tipo de entrada="rango" min="" max="" paso="" />
Un control para ingresar un número cuyo valor exacto no es importante.
Atributo Descripción Valor por defecto

min Valor mínimo para rango Valor 0
máximo máximo para rango Cantidad a 100
paso aumentar en cada incremento. 1
Sección 17.15: Búsqueda

Versión ÿ 5
La búsqueda de tipo de entrada se utiliza para la búsqueda textual. Agregará un símbolo de lupa junto al espacio para texto en la mayoría de los navegadores
< tipo de entrada="búsqueda" nombre="búsqueda de Google">
Sección 17.16: Imagen

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>
Una imagen. Debe usar el atributo src para definir la fuente de la imagen y el atributo alt para definir

Texto alternativo. Puede utilizar los atributos de alto y ancho para definir el tamaño de la imagen en píxeles.
Sección 17.17: Semana

Versión ÿ 5
< tipo de entrada="semana" />
Dependiendo de la compatibilidad del navegador, se mostrará un control para ingresar un número de semana-año y un número de semana sin
zona horaria.
Sección 17.18: URL

Versión ÿ 5
<input type="url" name="Página de inicio">
Esto se usa para campos de entrada que deben contener una dirección URL.
Dependiendo de la compatibilidad del navegador, el campo de URL se puede validar automáticamente cuando se envía.
Algunos teléfonos inteligentes reconocen el tipo de URL y agregan ".com" al teclado para que coincida con la entrada de URL.
Sección 17.19: DateTime-Local

Versión ÿ 5
<input type="datetime-local" />
Dependiendo de la compatibilidad del navegador, aparecerá un selector de fecha y hora en la pantalla para que elija una fecha y hora.
Sección 17.20: Mes

Versión ÿ 5
< tipo de entrada="mes" />
Dependiendo de la compatibilidad del navegador, se mostrará un control para elegir el mes.
Sección 17.21: Tiempo

Versión ÿ 5
< tipo de entrada="hora" />
La entrada de tiempo marca este elemento como si aceptara una cadena que representa un tiempo. El formato se define en RFC 3339 y debe ser un
tiempo parcial como
19:04:39
08:20:39.04
Actualmente, todas las versiones de Edge, Chrome, Opera y Chrome para Android admiten type="time". Las versiones más nuevas de Android
Browser, específicamente 4.4 y superiores, lo admiten. Safari para iOS ofrece soporte parcial, no admite atributos min, max y step.

Sección 17.22: DateTime (Global)

El elemento de entrada con un atributo de tipo cuyo valor es "datetime" representa un control para establecer el valor del elemento en una cadena que representa una
fecha y hora globales (con información de zona horaria).
<conjunto de campos>
<p><etiqueta> Hora de la reunión: <input type=datetime name="meeting.start"></label> </

fieldset>
Atributos permitidos:
atributos globales
nombre
discapacitado
formulario
escribir
autocompletar
enfoque automático
lista
mínimo máximo
paso (flotante)
solo lectura
valor requerido
Sección 17.23: Fecha

Versión ÿ 5
< tipo de entrada="fecha" />
Aparecerá un selector de fecha en la pantalla para que elija una fecha. Esto no es compatible con Firefox o Internet Explorer.

Capítulo 18: Formularios

accept-charset Especifica las codificaciones de caracteres que se utilizarán para el envío del formulario.
acción Especifica dónde enviar los datos del formulario cuando se envía un formulario.
autocompletar Especifica si un formulario debe tener activado o desactivado el autocompletado.
Especifica cómo se deben codificar los datos del formulario al enviarlos al servidor (solo para
enctype
método = "publicación").
método Especifica el método HTTP que se utilizará al enviar datos de formulario (POST o GET).
nombre Especifica el nombre de un formulario.
novalidar Especifica que el formulario no debe validarse cuando se envía.
objetivo Especifica dónde mostrar la respuesta que se recibe después de enviar el formulario.
Para agrupar elementos de entrada y enviar datos, HTML utiliza un elemento de formulario para encapsular la entrada y el envío.
elementos. Estos formularios manejan el envío de datos en el método especificado a una página manejada por un servidor o controlador.
Este tema explica y demuestra el uso de formularios HTML para recopilar y enviar datos de entrada.
Sección 18.1: Envío

El atributo de acción
El atributo de acción define la acción que se realizará cuando se envíe el formulario, lo que generalmente conduce a un script
que recopila la información enviada y trabaja con ella. si lo dejas en blanco, lo enviará al mismo archivo
<formulario acción="acción.php">
El atributo del método
El atributo de método se utiliza para definir el método HTTP del formulario, que es GET o POST.
<formulario acción="acción.php" método="obtener">

<formulario acción="acción.php" método="publicación">
El método GET se usa principalmente para obtener datos, por ejemplo, para recibir una publicación por su ID o nombre, o para enviar una búsqueda.
consulta. El método GET agregará los datos del formulario a la URL especificada en el atributo de acción.
www.example.com/action.php?firstname=Mickey&lastname=Mouse
El método POST se usa cuando se envían datos a un script. El método POST no agrega los datos del formulario a
la URL de la acción, pero se envía utilizando el cuerpo de la solicitud.
Para enviar correctamente los datos del formulario, se debe especificar un nombre de atributo de nombre.
Como ejemplo, enviemos el valor del campo y establezcamos su nombre en apellido:
< tipo de entrada="texto" nombre="apellido" valor="Ratón">
Más atributos
<forma acción="acción.php" método="publicación" destino="_blank" accept-charset="UTF-8"

enctype="aplicación/x-www-form-urlencoded" autocomplete="off" novalidate>


</formulario>
Sección 18.2: Atributo de destino en la etiqueta de formulario
El atributo de destino especifica un nombre o una palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el
formulario.
El atributo de destino define un nombre o una palabra clave para un contexto de navegación (p. ej., pestaña, ventana o marco en línea).
De la etiqueta con un atributo de destino:
<formulario objetivo="_blank">
Valores de atributos
Valor Descripción
_vacío La respuesta se muestra en una nueva ventana o pestaña _self
La respuesta se muestra en el mismo marco (esto es predeterminado) _parent
La respuesta se muestra en el marco principal
_top La respuesta se muestra en el cuerpo completo de la ventana.
framename La respuesta se muestra en un iframe con nombre
Nota: el atributo de destino quedó obsoleto en HTML 4.01. El atributo de destino es compatible con HTML5.
Los marcos y los conjuntos de marcos no son compatibles con HTML5, por lo que los valores _parent, _top y framename ahora se
usan principalmente con iframes.
Sección 18.3: Carga de archivos
Las imágenes y los archivos se pueden cargar/enviar al servidor configurando el atributo enctype de la etiqueta del formulario en datos de varias
partes/formularios . enctype especifica cómo se codificarían los datos del formulario al enviarlos al servidor.
Ejemplo
<form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" name="pic" /

> <input type="submit" value="Upload" /> </formulario>
Sección 18.4: Agrupación de algunos campos de entrada
Al diseñar un formulario, es posible que desee agrupar algunos campos de entrada en un grupo para ayudar a organizar el diseño del formulario.
Esto se puede hacer usando la etiqueta . Aquí hay un ejemplo para usarlo.
Para cada conjunto de campos, puede establecer una leyenda para el conjunto utilizando la etiqueta TEXTO DE LEYENDA
Ejemplo
<formulario>
<legend>1er conjunto de campos :</legend>

Campo uno:<br>
< tipo de entrada="texto"><br>

Campo dos:<br>
< tipo de entrada="texto"><br> </
conjunto de campos><br> <conjunto de
campos>
<legend>Segundo conjunto de campos :</legend>

Campo tres:<br> <input
type="text"><br>
Campo cuatro:<br>
<input type="text"><br> </
fieldset><br> <input type="submit"
value="Submit"> </form>
Resultado
Compatibilidad con navegador
Las últimas versiones de Chrome, IE, Edge, FireFox, Safari y Opera también admiten la etiqueta

Capítulo 19: Elemento Div

El elemento div en HTML es un elemento contenedor que encapsula otros elementos y puede usarse para agrupar y separar partes de una
página web. Un div por sí mismo no representa inherentemente nada, pero es una herramienta poderosa en el diseño web. Este tema cubre el
propósito y las aplicaciones del elemento div.
Sección 19.1: Uso básico

El elemento <div> por lo general no tiene un significado semántico específico por sí mismo, simplemente representa una división y normalmente se
usa para agrupar y encapsular otros elementos dentro de un documento HTML y separarlos de otros grupos de contenido. Como tal, cada <div> se
describe mejor por su contenido.
<div>
<p>¡Hola! Esto es un párrafo.</p> </div>
El elemento div suele ser un elemento de nivel de bloque, lo que significa que separa un bloque de un documento HTML y ocupa el ancho
máximo de la página. Los navegadores suelen tener la siguiente regla CSS predeterminada:
div
{ pantalla: bloque;
}
El Consorcio de la World Wide Web (W3C) recomienda encarecidamente ver el elemento div como un elemento de último recurso,
para cuando ningún otro elemento sea adecuado. El uso de elementos más apropiados en lugar del elemento div conduce a una
mejor accesibilidad para los lectores y una capacidad de mantenimiento más sencilla para los autores.
Por ejemplo, una publicación de blog se marcaría con <artículo>, un capítulo con <sección>, las ayudas de navegación de una página con <nav>
y un grupo de controles de formulario con <fieldset>.
Los elementos div pueden ser útiles con fines estilísticos o para envolver varios párrafos dentro de una sección que deben anotarse de manera
similar.
Sección 19.2: Anidamiento

Es una práctica común colocar varios <div> dentro de otro <div>. Esto generalmente se conoce como elementos "anidados" y permite
dividir aún más los elementos en subsecciones o ayudar a los desarrolladores con el estilo CSS.
El <div class="outer-div"> se usa para agrupar dos elementos <div class="inner-div"> ; cada uno contiene un elemento <p> .
<div class="exterior-div">
<div class="inner-div">
<p>Esto es un párrafo</p> </div>
<div class="inner-div">
<p>Este es otro párrafo</p> </div>
</div>
Esto producirá el siguiente resultado (estilos CSS aplicados para mayor claridad):

Anidación de elementos en línea y en bloque Al anidar elementos, debe tener en cuenta que existen elementos en línea y en bloque. mientras que los
elementos de bloque "agregan un salto de línea en el fondo", lo que significa que otros elementos anidados se muestran automáticamente en la siguiente línea, los
elementos en línea se pueden colocar uno al lado del otro de forma predeterminada
Evite el anidamiento profundo de <div>
Un diseño de contenedor anidado profundo y de uso frecuente muestra un mal estilo de codificación.
Las esquinas redondeadas o algunas funciones similares a menudo crean dicho código HTML. Para la mayoría de los navegadores de última generación
existen equivalentes CSS3. Intente usar la menor cantidad posible de elementos HTML para aumentar la proporción de contenido a etiqueta y reducir la carga de la
página, lo que resultará en una mejor clasificación en los motores de búsqueda.
La sección div El elemento no debe anidarse a más de 6 capas.

Capítulo 20: Elementos de sección

Sección 20.1: Elemento de navegación
El elemento <nav> está diseñado principalmente para usarse en secciones que contienen bloques de navegación principales para el sitio web, esto puede
incluir enlaces a otras partes de la página web (por ejemplo, anclas para una tabla de contenido) u otras páginas por completo.
artículos en línea
Lo siguiente mostrará un conjunto de hipervínculos en línea.
<navegación>
<a href="https://google.com">Google</a> <a href="https://

www.yahoo.com">Yahoo!</a> <a href="https://
www.bing.com">Bing</a> </nav>
Use los elementos de la lista cuando sea necesario
Si el contenido representa una lista de elementos, use un elemento de lista para mostrar esto y mejorar la experiencia del usuario.
Tenga en cuenta el rol = "navegación", más sobre esto a continuación.
<nav role="navegación"> <ul>

<li><a href="https://
google.com">Google</a></li> <li><a href="https://www .yahoo.com">Yahoo!
</a></li> <li><a href="https://www.bing.com">Bing</a></li> </ul> </
navegación>
Evite el uso innecesario
Los elementos <footer> pueden tener una lista de enlaces a otras partes del sitio (FAQ, T&C, etc.). El elemento de pie de página solo es suficiente en este caso,
no necesita envolver más sus enlaces con un elemento <nav> en el <footer>.
 <footer>
<navegación>
<a href="#">...</a> </nav>

</pie de página>
 <footer> <a

href="#">...</a> </footer>
Notas:
<principal> los descendientes de elementos no están permitidos dentro de un <nav>
Adición de un rol ARIA role ="navigation" Se recomienda usar el elemento <nav> para ayudar a los agentes de usuario que no son compatibles
con HTML5 y también para proporcionar más contexto a los que sí lo son.

<nav role="navegación"></nav>
Lectores de pantalla: (software que permite a los usuarios ciegos o con problemas de visión navegar por el sitio)
Los agentes de usuario, como los lectores de pantalla, interpretarán el elemento <nav> de manera diferente según sus
requisitos.
Podría dar al elemento <nav> una mayor prioridad al representar la página. Podría retrasar la
representación del elemento. Podría adaptar la página de una manera específica para adaptarla
a las necesidades del usuario. Ejemplo: crear enlaces de texto dentro de los elementos <nav>.
más grande para alguien con discapacidad visual.
Haga clic aquí para leer la especificación HTML5 oficial para el <navegación> elemento
Sección 20.2: Artículo Elemento

El elemento <article> contiene contenido independiente como artículos, publicaciones de blog, comentarios de usuarios o un widget interactivo
que podría distribuirse fuera del contexto de la página, por ejemplo, mediante RSS.
Cuando los elementos del artículo están anidados, el contenido del nodo del artículo interno debe estar relacionado con el artículo externo.
elemento.
Un blog (sección) con varias publicaciones (artículo) y comentarios (artículo) podría verse así.
<sección>
 <artículo>
<encabezado>
<h1>Entrada de blog </h1>

<time datetime="2016-03-13">13 de marzo de 2016</time> </header>
<p>El elemento artículo representa un artículo o documento independiente.</p> <p>El elemento sección representa
una agrupación de contenido.</p>
<section>
<h2>Comentarios <small>relacionados con "Entrada de blog "</small></h2>
 <article id="user-

comment-1">
<p>¡Excelente!</p>
<footer><p>...</p><time>...</time></footer> </article>
</sección>
</artículo>

</sección>
 <footer> <p>Este
contenido no debe estar relacionado con el blog.</p> </footer>
Evite el uso innecesario

Cuando el contenido principal de la página (excluyendo encabezados, pies de página, barras de navegación, etc.) es simplemente un
grupo de elementos. Puede omitir el <artículo> en favor del elemento <principal> .
<artículo>
<p>Esto no tiene sentido, este artículo no tiene un `contexto` real.</p>
</artículo>
En su lugar, reemplace el artículo con un <principal> para indicar que este es el contenido principal de esta página.
<principal>
<p>Soy el contenido principal, no necesito pertenecer a un artículo.</p>

</principal>
Si usa otro elemento, asegúrese de especificar el <main> Rol ARIA para una correcta interpretación y representación en múltiples dispositivos y
navegadores que no sean HTML5.
<sección rol="principal">
<p>Esta sección es el contenido principal de esta página.</p>
</sección>
Notas:
<principal> los descendientes de elementos no están permitidos dentro de un <artículo>
Haga clic aquí para leer la especificación HTML5 oficial para el <artículo> elemento
Sección 20.3: Elemento Principal
El elemento <main> contiene el contenido principal de su página web. Este contenido es exclusivo de la página individual y no debe aparecer
en ninguna otra parte del sitio. El contenido repetido, como encabezados, pies de página, navegación, logotipos, etc., se coloca fuera del
elemento.
El elemento <main> solo debe usarse como máximo una vez en una sola página.
El elemento <main> no debe incluirse como descendiente de un artículo, aparte, pie de página, encabezado o elemento de navegación .
En el siguiente ejemplo, mostramos una sola publicación de blog (e información relacionada, como referencias y comentarios).
<cuerpo>
<encabezado>
<nav>...</nav> </
header>
<principal>
<h1>Publicación de blog individual </h1>

<p>Una introducción para la publicación.</p>
<artículo>
<h2>Referencias</h2>
<p>...</p>
</artículo>
<artículo>

<h2>Comentarios</h2> ...
</artículo> </
principal>
<pie de página>...</pie de página>

</cuerpo>
La publicación del blog se encuentra dentro del elemento <main> para indicar que este es el contenido principal de esta página (y, por lo
tanto, único en todo el sitio web).
Las etiquetas <header> y <footer> son hermanas del elemento <main> .
Notas:
La especificación HTML5 reconoce el elemento <main> como un elemento de agrupación y no como un elemento de sección .
Atributos del rol de ARIA: principal (predeterminado), presentación
Adición de un rol ARIA role ="main" Se recomienda atribuir a otros elementos destinados a ser utilizados como contenido principal
para ayudar a los agentes de usuario que no son compatibles con HTML5 y también para proporcionar más contexto a aquellos que sí lo son.
El elemento <main> de forma predeterminada tiene la función principal, por lo que no es necesario proporcionarlo.
Haga clic aquí para leer la especificación HTML5 oficial para el <principal> elemento
Sección 20.4: Elemento de encabezado

El elemento <header> representa contenido introductorio para su ancestro más cercano que secciona el contenido o secciona el elemento raíz. Un
<header> normalmente contiene un grupo de ayudas introductorias o de navegación.
Nota: el elemento del encabezado no divide el contenido; no introduce una nueva sección.
Ejemplos:
<header>
<p>Bienvenido a...</p>
<h1>¡Guerras del Vacío!</h1>
</header>
En este ejemplo, el <artículo> tiene un <encabezado>.
<artículo>
<encabezado>
<h1>Flexbox: la guía definitiva</h1> </header> <p>Se

suponía que la guía sobre Flexbox estaría aquí, pero resultó
que Wes tampoco era un experto en Flexbox.</p> </article>
Recomendación propuesta por el W3C

Sección 20.5: Elemento de pie de página

El elemento <footer> contiene la parte de pie de página de la página.
Aquí hay un ejemplo para el elemento <footer> que contiene una etiqueta de párrafo p .
<pie de página>
<p>Todos los derechos reservados</

p> </footer>
Sección 20.6: Elemento de sección
El elemento <section> representa una sección genérica para agrupar temáticamente el contenido. Cada sección, por lo general, debe
poder identificarse con un elemento de encabezado como elemento secundario de la sección.
Puede usar el elemento <section> dentro de un <article> y viceversa.
Cada sección debe tener un tema (un elemento de encabezado que identifique esta región)
No utilice el elemento <section> como un "contenedor" de estilo general.
Si necesita un contenedor para aplicar estilo, use un <div> en su lugar.
En el siguiente ejemplo, mostramos una sola publicación de blog con varios capítulos, cada capítulo es una sección (un conjunto de
contenido agrupado por temas, que se puede identificar por los elementos de encabezado en cada sección).
<artículo>
<header>
<h2>Entrada de blog </
h2> </header> <p>Una
introducción para la entrada.</p> <section>
<h3>Capítulo 1</h3> <p>...</p >
</sección>
<sección>
<h3>Capítulo 2</h3>
<p>...</p>
</sección>
<sección>
<h3>Comentarios</h3> ...
</sección>
</artículo>
Notas:
Los desarrolladores deben usar el elemento del artículo cuando tenga sentido distribuir el contenido del elemento.
Haga clic aquí para leer la especificación HTML5 oficial para el <principal> elemento

Capítulo 21: Barras de navegación

Sección 21.1: Barra de navegación básica
Las barras de navegación son esencialmente una lista de enlaces, por lo que los elementos ul y li se utilizan para encerrar los enlaces de navegación.
<ul>
<li><a href="#">Inicio</a></li> <li><a
href="#">Acerca de</a></li> <li><a
href= "#">Contacto</a></li> </ul>
Sección 21.2: Barra de navegación HTML5

Para hacer una barra de navegación usando el elemento de navegación de HTML5, encierre los enlaces dentro de la etiqueta de navegación.
<navegación>
<a href="#">Inicio</a>
<a href="#">Acerca de</
a> <a href="#">Contacto</a>
</nav>

Capítulo 22: Elemento de etiqueta

Atributos para Descripción
Referencia al elemento ID de destino. Es decir: para = "apellido"
HTML5, [Obsoleto] Referencia al formulario que contiene el elemento de destino. Los elementos de etiqueta se esperan dentro de un elemento
formulario <form> . Si se proporciona form="someFormId" , esto le permite colocar la etiqueta en cualquier lugar del documento.
Sección 22.1: Acerca de la etiqueta

El elemento <label> se utiliza para hacer referencia a un elemento de acción de formulario.
En el ámbito de la interfaz de usuario , se utiliza para facilitar el objetivo o la selección de elementos como el tipo de radio o la casilla de verificación.
<etiqueta> como contenedor
Puede encerrar el elemento de acción deseado.
<etiqueta>
<input type="checkbox" name="Cats"> ¡Me gustan los
gatos!
</etiqueta>
(Al hacer clic en el texto, la entrada de destino cambiará su estado/valor)
<etiqueta> como referencia
Al usar el atributo for , no tiene que colocar el elemento de control como descendiente de la etiqueta , pero el valor for debe coincidir con su ID
<input id="gatos" type="checkbox" name="Gatos"> <label for="gatos"

>¡Me gustan los gatos!</label>
Nota
No use más de un elemento de control dentro de un elemento < label>
Sección 22.2: Uso Básico
Formulario simple con etiquetas...
<formular acción="/iniciar sesión" método="POST">
<label for="nombre de usuario">Nombre de usuario:</label>

<input id="nombre de usuario" type="text" name="nombre de usuario" />
<label for="pass">Contraseña:</label> <input id="pass"

type="password" name="pass" />
< tipo de entrada="enviar" nombre="enviar" />
</formulario>
Versión ÿ 5
<form id="my-form" action="/login" method="POST">
<input id="nombre de usuario" tipo="texto" nombre="nombre de usuario" />
GoalKicker.com – Notas HTML5 para profesionales sesenta y cinco

<label for="pass">Contraseña:</label> <input

id="pass" type="password" name="pass" />
< tipo de entrada="enviar" nombre="enviar" />
</formulario>
<label for="nombre de usuario" form="mi-formulario">Nombre de usuario:</label>

Capítulo 23: Elemento de salida

Global Atributos que están disponibles para cualquier elemento HTML5. Para obtener una documentación completa de estos
atributos, consulte: Atributos globales de MDN
nombre Una cadena que representa el nombre de una salida. Como elemento de formulario, se puede hacer referencia a la salida por su
nombre usando la propiedad document.forms . Este atributo también se utiliza para recopilar valores en el envío de un formulario.
por Una lista separada por espacios de identificadores de elementos de formulario (p. ej., <inputs id="inp1"> para el valor es "inp1")
para los que la salida debe mostrar cálculos.
Una cadena que representa el <formulario> asociado a la salida. Si la salida está realmente fuera del <formulario>, este atributo
formulario
garantizará que la salida aún pertenezca al <formulario> y esté sujeta a recopilaciones y envíos de dicho <formulario>.
Sección 23.1: Elemento de salida usando los atributos For y Form

La siguiente demostración presenta el uso de un elemento <output> de los atributos [for] y [form] . Tenga en cuenta que <output> necesita
JavaScript para funcionar. JavaScript en línea se usa comúnmente en formularios como lo demuestra este ejemplo.
Aunque los elementos <input> son type="number", sus valores no son números, son texto. Entonces, si necesita que se calculen los valores ,
debe convertir cada valor en un número usando métodos como: parseInt(), parseFloat(), Number(), etc.
Demo en vivo
 
<form id="form1" name="form1" oninput="out1.value = parseInt(in1.value, 10) + parseInt(in2.value, 10)">
<legend> Ejemplo de salida</legend>
< tipo de entrada="número" id="en1" nombre="en1" valor="0"> <br/>
+
< tipo de entrada="número" id="in2" nombre="in2" valor="0">
</conjunto de campos>
</formulario>
 
<salida nombre="salida1" para= "en1 en2" formulario="formulario1">0</salida>
Sección 23.2: Elemento de salida con atributos

<salida nombre="salida1" formulario="formulario1" para="entrada1 entrada2"></salida>

Capítulo 24: Elementos vacíos

No todas las etiquetas HTML tienen la misma estructura. Si bien la mayoría de los elementos requieren una etiqueta de apertura, una
etiqueta de cierre y contenido, algunos elementos, conocidos como elementos vacíos, solo requieren una etiqueta de apertura, ya que ellos mismos
no contienen ningún elemento. Este tema explica y demuestra el uso adecuado de elementos vacíos en HTML
Sección 24.1: Elementos vacíos

HTML 4.01/XHTML 1.0 Strict incluye los siguientes elementos vacíos:
area - área definida en la que se puede hacer clic en una
imagen base - especifica una URL base a partir de la cual se basan todos los
enlaces br - salto de línea
col - columna en una tabla [obsoleta] hr - regla

horizontal (línea) img - entrada de imagen -
campo donde los usuarios ingresan datos link
- vincula un recurso externo al documento
meta : proporciona información sobre el parámetro del

documento : define los parámetros para los complementos
Los estándares HTML 5 incluyen todas las etiquetas no obsoletas de la lista anterior y
comando : representa un comando que los usuarios pueden invocar [obsoleto]

keygen : facilita la generación de claves públicas para certificados web [obsoleto] fuente :
especifica fuentes de medios para elementos de imagen, audio y video
El siguiente ejemplo no incluye elementos vacíos:
<div>
<a href="http://stackoverflow.com/">
<h3>Haga clic aquí para visitar <i> ¡Desbordamiento de pila!</i></h3>
</a>
<button onclick="alert('¡Hola!');">¡Di hola!</button> <p>Mi idioma favorito es
<b>HTML</b>. Aquí están mis otros:</p> <ol>
<li>CSS</li>
<li>JavaScript</li> <li>PHP</
li> </ol> </div>
Observe cómo cada elemento tiene una etiqueta de apertura, una etiqueta de cierre y texto u otros elementos dentro de las etiquetas de apertura
y cierre. Sin embargo, las etiquetas nulas se muestran en el siguiente ejemplo:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" /> <br>
<hr>
<input type="number" placeholder="Ingrese su número favorito">
Con la excepción de la etiqueta img, todos estos elementos vacíos solo tienen una etiqueta de apertura. La etiqueta img, a diferencia de cualquier otra
etiqueta, tiene un cierre automático / antes del signo mayor que de la etiqueta de apertura. Es una buena práctica tener un espacio antes de la barra
inclinada.

Capítulo 25: Elementos multimedia

Ancho de Detalles
atributo Establece el ancho del elemento en píxeles.
altura Establece
<fuente>
la altura
Define
del elemento
los recursos
en píxeles.
de los archivos
de audio o video
pista Define la pista de texto para los elementos multimedia.
controles Muestra los controles
reproducción automática Iniciar automáticamente la reproducción del
Reproduce los medios en un ciclo repetido

bucle multimedia
silenciado Reproduce los medios sin cartel de sonido
Asigna una imagen para mostrar hasta que se carga un video
Sección 25.1: Audio

HTML5 proporciona un nuevo estándar para incrustar un archivo de audio en una página web.
Puede incrustar un archivo de audio en una página usando el elemento <audio> :
< controles de audio >

<source src="file.mp3" type="audio/mpeg"> Su
navegador no admite el elemento de audio. </audio>
Sección 25.2: Vídeo

También puede incrustar un video en una página web usando el elemento <video> :
<video ancho="500" altura="700" controles>

<source src="video.mp4" type="video/mp4"> Su
navegador no admite la etiqueta de video. </vídeo>
Sección 25.3: Uso de los elementos `<video>` y `<audio>` para

mostrar contenido de audio/video
Use el elemento HTML o <audio> para incrustar contenido de video/audio en un documento. El elemento de video/audio contiene
una o más fuentes de video/audio. Para especificar una fuente, use el atributo src o el elemento <source> ; el navegador elegirá la más adecuada.
Ejemplo de etiqueta de audio:


<video src="videofile.webm" autoplay poster="posterimage.jpg"> Lo sentimos, su
navegador no admite videos incrustados, pero no se preocupe, puede <a href
="videofile.webm">descárgalo </a> y míralo con tu reproductor de video favorito. </
vídeo>


<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> <track kind="subtitles"
src="foo.sv.vtt" srclang="sv" label= "Svenska">

</video>
 <video
width="480" controles poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" > <source src="https:/ /archive.org/download/
WebmVp8Vorbis/webmvp8.webm" type="video/webm"> <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
type="video/mp4"> <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg"> Su navegador no admite
la etiqueta de video HTML5. </vídeo>
Ejemplo de etiqueta de audio:
 <audio

src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" reproducción automática>
Su navegador no admite el elemento <code>audio</code> . </audio>
 <audio

src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English"> <track kind="captions"
src="foo.sv.vtt" srclang="sv" label= "Svenska"> </audio>
Sección 25.4: Encabezado o fondo del video

Agregar un video que se reproducirá automáticamente en un bucle y no tiene controles ni sonido. Perfecto para un encabezado de video o fondo.
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg"> <source src="video.mp4" type="video/
mp4"> <source src=" video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> </video>
Este CSS proporciona una alternativa si el video no se puede cargar. Tenga en cuenta que se recomienda utilizar el primer cuadro del video como póster video.jpg.
#videobg
{ fondo: url(video.jpg) sin repetición; tamaño de fondo:
portada;
}

Capítulo 26: Elemento de progreso

Parámetro Valor
máximo Cuánto trabajo requiere la tarea en total
valor ¿Cuánto del trabajo ya se ha realizado?
position Este atributo devuelve la posición actual de las etiquetas del elemento <progress>
Este atributo devuelve una lista de etiquetas de elementos <progress> (si las hay)
Sección 26.1: Progreso

El elemento <progress> es nuevo en HTML5 y se usa para representar el progreso de una tarea
< valor de progreso="22" max="100"></progreso>
Esto crea una barra llena 22%
Sección 26.2: Cambiar el color de una barra de progreso

Las barras de progreso se pueden diseñar con el selector de progreso [valor] .
Este ejemplo le da a una barra de progreso un ancho de 250px y una altura de 20px
progreso[valor] { ancho:
250px; altura: 20px;
Las barras de progreso pueden ser especialmente difíciles de diseñar.
Chrome/Safari/Ópera
Estos navegadores usan el selector de apariencia -webkit- para diseñar la etiqueta de progreso. Para anular esto, podemos restablecer el
apariencia.
progreso[valor] { -
webkit-apariencia: ninguno;
apariencia: ninguna;
}
Ahora, podemos diseñar el propio contenedor.
progreso[valor]::-webkit-progress-bar {
color de fondo: "verde";
}
Firefox
Firefox diseña la barra de progreso un poco diferente. Tenemos que usar estos estilos.
progreso[valor] { -moz-
apariencia: ninguno;
borde: ninguno; /* Firefox también muestra un borde */

explorador de Internet
Internet Explorer 10+ admite el elemento de progreso . Sin embargo, no admite la propiedad de color de fondo . Deberá usar la
propiedad de color en su lugar.
progreso[valor] { -webkit-
apariencia: ninguno;
-moz-apariencia: ninguno;
borde: ninguno; /* Eliminar borde de Firefox */
ancho: 250px;
altura: 20px;
color: azul;
}
Sección 26.3: HTML alternativo

Para los navegadores que no admiten el elemento de progreso , puede usar esto como una solución alternativa.
<progreso max="100" valor="20"> <div

clase="barra-de-progreso">
<span style="width: 20%;">Progreso: 20% </div>
</progreso>
Los navegadores que admiten la etiqueta de progreso ignorarán el div anidado dentro. Los navegadores heredados que no pueden identificar la
etiqueta de progreso mostrarán el div en su lugar.

Capítulo 27: Controles del menú de selección

Sección 27.1: Seleccionar Menú
El elemento <select> genera un menú desplegable desde el cual el usuario puede elegir una opción.
<seleccione nombre="">
<opción valor="1">Uno</opción> <opción
valor="2">Dos</opción> <opción
valor="3">Tres</opción> <opción
valor="4">Cuatro</ opción> </seleccionar>
Cambiar el tamaño
Puede cambiar el tamaño del menú de selección con el atributo de tamaño . Un tamaño de 0 o 1 muestra el menú de estilo desplegable estándar. Un
tamaño superior a 1 convertirá el menú desplegable en un cuadro que muestra esa misma cantidad de líneas, con una opción por línea y una barra de
desplazamiento para desplazarse por las opciones disponibles.
<seleccione nombre="" tamaño="4"></seleccione>
Menús de selección de opciones múltiples
De forma predeterminada, los usuarios solo pueden seleccionar una única opción. Agregar el atributo múltiple permite a los usuarios seleccionar
varias opciones a la vez y enviar todas las opciones seleccionadas con el formulario. El uso del atributo múltiple convierte automáticamente el menú
desplegable en un cuadro como si tuviera un tamaño definido. El tamaño predeterminado cuando esto ocurre está determinado por el navegador
específico que está utilizando, y no es posible volver a cambiarlo a un menú de estilo desplegable mientras permite selecciones múltiples.
<seleccionar nombre="" múltiple></seleccionar>
Cuando se usa el atributo múltiple , hay una diferencia entre usar 0 y 1 para el tamaño, mientras que no existe diferencia cuando no se usa el atributo. El
uso de 0 hará que el navegador se comporte de la manera predeterminada para la que está programado. El uso de 1 establecerá explícitamente el
tamaño del cuadro resultante en solo una fila de alto.
Sección 27.2: Opciones

Las opciones dentro de un menú de selección son las que el usuario seleccionará. La sintaxis normal para una opción es la siguiente:
<option>Alguna opción</option>
Sin embargo, es importante tener en cuenta que el texto dentro del elemento <option> en sí mismo no siempre se usa, y esencialmente se convierte
en el valor predeterminado para los atributos que no están especificados.
Los atributos que controlan la apariencia real y la función de la opción son el valor y la etiqueta. La etiqueta representa el texto que se mostrará
en el menú desplegable (lo que está viendo y sobre lo que hará clic para seleccionarlo). El valor representa el texto que se enviará junto con el envío del
formulario. Si se omite cualquiera de estos valores, en su lugar se utiliza el texto dentro del elemento como valor. Entonces, el ejemplo que dimos
anteriormente podría "expandirse" a esto:
<option label="Alguna opción" value="Alguna opción">
Tenga en cuenta la omisión del texto interior y la etiqueta final, que no son necesarios para construir realmente una opción dentro del

menú. Si se incluyeran, el texto interior se ignoraría porque ambos atributos ya están especificados y el texto no es necesario. Sin embargo,
probablemente no verás a mucha gente escribiéndolos de esta manera. La forma más común de escribirlo es con un valor que se enviará al servidor,
junto con el texto interno que finalmente se convierte en el atributo de la etiqueta, así:
<option value="option1">Alguna opción</option>
Selección de una opción por defecto
También puede especificar una determinada opción para que se seleccione en el menú de forma predeterminada adjuntando el atributo seleccionado .
De forma predeterminada, si no se especifica ninguna opción como seleccionada en el menú, la primera opción del menú se seleccionará
cuando se represente. Si más de una opción tiene adjunto el atributo seleccionado , entonces la última opción presente en el menú con el atributo
será la seleccionada por defecto.
<option value="option1" seleccionado>Alguna opción</option>
Si está utilizando el atributo en un menú de selección de opciones múltiples, todas las opciones con el atributo se seleccionarán de forma
predeterminada y ninguna se seleccionará si ninguna opción tiene el atributo.
<seleccione varios>
<option value="option1" seleccionado>Alguna opción</option> <option
value="option2" seleccionado>Alguna opción</option> </select>
Sección 27.3: Grupos de opciones

Puede agrupar ordenadamente sus opciones dentro de un menú de selección para proporcionar un diseño más estructurado en una larga lista de
opciones utilizando el elemento <optgroup> .
La sintaxis es muy básica, simplemente usando el elemento con un atributo de etiqueta para identificar el título del grupo y que contiene cero o
más opciones que deberían estar dentro de ese grupo.
<seleccione nombre="">
<option value="leche">Leche</option> <optgroup
label="Frutas"> <option value="banana">Plátanos</
option> <option value="fresa">Fresas</option> </
optgroup > <optgroup label="Verduras" deshabilitado>
<option value="zanahoria">Zanahorias</option> <option

value="calabacín">Calabacín</option> </optgroup> </select>
Al usar grupos de opciones, no es necesario que todas las opciones estén contenidas dentro de un grupo. Además, deshabilitar un grupo de
opciones deshabilitará todas las opciones dentro del grupo, y no es posible volver a habilitar manualmente una sola opción dentro de un grupo
deshabilitado.
Sección 27.4: Lista de datos

La etiqueta <datalist> especifica una lista de opciones predefinidas para un elemento <input> . Proporciona una función de "autocompletar" en
los elementos <input> . Los usuarios verán una lista desplegable de opciones mientras escriben.
< lista de entrada="Idiomas">

< id de lista de datos="Idiomas">

<opción valor="PHP">
<opción valor="Perl">
<opción valor="Python">
<opción valor="Rubí">
<opción valor="C+">
</lista de datos>
Compatibilidad con navegador
Chrome Edge Mozilla Safari Ópera

20,0 10,0 4,0 No compatible 9,0

Capítulo 28: Incrustar

Parámetros Detalles
origen Dirección del recurso
escribe Tipo de recurso incrustado

ancho Dimensión horizontal
altura Dimensión vertical
Sección 28.1: Uso básico

La etiqueta incrustada es nueva en HTML5. Este elemento proporciona un punto de integración para un externo (típicamente no HTML)
aplicación o contenido interactivo.
<embed src="miflash.swf">
Sección 28.2: Definición del tipo MIME

el mimo El tipo debe definirse utilizando el atributo de tipo .
<embed type="video/mp4" src="video.mp4" width="640" height="480">

Capítulo 29: Marcos flotantes

Atributo Detalles
nombre Establece el nombre del elemento, que se usará con una etiqueta para cambiar el src del iframe.
ancho Establece el ancho del elemento en píxeles.
altura Establece la altura del elemento en píxeles.

origen Especifica la página que se mostrará en el marco.
Especifica el contenido que se mostrará en el marco, suponiendo que el navegador lo admita. El contenido debe ser HTML válido.
srcdoc
Cuando se establece, el contenido del iframe se trata como si tuviera un origen único y las funciones, incluidos los scripts,
salvadera los complementos, los formularios y las ventanas emergentes, se desactivarán. Las restricciones se pueden relajar de forma
selectiva agregando una lista de valores separados por espacios. Consulte la tabla en Observaciones para conocer los valores posibles.
allowfullscreen Si permitir que el contenido del iframe use requestFullscreen()
Sección 29.1: Conceptos básicos de un marco en línea
El término "IFrame" significa marco en línea. Se puede utilizar para incluir otra página en su página. Esto producirá un pequeño marco que muestra el
contenido exacto de la base.html.
<iframe src="base.html"></iframe>
Sección 29.2: Sandboxing

Lo siguiente incorpora una página web que no es de confianza con todas las restricciones habilitadas
<iframe sandbox src="http://ejemplo.com/"></iframe>
Para permitir que la página ejecute scripts y envíe formularios, agregue allow-scripts y allow-forms al atributo sandbox.
<iframe sandbox="permitir-scripts permitir-formularios" src="http://example.com/"></iframe>
Si hay contenido que no es de confianza (como comentarios de usuarios) en el mismo dominio que la página web principal, se puede usar un iframe para
deshabilitar los scripts y al mismo tiempo permitir que el documento principal interactúe con su contenido usando JavaScript.
<iframe sandbox="permitir-mismo-origen permitir-navegación superior"

src="http://example.com/no confiable/comentarios/página2">
El documento principal puede agregar detectores de eventos y cambiar el tamaño del IFrame para que se ajuste a su contenido. Esto, junto con permitir la
navegación superior, puede hacer que el iframe de espacio aislado parezca ser parte del documento principal.
Este sandbox no es un reemplazo para desinfectar la entrada, pero puede usarse como parte de una defensa en profundidad estrategia.
También tenga en cuenta que este entorno limitado puede ser subvertido por un atacante que convenza a un usuario para que visite la fuente del iframe
directamente. La política de seguridad del contenido El encabezado HTTP se puede usar para mitigar este ataque.
Sección 29.3: Configuración del tamaño del marco

El IFrame se puede cambiar de tamaño utilizando los atributos de ancho y alto , donde los valores se representan en píxeles (HTML 4.01 permite valores
porcentuales, pero HTML 5 solo permite valores en píxeles CSS).
<iframe src="base.html" ancho="800" altura="600"></iframe>

Sección 29.4: Uso del atributo "srcdoc"

El atributo srcdoc se puede usar (en lugar del atributo src ) para especificar el contenido exacto del iframe como un documento
HTML completo. Esto generará un IFrame con el texto "¡Los IFrames son geniales!"
<iframe srcdoc="<p>¡ Los marcos flotantes son geniales!</p>"></iframe>
Si el navegador no admite el atributo srcdoc , el IFrame volverá a usar el atributo src , pero si los atributos src y srcdoc están
presentes y son compatibles con el navegador, srcdoc tiene prioridad.
<iframe srcdoc="<p>¡Los iframes son geniales!</p>" src="base.html"></iframe>
En el ejemplo anterior, si el navegador no admite el atributo srcdoc , mostrará el contenido de la página base.html .
Sección 29.5: Uso de anclajes con IFrames

Normalmente, un cambio de página web dentro de un Iframe se inicia desde el Iframe, por ejemplo, haciendo clic en un enlace dentro
del Iframe. Sin embargo, es posible cambiar el contenido de un IFrame desde fuera del IFrame. Puede utilizar una etiqueta de anclaje
cuyo atributo href se establezca en la URL deseada y cuyo atributo de destino se establezca en el atributo de nombre del iframe .
<iframe src="webpage.html" name="myIframe"></iframe> <a

href="diferente_webpage.html" target="myIframe">Cambia el contenido del Iframe a different_webpage.html</a>

Capítulo 30: Idiomas del contenido

Sección 30.1: Idioma del documento base
Es una buena práctica declarar el idioma principal del documento en el elemento html :
<html lang="es">
Si no se especifica ningún otro atributo de idioma en el documento, significa que todo (es decir, el contenido del elemento y los valores de
texto de los atributos) está en ese idioma.
Si el documento contiene partes en otros idiomas, estas partes deben obtener sus propios atributos de idioma para "sobrescribir" la
declaración de idioma.
Sección 30.2: Lenguaje de elementos

El atributo lang se utiliza para especificar el idioma del contenido del elemento y los valores de texto del atributo:
<p lang="en">El contenido de este elemento está en inglés.</p>
<p lang="en" title="El valor de este atributo también está en inglés.">El contenido de este elemento está en inglés.</p>
La declaración de idioma se hereda:
<div lang="es">
<p>Este elemento contiene contenido en inglés.</p> <p
title="Este atributo también.">Lo mismo con este elemento.</p> </div>
Sección 30.3: Elementos con Múltiples Idiomas

Puede "sobrescribir" una declaración de idioma:
<p lang="en">Esta oración en inglés contiene la palabra alemana <span lang="de">Hallo.</p>
Sección 30.4: URL regionales

Es posible agregar el atributo hreflang a los elementos <a> y <area> que crean hipervínculos. Tal especifica el idioma del recurso enlazado.
El idioma definido debe ser un BCP válido 47[1] etiqueta de idioma.
<p>
<a href="example.org" hreflang="en">example.org</a> es uno de los dominios de ejemplo de IANA . </p>
1. ÿ Grupo de trabajo de la red IETF: Etiquetas RFC 5646 para identificar idiomas, IETF, septiembre de 2009
Sección 30.5: Manejo de atributos con diferentes idiomas

Puede "sobrescribir" la declaración de idioma de un elemento padre introduciendo cualquier elemento además de applet, base,
basefont, br, frame, frameset, hr, iframe, meta, param, script (de HTML 4.0) con un idioma propio atributo:

<p lang="es" title="Un párrafo en inglés">

<span lang="de" title="Una frase alemana">¡Hola Welt! </p>

Capítulo 31: SVG

SVG significa Gráficos vectoriales escalables. SVG se utiliza para definir gráficos para la Web
El elemento HTML <svg> es un contenedor para gráficos SVG.
SVG tiene varios métodos para dibujar rutas, cuadros, círculos, texto e imágenes gráficas.
Sección 31.1: SVG en línea

SVG se puede escribir directamente en un documento HTML. El SVG en línea se puede diseñar y manipular con CSS y
JavaScript.
<cuerpo> <svg class="atención" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" >
<ruta id="atención"
d="m571,767l0,-106q0,-8,-5,-13t-12,-5l-108,0q-7,0,-12,5t-5,13l0,106q0,8,5,13t12,6l108 ,0q7,0,12,-6t5
,-13Zm-1,-208l10,-257q0,-6,-5,-10q-7,-6,-14,-6l-122,0q-7,0,-14,6q-5,4,- 5,12l9,255q0,5,6,9t13,3l103,
0q8,0,13,-3t6,-9Zm-7,-522l428,786q20,35,-1,70q-10,17,-26,26t-35
,10l-858,0q-18,0,-35,-10t-26,-26q-21 ,-35,-1,-70l429,-786q9,-17,26,-27t36,-10t36,10t27,27Z " />
</svg>
</cuerpo>
El SVG en línea anterior se puede diseñar usando la clase CSS correspondiente:
.atención
{ relleno:
rojo; ancho:
50px; altura: 50px;
}
El resultado se ve así:
Sección 31.2: Incrustación de archivos SVG externos en HTML

Puede usar los elementos <img> o <object> para incrustar elementos SVG externos. Establecer la altura y el ancho es
opcional, pero es muy recomendable.
Usando el elemento de imagen

<img src="atención.svg" ancho="50" altura="50">
Usar <img> no le permite diseñar el SVG usando CSS o manipularlo usando JavaScript.
Usando el elemento de objeto

< tipo de objeto="imagen/svg+xml" datos="atención.svg" ancho="50" altura="50">
A diferencia de <img>, <object> importa directamente el SVG al documento y, por lo tanto, se puede manipular con Javascript
y CSS.

Sección 31.3: Incrustación de SVG usando CSS

Puede agregar archivos SVG externos usando la propiedad de imagen de fondo , tal como lo haría con cualquier otra imagen.
HTML:
<div clase="atención"></div>
CSS:
.atención
{ imagen de fondo: url(atención.svg); tamaño de
fondo: 100% 100%; ancho: 50px; altura: 50px;
También puede incrustar la imagen directamente en un archivo css usando una URL de datos:
imagen de fondo:
url(datos:imagen/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink
%3D%22http%3A%2F %2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201000%201000%22%20%3E%0D%0A%
3Cpath%20id%3D%22atención%22%20d%3D%22m571 %2C767l0%2C-106q0%2C-8%2C-5%2C-13t-12%2C-5l-108%2C0q-7%
2C0%2C-12%2C5t-5%2C13l0%2C106q0%2C8%2C5%2C13t12 %2C6l108%2C0q7%2C0%2C12%2C-6t5%2C-13Zm-1%2C-208l10%
2C-257q0%2C-6%2C-5%2C-10q-7%2C-6%2C-14%2C -6l-122%2C0q-7%2C0%2C-14%2C6q-5%2C4%2C-5%2C12l9%2C255q0%2
C5%2C6%2C9t13%2C3l103%2C0q8%2C0%2C13%2C-3t6%2C-
9Zm-7%2C-522l428%2C786q20%2C35%2C-1%2C70q-10%2C17%2C-26%2C26t-35%2C10l-858%2C0q-18%2C0%2C-35%2C-10t-26
%2C-26q-21%2C-35%2C-1%2C-70l429%2C-786q9%2C-17% 2C26%2C-27t36%2C-10t36%2C10t27%2C27Z%22%20%2F%3E%0D %0A%

Capítulo 32: Lienzo

Altura del Descripción
atributo Especifica la altura del lienzo.
ancho Especifica el ancho del lienzo.
Sección 32.1: Ejemplo básico

El elemento canvas se introdujo en HTML5 para dibujar gráficos.
<lienzo id="miLienzo">
No se puede mostrar el gráfico. Canvas no es compatible con su navegador (IE<9)
</lienzo>
Lo anterior creará un elemento HTML<canvas> transparente de 300×150 px de tamaño.
Puede usar el elemento de lienzo para dibujar cosas asombrosas como formas, gráficos, manipular imágenes, crear juegos
atractivos, etc. con JavaScript.
El Objeto de la superficie de la capa dibujable en 2D del lienzo se denomina CanvasRenderingContext2D; o desde
HTMLCanvasElement usando el método .getContext("2d") :
var ctx = document.getElementById("myCanvas").getContext("2d"); // ahora

podemos referirnos al contexto de la capa 2D del lienzo usando `ctx`
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.ancho, ctx.canvas.altura); // x, y, ancho, alto
ctx.fillStyle = "#000";
ctx.fillText("Mi lienzo rojo con texto negro", 24, 32); // texto, x, y
js Ejemplo de violín
Sección 32.2: Dibujar dos rectángulos en un <lienzo>

<!DOCTYPE html>
<html lang="es">
<título>
<meta charset="utf-8" />
<title>Dibuja dos rectángulos en el lienzo</title> <style>
canvas{ border:1px solid grey;
</style>
<secuencia de comandos asíncrona>
ventana.cargar = init; // llamar a init() una vez que la ventana esté completamente cargada
function init(){ // #1 - obtener la referencia al elemento <canvas> var canvas =
document.querySelector('canvas');
// #2 - obtener la referencia al contexto del dibujo y la API del dibujo var ctx =
canvas.getContext('2d');
// #3 - todas las operaciones de relleno ahora están en

rojo ctx.fillStyle = 'red';

// #4 - llenar un rectángulo de 100x100 en x=0,y=0

ctx.fillRect(0,0,100,100);
// #5 - todas las operaciones de relleno ahora están en verde

ctx.fillStyle = 'green';
// #6 - rellena un rectángulo de 50x50 en x=25,y=25

ctx.fillRect(25,25,50,50);
} </script>
</head>
<body>
<canvas width=300 height=200>Su navegador no es compatible con canvas.</canvas> </body> </html>
Este ejemplo se ve así:

Capítulo 33: Metainformación

Las etiquetas meta en documentos HTML brindan información útil sobre el documento, incluida una descripción, palabras clave, autor, fechas de
modificaciones y alrededor de otros 90 campos. Este tema cubre el uso y el propósito de estas etiquetas.
Sección 33.1: Información de la página

Nombre de la aplicación
Dando el nombre de la aplicación Web que representa la página.
<meta name="nombre-aplicación" content="OpenStreetMap">
Si no es una aplicación web, no se debe usar la metaetiqueta application-name .
autor
Establecer el autor de la página:
<meta name="autor" content="Tu nombre">
Solo se puede dar un nombre.
descripción
Establecer la descripción de la página:
<meta name="description" content=" Descripción de la página">
La metaetiqueta de descripción puede ser utilizada por varios motores de búsqueda al indexar su página web con fines de búsqueda. Por lo
general, la descripción contenida en la metaetiqueta es el breve resumen que aparece debajo del título principal de la página/sitio web en los
resultados del motor de búsqueda. Google generalmente usa solo las primeras 20-25 palabras de su descripción.
generador
<meta name="generador" content=" Generador HTML 1.42">
Identifica uno de los paquetes de software utilizados para generar el documento. Solo para ser utilizado para páginas donde el marcado se
genera automáticamente.
palabras clave
Establecer palabras clave para motores de búsqueda (separadas por comas):
<meta name="palabras clave" content="Palabra clave1, Palabra clave2">
Los motores de búsqueda a veces utilizan la metaetiqueta de palabras clave para conocer la consulta de búsqueda que es relevante para su
página web .
Como regla general, probablemente sea una buena idea no agregar demasiadas palabras, ya que la mayoría de los motores de búsqueda que usan
esta metaetiqueta para indexar solo indexarán las primeras ~20 palabras. Asegúrese de poner primero las palabras clave más importantes.
Sección 33.2: Codificación de caracteres

El atributo charset especifica la codificación de caracteres para el documento HTML y debe ser un carácter válido.

codificación (los ejemplos incluyen windows-1252, ISO-8859-2, Shift_JIS y UTF-8). UTF-8 (Unicode) es el más utilizado
utilizado y debe ser utilizado para cualquier proyecto nuevo.
Versión = 5
<juego de caracteres meta ="UTF-8">
<juego de caracteres meta ="ISO-8859-1">
Todos los navegadores siempre han reconocido el formulario <meta charset> , pero si por alguna razón necesita que su página sea
HTML 4.01 válido, puede usar lo siguiente en su lugar:
<meta http-equiv="tipo-de-contenido" content="text/html; charset=UTF-8">
<meta http-equiv="tipo-de-contenido" content="text/html; charset=ISO-8859-1">
Véase también el Estándar de codificación, para ver todas las etiquetas de codificación de caracteres disponibles que reconocen los navegadores.
Sección 33.3: Robots

El atributo robots , compatible con varios de los principales motores de búsqueda, controla si las arañas de los motores de búsqueda son
permitido indexar una página o no y si deben seguir los enlaces de una página o no.
<meta name="robots" content="noindex">
Este ejemplo indica a todos los motores de búsqueda que no muestren la página en los resultados de búsqueda. Otros valores permitidos son:
Valor/Directiva Sentido
todos Por defecto. Equivalente a índice, siga. Vea la nota abajo.
sin índice No indexe la página en absoluto.
no seguir No sigas los enlaces de esta página.
seguir Se pueden seguir los enlaces de la página. Vea la nota abajo.
ninguna Equivalente a noindex, nofollow.
noarchivar No haga que una versión en caché de esta página esté disponible en los resultados de búsqueda.
nocache Sinónimo de noarchive utilizado por algunos bots como Bing.
tonto No mostrar un fragmento de esta página en los resultados de búsqueda.
No use metadatos de esta página del proyecto Open Directory por títulos o
noodp
fragmentos en los resultados de búsqueda.
no traducir No ofrezca traducciones de esta página en los resultados de búsqueda.
sin índice de imagen No indexar imágenes en esta página.
no disponible_después [RFC-850 No mostrar esta página en los resultados de búsqueda después de la fecha/hora especificada. los
fecha y hora] la fecha/hora debe especificarse en el formato RFC 850.
Nota: Definir explícitamente el índice y/o el seguimiento, mientras que los valores son válidos, no es necesario, ya que casi todos los motores de búsqueda
asumirá que se les permite hacerlo si no se les impide explícitamente hacerlo. Similar a cómo funciona el archivo robots.txt
opera, los motores de búsqueda generalmente solo buscan cosas que no pueden hacer. Sólo enunciando cosas una búsqueda
El motor no puede hacer también evita que se establezcan opuestos accidentalmente (como índice, ..., noíndice) que no todos
los motores de búsqueda tratarán de la misma manera.
Sección 33.4: Redes Sociales

Open Graph es un estándar para metadatos que amplía la información normal contenida en el encabezado de un sitio
margen. Esto permite que sitios web como Facebook muestren información más detallada y rica sobre un sitio web en un
formato estructurado. Esta información se muestra automáticamente cuando los usuarios comparten enlaces a sitios web que contienen

Metadatos de OG en Facebook.
Facebook / Gráfico abierto
<meta property="fb:app_id" content="123456789"> <meta

property="og:url" content="https://example.com/page.html"> <meta property="og:type"
content ="sitio web"> <metapropiedad ="og:título" contenido="Título del contenido">
<metapropiedad ="og:imagen" contenido="https://example.com/image.jpg">
<metapropiedad = "og:description" content="Descripción aquí"> <meta
property="og:site_name" content=" Nombre del sitio"> <meta property="og:locale"
content="en_US"> <meta property="article: author" content="">   <link rel="canonical"

href="http://example.com/article.html">
 <meta

property="fb:article_style" content="myarticlestyle">
Artículos instantáneos de Facebook: creación de artículos

Artículos instantáneos: referencia de formato
Twitter usa su propio marcado para los metadatos. Estos metadatos se utilizan como información para controlar cómo se muestran los tweets
cuando contienen un enlace al sitio.
Gorjeo
<meta name="twitter:card" content="summary"> <meta

name="twitter:site" content="@site_account"> <meta
name="twitter:creator" content="@individual_account"> <meta name ="twitter:url"
content="https://example.com/page.html"> <meta name="twitter:title" content="Título
del contenido"> <meta name="twitter:description" content=" Descripción del contenido
de menos de 200 caracteres"> <meta name="twitter:image" content="https://example.com/image.jpg">
Tarjetas de Twitter: Guía de inicio

Validador de tarjetas de Twitter
Google+ / Schema.org
<link href="https://plus.google.com/+YourPage" rel="publisher"> <meta

itemprop="name" content="Título del contenido"> <meta itemprop="description"
content="Descripción del contenido menos de 200 caracteres"> <meta itemprop="image" content="https://
example.com/image.jpg">
Sección 33.5: Control de diseño móvil

Los sitios optimizados para dispositivos móviles comunes usan la etiqueta <meta name="viewport"> como esta:
<meta name="viewport" content="width=device-width, initial-scale=1">

El elemento de la ventana gráfica le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página según el dispositivo que
esté utilizando.
En el ejemplo anterior, content="width=device-width significa que el navegador mostrará el ancho de la página al ancho de su propia pantalla. Entonces, si
esa pantalla tiene 480 px de ancho, la ventana del navegador tendrá 480 px de ancho. escala inicial =1 representa que el zoom inicial (que es 1 en este caso,
significa que no hace zoom).
A continuación se muestran los atributos que admite esta etiqueta:
Atributo Descripción El
ancho ancho de la ventana virtual del dispositivo.

Valores 1: ancho del dispositivo o el ancho real en píxeles, como 480 La altura de
la ventana virtual del dispositivo.

altura
Valores2: altura del dispositivo o ancho real en píxeles, como 600 escala inicial El
zoom inicial cuando se carga la página. 1.0 no hace zoom. escala mínima La cantidad mínima que el
visitante puede hacer zoom en la página. 1.0 no hace zoom. escala máxima La cantidad máxima que el visitante puede hacer
zoom en la página. 1.0 no hace zoom.
Permite
por el usuario en la página que
web. Elelvalor
dispositivo se acerque
predeterminado es ysí.aleje. Los valores son
La configuración del sí o no. Si se
navegador establece
puede enesta
ignorar no, regla.
el usuario no puede hacer zoom escalable
Notas:
1 La propiedad de ancho se puede especificar en píxeles (ancho = 600) o por ancho de dispositivo (ancho = ancho de dispositivo) que representa el ancho
físico de la pantalla del dispositivo.
2 De manera similar, la propiedad de altura se puede especificar en píxeles (altura = 600) o por altura del
dispositivo (altura = altura del dispositivo), que representa la altura física de la pantalla del dispositivo.
Sección 33.6: Actualización automática

Para actualizar la página cada cinco segundos, agregue este metaelemento en el elemento principal :
<meta http-equiv="actualizar" contenido="5">
¡PRECAUCIÓN! Si bien este es un comando válido, se recomienda que no lo use debido a sus efectos negativos en la experiencia del usuario. Actualizar
la página con demasiada frecuencia puede hacer que deje de responder y, a menudo, se desplace a la parte superior de la página. Si alguna información
en la página necesita actualizarse continuamente, hay formas mucho mejores de hacerlo actualizando solo una parte de la página.
Sección 33.7: Reconocimiento de número de teléfono

Las plataformas móviles como iOS reconocen automáticamente los números de teléfono y los convierten en enlaces de teléfono . Si bien la función es muy
práctica, el sistema a veces detecta códigos ISBN y otros números como números de teléfono.
Para que Safari móvil y algunos otros navegadores móviles basados en WebKit desactiven el formato y el reconocimiento automático de números de teléfono,
necesita esta metaetiqueta:
<meta nombre="formato-detección" contenido="teléfono=no">
Sección 33.8: Redirección automática

A veces, su página web necesita una redirección automática.

Por ejemplo, para redirigir a example.com después de 5 segundos:
<meta http-equiv="refresh" content="5;url=https://www.example.com/" />
Esta línea lo enviará al sitio web designado (en este caso, example.com después de 5 segundos).
Si necesita cambiar el tiempo de retraso antes de una redirección, simplemente cambiando el número justo antes de su ;url= alterará
el tiempo de retraso.
Sección 33.9: Aplicación web
Puede configurar su aplicación web o sitio web para que se agregue un icono de acceso directo a la aplicación en la pantalla de inicio de un dispositivo y hacer que
la aplicación se inicie en el "modo de aplicación" de pantalla completa usando el elemento de menú "Agregar a la pantalla de inicio" de Chrome para Android.
Debajo de las etiquetas meta se abrirá la aplicación web en modo de pantalla completa (sin barra de direcciones).
Android cromo
<meta name="apto para aplicaciones web móviles" content="sí">
iOS
<meta name="apple-mobile-web-app-capable" content="yes">
También puede establecer el color para la barra de estado y la barra de direcciones en la metaetiqueta.
Android cromo
<meta name="tema-color" content="negro">
iOS
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Capítulo 34: Marcado de código de computadora

Sección 34.1: Bloque con <pre> y <code>
Si el formato (espacio en blanco, líneas nuevas, sangría) del código importa, use el elemento pre en combinación con el elemento de
código :
<pre>
<código>
x = 42
si x == 42:
escribe "x es... … 42"
</código>
</pre>
Todavía tiene que escapar caracteres con un significado especial en HTML (como < con <), por lo que para mostrar un bloque de
código HTML (<p>Esto es un párrafo.</p>), podría tener este aspecto:
<pre>
<code>
<p>Esto es un párrafo.</p> </code> </
pre>
Sección 34.2: En línea con <código>
Si una oración contiene código de computadora (por ejemplo, el nombre de un elemento HTML), use el elemento de código para marcarlo
arriba:
<p>El elemento <code>a</code> crea un hipervínculo.</p>

Capítulo 35: Cotizaciones de marcado

Sección 35.1: En línea con <q>
El elemento q se puede usar para una cita que es parte de una oración:
<p>Ella escribió <q>La respuesta es 42.</q> y todos estuvieron de acuerdo.</p>

Comillas Versión ÿ
4.01
No se deben agregar comillas. Los agentes de usuario deberían (en HTML 4.01) resp. debe (en HTML 4.0) representarlos automáticamente.
Versión = 5
No se deben agregar comillas. Los agentes de usuario los renderizarán automáticamente.
URL de origen ( atributo de cita )
El atributo cite se puede utilizar para hacer referencia a la URL de la fuente citada:
<p>Ella escribió <q cite="http://example.com/blog/hello-world">La respuesta es 42.</q> y todos estuvieron de acuerdo.</p>
Tenga en cuenta que los navegadores normalmente no muestran esta URL, por lo que si la fuente es relevante, debe agregar un hipervínculo (un
elemento) además.
Sección 35.2: Bloquear con <blockquote>

El elemento blockquote se puede usar para una cotización (a nivel de bloque):
<blockquote>
<p>La respuesta es 42.</p>
</blockquote>
URL de origen ( atributo de cita )
El atributo cite se puede utilizar para hacer referencia a la URL de la fuente citada:
<blockquote cite="http://example.com/blog/hola-mundo"> <p>La

respuesta es 42.</p> </blockquote>
Tenga en cuenta que los navegadores normalmente no muestran esta URL, por lo que si la fuente es relevante, debe agregar un hipervínculo
(un elemento) además (consulte la sección Cita/ Atribución sobre dónde colocar este enlace).
Cita/Atribución
Versión ÿ 4.01
La cita/atribución no debe ser parte del elemento blockquote :
<blockquote cite="http://example.com/blog/hello-world"> <p>La respuesta

es 42.</p> </blockquote> <p>Fuente: <cite><a href="http ://
example.com/blog/hola-mundo" rel="external">Hola Mundo</a></citar></
p>

Puede agregar un elemento div para agrupar la cita y la cita, pero no existe forma de asociarlos semánticamente.
El elemento de cita se puede utilizar para la referencia de la fuente citada (pero no para el nombre del autor).
Versión = 5
La cita/atribución (p. ej., el hipervínculo que proporciona la URL de origen) puede estar dentro de la cita en bloque, pero en ese caso debe
estar dentro de un elemento de cita (para atribuciones en el texto) o un elemento de pie de página :
<blockquote cite="http://example.com/blog/hello-world"> <p>La

respuesta es 42.</p> <footer> <p>Fuente: <cite><a href="http: //
ejemplo.com/blog/hola-mundo" rel="externo">Hola Mundo</a></
citar></p>
</footer>
</blockquote>
El elemento de cita se puede utilizar para la referencia de la fuente citada o para el nombre del autor de la cita.

Capítulo 36: Tabindex

Valor Sentido
el elemento negativo será enfocable, pero no debería ser accesible a través de la navegación secuencial del teclado
0 el elemento será enfocable y accesible a través de la navegación secuencial del teclado, pero su orden relativo está
definido por la convención de la plataforma; el elemento debe ser enfocable y accesible a través de la navegación
secuencial del teclado; su orden relativo será positivo definido por el valor del atributo: la secuencia sigue el número
creciente del tabindex
Sección 36.1: Agregar un elemento al orden de tabulación

<div tabindex="0">Algún botón</div>
Nota: Trate de usar un botón HTML nativo o una etiqueta cuando corresponda.
Sección 36.2: Eliminar un elemento del orden de tabulación

<button tabindex="-1">No se podrá acceder a este botón mediante tabulador</button>
El elemento se eliminará del orden de tabulación, pero seguirá siendo enfocable.
Sección 36.3: Definir un orden de tabulación

personalizado (no recomendado)
<div tabindex="2">Segundo</div> <div
tabindex="1">Primero</div>
Los valores positivos insertarán el elemento en la posición del orden de tabulación de su valor respectivo. Los elementos sin
preferencia (es decir , tabindex="0" o elementos nativos como botón y a) se agregarán después de aquellos con preferencia.
No se recomiendan valores positivos, ya que interrumpen el comportamiento esperado de las pestañas y pueden confundir a las
personas que confían en los lectores de pantalla. Intente crear un orden natural reorganizando su estructura DOM.

Capítulo 37: Atributos globales

clase Define uno o más nombres de clase para un elemento. Consulte Clases e identificaciones.
contenteditable Establece si el contenido de un elemento se puede editar.

Menú de contexto Define un menú contextual que se muestra cuando un usuario hace clic con el botón derecho en un elemento.
directorio Establece la dirección del texto para el texto dentro de un elemento.
arrastrable Establece si un elemento se puede arrastrar.
oculto Oculta un elemento que no está actualmente en uso en la página.
identificación
Define un identificador único para un elemento. Consulte Clases e identificaciones.
Define el idioma del contenido de un elemento y sus valores de atributo de texto. Ver contenido
idioma
Idiomas.
corrector ortográfico Establece si revisar la ortografía o la gramática del contenido de un elemento.
estilo Define un conjunto de estilos CSS en línea para un elemento.
tabindex Establece el orden en el que se navega por los elementos de una página mediante el método abreviado de teclado de tabulación.
Define información adicional sobre un elemento, generalmente en forma de texto de información sobre herramientas en
título
ratón sobre.
traducir Define si traducir el contenido de un elemento.
Sección 37.1: Atributo Editable

<p contenteditable>Este es un párrafo editable.</p>
Al hacer clic en el párrafo, el contenido del mismo se puede editar de forma similar a un campo de texto de entrada.
Cuando el atributo contenteditable no está establecido en un elemento, el elemento lo heredará de su padre. Entonces todo niño
el texto de un elemento editable de contenido también será editable, pero puede desactivarlo para un texto específico, así:
<p contentable>
Este es un párrafo editable.
<span contenteditable="false">Pero no esto.
</p>
Tenga en cuenta que un elemento de texto no editable dentro de un elemento editable seguirá teniendo un cursor de texto heredado de su
padre también.

Capítulo 38: Caché de HTML 5

Sección 38.1: Ejemplo básico de caché HTML5
este es nuestro archivo index.html
<!DOCTYPE html>
<html manifest="index.appcache"> <body>
<p>Contenido</p> </body> </html>
luego crearemos el archivo index.appcache con los siguientes códigos
MANIFIESTO DE
CACHE index.html
escriba los archivos que desea que se almacenen en caché, cargue index.html, luego vaya al modo fuera de línea y vuelva a cargar la pestaña
Nota: Los dos archivos deben estar en la misma carpeta en este ejemplo

Capítulo 39: Atributos de eventos HTML

Sección 39.1: Eventos de formulario HTML
Eventos desencadenados por acciones dentro de un formulario HTML (se aplica a casi todos los elementos HTML, pero se usa más en formularios
elementos):
Atributo en Descripción
desenfoque Se dispara en el momento en que el elemento pierde el foco.
en el cambio Dispara el momento en que se cambia el valor del elemento.
oncontextmenu Script que se ejecutará cuando se active un menú contextual
enfocado Dispara el momento en que el elemento recibe el foco.
en la entrada Script que se ejecutará cuando un elemento reciba la entrada del usuario
oninvalid Script que se ejecutará cuando un elemento no sea válido
reinicio Se dispara cuando se hace clic en el botón Restablecer en un formulario
en búsqueda Se activa cuando el usuario escribe algo en un campo de búsqueda (para <input="search">)
en seleccionar Se dispara después de que se haya seleccionado algún texto en un elemento
onsubmit Se dispara cuando se envía un formulario
Sección 39.2: Eventos de teclado

onkeydown Se dispara cuando un usuario está presionando una tecla
onkeypress Se dispara cuando un usuario presiona una tecla
onkeyup Se activa cuando un usuario suelta una tecla

Capítulo 40: Entidades de personajes

Sección 40.1: Entidades de caracteres en HTML
Se requieren muchos símbolos y caracteres especiales al desarrollar una página web en html, pero como sabemos que
a veces, el uso directo de caracteres puede interferir con el código html real que tiene ciertos caracteres
reservados y también ciertos caracteres que no están disponibles en el teclado. Así, para evitar el conflicto y al mismo tiempo
para poder utilizar diferentes símbolos en nuestro código w3 org nos proporciona 'Character Entities'.
Las entidades de carácter están predefinidas con 'Nombre de entidad' - &entity_name; y 'Número de entidad' - &entity_number; Así que nosotros
necesita usar cualquiera de los dos para que el símbolo requerido se represente en nuestra página.
La lista de algunas entidades de personajes se puede encontrar en https://dev.w3.org/html5/html-author/charref
<input type="text" placeholder=" 🔍 Buscar"/>

Un ejemplo simple con el uso de entidad de carácter para 'lupa':
que se traduce como
Sección 40.2: Caracteres especiales comunes

Algunos caracteres pueden estar reservados para HTML y no pueden usarse directamente, ya que pueden obstruir los códigos HTML reales.
Por ejemplo, tratar de mostrar los corchetes angulares izquierdo y derecho (<>) en el código fuente puede causar problemas inesperados.
resultados en la salida. De manera similar, es posible que los espacios en blanco tal como están escritos en el código fuente no se muestren como se esperaba en el
HTML de salida. Algunos, como ÿ, no están disponibles en el conjunto de caracteres ASCII.
Para este propósito, se crean entidades de carácter. Estos son de la forma &entity_name; o &entity_number;. los
siguientes son algunas
espaciodeininterrumpido
las entidades HTML disponibles.

< <
Personaje Descripción Nombre de la entidad Número de la entidad
–
“”
> >
“<” menos que &amperio; &
“>” mayor que el
—
“&” ampersand
– –
“—” guión largo &Copiar; ©
“–” en guión ®
“©” &comercio; ™

copyright
“®” &teléfono; ☎
marca registrada ®
“™” marca comercial
“ÿ” teléfono
Así, para escribir
© 2016 Stack Exchange Inc.
<b>&copia; 2016 Stack Exchange Inc.</b>

se utiliza el siguiente código HTML:

capitulo 41
Sección 41.1: rol="presentación"
Un elemento cuya semántica de función nativa implícita no se asignará a la API de accesibilidad.
<div style="float:left;">Algo de contenido a la izquierda.</div> <div

style="float:right;">Algo de contenido a la derecha</div> <div
role="presentation" style= "clear:both;"></div> 
Sección 41.2: rol="alerta"

Un mensaje con información importante y, por lo general, urgente.
<div role="alert" aria-live="assertive">Su sesión caducará en 60 segundos.</div>
Tenga en cuenta que he incluido role="alert" y aria-live="asertive" al mismo tiempo. Estos son
atributos sinónimos, pero algunos lectores de pantalla solo admiten uno u otro. Al usar ambos simultáneamente,
maximizamos las posibilidades de que la región en vivo funcione como se espera.
Fuente: Heydon Pickering 'Algunos ejemplos prácticos de ARIA'
Sección 41.3: rol="alertdialog"

Un tipo de diálogo que contiene un mensaje de alerta, donde el enfoque inicial se dirige a un elemento dentro del diálogo.
<div role="alertdialog">
<h1>Advertencia</h1> <div
role="alert">Su sesión caducará en 60 segundos.</div>
</div>
Sección 41.4: rol="aplicación"

Una región declarada como una aplicación web, a diferencia de un documento web. En este ejemplo, la aplicación es una calculadora simple
que puede sumar dos números.
<div role="aplicación">
<h1>Calculadora</h1>
<input id="num1" type="text"> + <input id="num2" type="text"> = <span id="resultado
"> </div>
Sección 41.5: rol="artículo"

Una sección de una página que consta de una composición que forma una parte independiente de un documento, página o sitio.
No es necesario establecer una función ARIA y/o un atributo aria-* que coincida con la semántica ARIA implícita
predeterminada, y no se recomienda, ya que estas propiedades ya están configuradas por el navegador.

<article>
<h1>Mi primer artículo</h1>
<p>Lorem ipsum...</p> </article>
Usaría role=article en elementos no semánticos (no recomendado, no válido)
<div role="article"> <h1>Mi

primer artículo</h1> <p>Lorem
ipsum...</p> </div>
Entrada W3C para rol=artículo
Sección 41.6: rol="banner"

Una región que contiene principalmente contenido orientado al sitio, en lugar de contenido específico de la página.
<div role="banner">
<h1>Mi sitio</h1>
<ul>
<li><a href="/">Inicio</a></li> <li><a
href="/acerca de">Acerca de</a></li> <li><a
href ="/contacto">Contacto</a></li> </ul> </div>
Sección 41.7: rol="botón"

Una entrada que permite acciones desencadenadas por el usuario cuando se hace clic o se presiona.
<button role="button">Añadir</button>
Sección 41.8: rol="celda"

Una celda en un contenedor tabular.
<mesa>
<cabeza>

</thead>
<tbody>
<td rol="cell">95</td> <td
role="cell">14</td> <td
role="cell">25</td> </tbody>
</tabla>
Sección 41.9: rol="casilla de verificación"

Una entrada comprobable que tiene tres valores posibles: verdadero, falso o mixto.
<p>
<input type="casilla de verificación" role="casilla de verificación" aria-checked="false">
acepto los términos

</p>
Sección 41.10: rol="encabezado de columna"

Una celda que contiene información de encabezado para una columna.
<table role="grid"> <thead>
<tr>
<th role="columnheader">Día 1</th> <th
role="columnheader">Día 2</th> <th
role="columnheader">Día 3</th> </tr> </thead>
<tcuerpo> 
</tbody>
<tabla>
Sección 41.11: rol="combobox"

Una presentación de un selecto; generalmente similar a un cuadro de texto donde los usuarios pueden escribir para seleccionar una opción, o escribir para
ingresar texto arbitrario como un nuevo elemento en la lista.
<input type="text" role="combobox" aria-expanded="false">
Por lo general, usaría JavaScript para compilar el resto de la función de escritura anticipada o selección de lista.
Sección 41.12: rol="complementario"

Una sección de apoyo del documento, diseñada para complementar el contenido principal en un nivel similar en la jerarquía DOM, pero que sigue siendo
significativa cuando se separa del contenido principal.
<div role="complementary"> <h2>Más

artículos</h2>
<ul>
 </ul>
</div>
Sección 41.13: rol="infocontenido"

Gran región perceptible que contiene información sobre el documento principal.
<p rol="información de contenido">

Autor: Albert Einstein<br>
Publicado: 15 de agosto de 1940 </p>
Sección 41.14: rol="definición"

Una definición de un término o concepto.
<span role="term" aria-labelledby="def1">Amor

<span id="def1" role="definition">un intenso sentimiento de afecto profundo.
Sección 41.15: rol="diálogo"

Un cuadro de diálogo es una ventana de aplicación que está diseñada para interrumpir el procesamiento actual de una aplicación para
solicitar al usuario que ingrese información o requiera una respuesta.
<div rol="diálogo">
<p>¿Estás seguro?</p>
<button rol="button">Sí</button> <button
rol="button">No</button>
</div>
Sección 41.16: rol="directorio"

Una lista de referencias a miembros de un grupo, como una tabla de contenido estática.
<ul rol="directorio">
<li><a href="/chapter-1">Capítulo 1</a></li> <li><a href="/
chapter-2">Capítulo 2</a></li> <li ><a href="/
chapter-3">Capítulo 3</a></li> </ul>
Sección 41.17: rol="documento"

Una región que contiene información relacionada que se declara como contenido del documento, a diferencia de una aplicación web.
<div rol="documento">
<h1>La vida de Albert Einstein</h1>
<p>Lorem ipsum...</p>
</div>
Sección 41.18: rol="formulario"

Una región histórica que contiene una colección de elementos y objetos que, en conjunto, se combinan para crear una forma.
El uso del elemento HTML semánticamente correcto <form> implica la semántica ARIA predeterminada, lo que significa que no se
requiere role=form ya que no debe aplicar un rol de contraste a un elemento que ya es semántico, ya que agregar un rol anula la
semántica nativa de un elemento.
No es necesario establecer una función ARIA y/o un atributo aria-* que coincida con la semántica ARIA implícita
predeterminada, y no se recomienda, ya que estas propiedades ya están configuradas por el navegador.
<form action="">
<fieldset>
<legend> Formulario de inicio de
sesión</legend> <div> <label
for="username">Tu nombre de usuario</label> <input
type="text" id="username" aria- descriptionby="username-tip" required /> <div role="tooltip" id="username-
tip">Su nombre de usuario es su dirección de correo electrónico</div>
</div>
<div>
<label for="password">Su contraseña</label> <input
type="text" id="password" aria-describedby="password-tip" requerido />

<div role="tooltip" id="password-tip">Se le envió por correo electrónico cuando se registró </div>
</div> </
conjunto de
campos> </formulario>
Usaría role=form en elementos no semánticos (no recomendado, no válido)
<div role=formulario>
<input type="email" placeholder="Tu dirección de correo electrónico">
<button>Registrarse </button>
</div>
Sección 41.19: rol="cuadrícula"

Una cuadrícula es un control interactivo que contiene celdas de datos tabulares dispuestos en filas y columnas, como una tabla.


</thead>
<tbody>

</tbody> </
tabla>
Sección 41.20: rol="gridcell"

Una celda en una cuadrícula o cuadrícula de árbol.
<tabla rol="cuadrícula">
<cabeza>
 </
thead> <tbody>
<tr>
<td rol="gridcell">17</td> <td
rol="gridcell">64</td> <td rol="gridcell">18</
td> </tr> </tbody> <tabla>
Sección 41.21: rol="grupo"

Un conjunto de objetos de interfaz de usuario que no están destinados a ser incluidos en un resumen de página o tabla de contenido por tecnologías
de asistencia.
<div rol="grupo">
<button role"button">Anterior</button> <button
role"button">Siguiente</button>
</div>
Sección 41.22: rol="encabezado"

Un encabezado para una sección de la página.

<h1 role="heading">Introducción</h1>
Sección 41.23: rol="img"

Un contenedor para una colección de elementos que forman una imagen.
<figura rol="img">
<img alt="Un lindo gato." src="albert.jpg">
<figcaption>Este es mi gato, Albert.</figcaption> <figure>
Sección 41.24: rol="enlace"

Una referencia interactiva a un recurso interno o externo que, cuando se activa, hace que el agente de usuario navegue hasta ese recurso.
En la mayoría de los casos, establecer un rol ARIA y/o un atributo aria-* que coincida con la semántica ARIA implícita predeterminada
es innecesario y no se recomienda ya que estas propiedades ya están configuradas por el navegador.
Fuente: https://www.w3.org/TR/html5/dom.html#aria-usage-note
Sección 41.25: rol="lista"

Un grupo de elementos de lista no interactivos.
<ul rol="lista"> <li

rol="listitem">Uno</li> <li
rol="listitem">Dos</li> <li
rol="listitem">Tres</li> </ul >
Sección 41.26: rol="cuadro de lista"

Un widget que permite al usuario seleccionar uno o más elementos de una lista de opciones.
<ul role="listbox">
<li>Uno</li> <li>Dos</
li> <li>Tres</li> </ul>
Por lo general, usaría JavaScript para crear la funcionalidad de selección múltiple.
Sección 41.27: rol="listitem"

Un solo elemento en una lista o directorio.
<ul rol="lista">
<li role="listitem">Uno</li> <li
role="listitem">Dos</li> <li
role="listitem">Tres</li> </ul>

Sección 41.28: rol="registro"

Un tipo de región en vivo donde se agrega nueva información en un orden significativo y la información antigua puede desaparecer.
<ul role="log">
<li>Usuario 1 conectado .</li> <li>Usuario
2 conectado .</li> <li>Usuario 1
desconectado .</li> </ul>
Sección 41.29: rol="principal"

El contenido principal de un documento.


<div role="main"> <p>Lorem ipsum...</
p>
</div>

Sección 41.30: rol="marquesina"

Un tipo de región en vivo donde la información no esencial cambia con frecuencia.
<ul rol="marquesina">
<li>Dow +0,26 %</li>
<li>Nasdaq +0,54 %</li>
<li>S&P +0,44 %</li> </ul>
Sección 41.31: rol="matemáticas"

Contenido que representa una expresión matemática.
<img rol="matemáticas" alt="y=mx+b" src="pendiente.png">
Sección 41.32: rol="menú"

Un tipo de widget que ofrece una lista de opciones al usuario.
<ul role="menu"> <li

role="menuitem">Nuevo</li> <li
role="menuitem">Abrir</li> <li
role="menuitem">Guardar</li> <li role
="menuitem">Cerrar</li> </ul>
Sección 41.33: rol="barra de menú"

Una presentación de menú que suele permanecer visible y suele presentarse de forma horizontal.
<ul role="menubar"> <li

role="menuitem">Archivo</li> <li
role="menuitem">Editar</li> <li
role="menuitem">Ver</li>

<li role="menuitem">Ayuda</li> </ul>
Sección 41.34: rol="menuitem"

Una opción en un grupo de opciones contenidas en un menú o barra de menú.
<ul role="menubar"> <li

role="menuitem">Archivo</li> <li
role="menuitem">Editar</li> <li
role="menuitem">Ver</li> <li role
="menuitem">Ayuda</li> </ul>
Sección 41.35: rol="menuitemcheckbox"

Un elemento de menú verificable que tiene tres valores posibles: verdadero, falso o mixto.
<ul rol="menú">
<li role="menuitem">Consola</li> <li
role="menuitem">Diseño</li> <li
role="menuitemcheckbox" aria-checked="true"> Ajuste de línea </li> </ul >
Sección 41.36: rol="menuitemradio"

Un elemento de menú verificable en un grupo de roles de radio de elemento de menú, solo uno de los cuales se puede verificar a la vez.
<ul role="menu"> <li

role="menuitemradio" aria-checked="true">Izquierda</li> <li role="menuitemradio"
aria-checked="false">Centro</li> <li rol="menuitemradio" aria-checked="false">Derecha</
li> </ul>
Sección 41.37: rol="navegación"

Una colección de elementos de navegación (generalmente enlaces) para navegar por el documento o documentos relacionados.
<ul role="navegación"> <li><a

href="/">Inicio</a></li> <li><a href="/acerca
de">Acerca de</a></li> < li><a href="/
contacto">Contacto</a></li> </ul>
Sección 41.38: rol="nota"

Una sección cuyo contenido es paréntesis o auxiliar del contenido principal del recurso.
<p>Lorem ipsum...</p> <p
role="note">Lorem ipsum...</p>
Sección 41.39: rol="opción"

Un elemento seleccionable en una lista de selección.

<ul role="listbox"> <li

role="option">Opción 1</li> <li role="option">Opción
2</li> <li role="option">Opción 3</li> </ul>
Sección 41.40: rol="barra de progreso"

Un elemento que muestra el estado de progreso de las tareas que llevan mucho tiempo.
<progreso rol="barra de progreso" valor="25" max="100">25%</progreso>
Sección 41.41: rol="radio"

Una entrada verificable en un grupo de roles de radio, solo uno de los cuales se puede verificar a la vez.
<div role="grupo de radio"> <input

role="radio" type="radio" aria-checked="true"> Uno<br> <input role="radio" type="radio" aria-
checked="false "> Dos<br> <input role="radio" type="radio" aria-checked="false"> Tres </div>
Sección 41.42: rol="región"

Una gran sección perceptible de una página web o documento, que el autor considera que es lo suficientemente importante como para incluirla
en un resumen de página o tabla de contenido, por ejemplo, un área de la página que contiene estadísticas de eventos deportivos en vivo.
<div rol="región">
Equipo local: 4<br>
Equipo visitante:
2 </div>
Sección 41.43: rol="gruporadio"

Un grupo de botones de opción.
<div role="grupo de radio"> <input

role="radio" type="radio" aria-checked="true"> Uno<br> <input role="radio" type="radio" aria-
checked="false "> Dos<br> <input role="radio" type="radio" aria-checked="false"> Tres
</div>
Sección 41.44: rol="fila"

Una fila de celdas en un contenedor tabular.
<mesa>
<cabeza>
 </
thead> <tbody> <tr
rol="fila"> 
</tr> </
tbody>

</tabla>
Sección 41.45: rol="grupofilas"

Un grupo que contiene uno o más elementos de fila en una cuadrícula.
<tabla>
<thead role="rowgroup">

</thead>
<tbody rol="grupofilas">

</tbody> </
tabla>
Sección 41.46: rol="encabezado de fila"

Una celda que contiene información de encabezado para una fila en una cuadrícula.
 </

thead> <tbody>
<tr> <th
role="rowheader">Día 1</th> <td>65</td> </tr>
<tr>
<th role="rowheader">Día 2</th> <td>74</td>
</tr> </tbody> </table>
Sección 41.47: rol="barra de desplazamiento"
Un objeto gráfico que controla el desplazamiento del contenido dentro de un área de visualización, independientemente de si el contenido se muestra completamente dentro
del área de visualización.
<div id="content1">Lorem ipsum...</div> <div role="barra

de desplazamiento"
aria-controles="contenido1" aria-
orientación="vertical" aria-valuemax="100"
aria-valuemin="0" aria-
valuenow="25">
<div class="scrollhandle"></div> </div>
Sección 41.48: rol="buscar"

Una región histórica que contiene una colección de elementos y objetos que, en su conjunto, se combinan para crear una función de búsqueda.
<div rol="buscar">

<input role="boxbox" type="text"> <button

role="button">Buscar</button>
</div>
Sección 41.49: rol="caja de búsqueda"

Un tipo de cuadro de texto destinado a especificar criterios de búsqueda.
<div rol="buscar">
<input role="boxbox" type="text"> <button
role="button">Buscar</button>
</div>
Sección 41.50: rol="separador"

Un divisor que separa y distingue secciones de contenido o grupos de elementos de menú.
<p>Lorem ipsum...</p> <hr

rol="separador"> <p>Lorem
ipsum...</p>
Sección 41.51: rol="control deslizante"

Una entrada de usuario donde el usuario selecciona un valor dentro de un rango dado.
<div
rol="control
deslizante" aria-
valuemax="100" aria-valuemin="0"
aria-valuenow="25">
<div class="control deslizante"></div> </div>
Sección 41.52: rol="botón giratorio"

Una forma de rango que espera que el usuario seleccione entre opciones discretas.
< rol de
entrada="botón giratorio"
aria-valuemax="100" aria-
valuemin="0"
aria-valorahora="25"
tipo="número" valor="25">
Sección 41.53: rol="estado"

Un contenedor cuyo contenido es información de asesoramiento para el usuario pero que no es lo suficientemente importante como para justificar una alerta, a menudo,
pero no necesariamente, se presenta como una barra de estado.
<div role="status">En línea</div>
Sección 41.54: rol="cambiar"

Un tipo de casilla de verificación que representa valores activados/desactivados, a diferencia de valores activados/desactivados.

<seleccione rol="cambiar" aria-checked="falso">

<option>Activado</option>
<opción seleccionada>Desactivado</
option> </select>
Sección 41.55: rol="tab"

Una etiqueta de agrupación que proporciona un mecanismo para seleccionar el contenido de la pestaña que se va a mostrar al usuario.
<ul rol="lista de tablas">

<li role="tab">Introducción</li> <li
role="tab">Capítulo 1</li> <li role="tab">Capítulo
2</li> </ul>
Sección 41.56: rol="tabla"

Una sección que contiene datos organizados en filas y columnas. El rol de tabla está diseñado para contenedores tabulares que no son interactivos.
<tabla rol="tabla">
<cabeza>

</thead>
<tbody>

</tbody> </
tabla>
Sección 41.57: rol="lista de tablas"

Una lista de elementos de pestaña, que son referencias a elementos de panel de pestañas.

2</li> </ul>
Sección 41.58: rol="tabpanel"

Un contenedor para los recursos asociados con una pestaña, donde cada pestaña está contenida en una lista de pestañas.

2</li> </ul> <div role=" tabpanel"> 
</div>
Sección 41.59: rol="cuadro de texto"

Entrada que permite texto de formato libre como su valor.

<textarea role="cuadro de texto"></textarea>
Sección 41.60: rol="temporizador"

Un tipo de región en vivo que contiene un contador numérico que indica la cantidad de tiempo transcurrido desde un punto de inicio, o el tiempo restante hasta un
punto final.
<p>
<span role="timer">60 segundos restantes. </p>
Sección 41.61: rol="barra de herramientas"
Una colección de botones de función de uso común representados en forma visual compacta.
<ul rol="barra de herramientas">
<li><img alt="Nuevo" src="nuevo.png"></li> <li><img

alt="Abrir" src="abrir.png"></li> <li><img alt ="Guardar"
src="guardar.png"></li> <li><img alt="Cerrar"
src="cerrar.png"></li> </ul>
Sección 41.62: rol="información sobre herramientas"
Una ventana emergente contextual que muestra una descripción de un elemento.
<span aria-describedby="slopedesc">Pendiente <div role="información

sobre herramientas" id="slopedesc">y=mx+b</div>
Por lo general, la información sobre herramientas estaría oculta. Usando JavaScript, la información sobre herramientas se mostraría después de un retraso
cuando el usuario pasa el cursor sobre el elemento que describe.
Sección 41.63: rol="árbol"
Un tipo de lista que puede contener grupos anidados de subnivel que se pueden contraer y expandir.
<ul rol="árbol"> <li

rol="árbol">
Parte 1
<ul> <li
role="treeitem">Capítulo 1</li> <li
role="treeitem">Capítulo 3</li> </ul > </li> <li
rol="elemento del árbol">
Parte 2
<li role="treeitem">Capítulo 4</li> <li

role="treeitem">Capítulo 6</li> </ul> </li> <li
Parte 3
<ul>


role="treeitem">Capítulo 9</li> </ul> </li> </ul>
Sección 41.64: rol="treegrid"

Una cuadrícula cuyas filas se pueden expandir y contraer de la misma manera que para un árbol.
Sección 41.65: rol="treeitem"

Un elemento de opción de un árbol. Este es un elemento dentro de un árbol que se puede expandir o colapsar si contiene un grupo de
subnivel de elementos del árbol.
<ul rol="árbol">
<li rol="elemento del árbol">
Parte 1

role="treeitem">Capítulo 3</li> </ul> </li> <li
Parte 2
<ul> <li
role="treeitem">Capítulo 6</li> </ul > </li> <li
Parte 3
<ul>
role="treeitem">Capítulo 9</li> </ul> </li> </ul>

Créditos
Muchas gracias a todas las personas de Stack Overflow Documentation que ayudaron a proporcionar este contenido.
se pueden enviar más cambios a web@petercv.com para que se publique o actualice nuevo contenido
AA2992 Capítulo 12
Abhishek Pandey Capítulos 17 y 33
Abrar Jahín Capítulo 4
adjit capitulo 29
ahmednawazbutt Capítulo 1
Al.G. Capítulos 2, 6 y 17
alberto Capítulo 8
Alex Capítulo 15
Alexander Wigmore capitulo 33
Alejandro N. Capítulos 8, 13, 15, 28 y 29
Ali Almoullim Capítulos 18 y 27
Amanda Ahn Capítulo 1
amflare Capítulos 1 y 27
Amitay Stern Capítulos 1 y 17
andreaem Capítulo 13
andrés capitulo 31
Andrés Brooke capitulo 20
angelos chalaris Capítulos 2, 10, 17 y 33
Ani Menón Capítulos 2, 3, 9, 17, 18 y 33
Añil capitulo 20
animacion Capítulos 1, 2, 5, 6, 7, 8, 9, 15, 17, 18, 27, 29, 33, 37 y 40
anselmo Capítulos 6, 12 y 13
antonio pham Capítulo 6
Aown Muhammad capitulo 18
arácnido capitulo 19
aravind suresh Capítulo 12
Ashwin Ramaswami Capítulo 9
Hacha capitulo 33
balint capitulo 33
ban17 Capítulo 6
bdkopen Capítulos 9, 14 y 33
Beca capitulo 37
Ben Rhys Capítulo 5
bhansa capitulo 17
Bhavya Singh capitulo 41
Devorador de libros capitulo 33
boris capitulo 33
Boysenb3rry Capítulo 15
brandaemon Capítulo 10
Caleb Kleveter Capítulos 10 y 15
Callan escuchó Capítulos 1 y 12
cedric zopolo Capítulo 8
Charles Capítulo 13
cris Capítulos 2 y 19
Chris Rutherfurd Capítulo 12
CrisD Capítulos 1, 9, 24, 29 y 31
Ternus cristiano capitulo 14

Christophe Strobbe capitulo 17

cono56 Capítulos 12 y 32
Soluciones de contenido Capítulos 2, 19, 26, 35 y 36
cullub Capítulo 18
CÿN capitulo 17
MD capitulo 19
Daniel capitulo 17
Daniel Kafer Capítulo 7
Dave Everitt Capítulo 1
AmanecerPaladín Capítulos 6, 12 y 17
Dipen Shah capitulo 17
dippas Capítulo 3
Domenico Capítulos 12 y 33
Druzión capitulo 17
Emanuel Vintil ÿ capitulo 29
emilio Capítulos 5, 6 y 10
evan Capítulo 3
Farhad capitulo 38
feeela Capítulos 12 y 25
Felipe Als capitulo 30
FlyingPiMonster Capítulo 6
gabe3886 capitulo 17
Gabriel Chi Hong Lee Capítulos 15 y 18
Gal Ratzkin capitulo 19
geek1011 Capítulos 1 y 33
geeksal capitulo 17
Geroldo Broser Capítulos 1 y 30
CabrasVestirSombreros Capítulo 10
Nota de gracia Capítulo 7
Grant Palin Capítulo 8
gustavohenke Capítulo 5
Gytis Tenovimas capitulo 17
H Mirza Capítulo 1
H. Pauwelyn Capítulo 1
Habel Felipe Capítulo 33
Hafidz Ilham Aji Permana Capítulo 33
Hanif Formoly Capítulo 20
Heerfk Capítulo 2
Henrique Barcelos Capítulos 12 y 17
Huy Nguyen Capítulo 17
Infuzion Capítulos 3 y 12
insertusernamehere Capítulo 6
intboolstring Capítulo 1
Isak Combrinck Capítulos 25 y 30
ivn Capítulo 15
jf Capítulos 5 y 8
j08691 Capítulos 8 y 18
jhnance Capítulo 10
jhoanna capitulo 33
Capítulos 6, 8, 9, 12 y 19
JHS Capítulo 9
jkdev joe_young Capítulos 1, 3 y 8
Juan Slegers Capítulos 10 y 17

Jojodmo Capítulo 6
Jon Ericson Capítulo 7
jonathan lam Capítulos 1, 6, 12 y 16
jose jose Capítulos 6 y 14
Kake_Fisk Capítulo 15
kcpike Capítulo 7
kelvinelove Capítulos 1 y 33
Kimmax capitulo 18
Lahiru Ashan capitulo 17
Leónidas Menéndez Capítulo 1
luca langella capitulo 18
luca putzú Capítulo 10
Marjorie Pickard Capítulo 13
Marvin Capítulos 7 y 17
Matas Vaitkevicius Capítulos 6, 7, 12 y 17
Mate Capítulo 1
Maximiliano Laumeister Capítulos 15 y 17
MervS Capítulos 13 y 40
Michael Moriarty capitulo 33
Michael_B Capítulo 10
monronha Capítulo 1
Mohd Samir Khan Capítulo 15
más irónico capitulo 17
Mosh Feu capitulo 27
moteado Capítulo 8
Sr. Lister Capítulo 8
Sr. alienígena capitulo 33
Muntasir capitulo 30
MySpeed capitulo 19
m_callens Capítulos 22 y 33
nalply capitulo 20
natalia Capítulo 10
nathan tuggy Capítulo 6
Nhan Capítulos 12 y 15
Niek Brower capitulo 18
Nijin22 Capítulo 8
nil llisterri capitulo 17
Nishchay Capítulos 1 y 33
NoobCoder capitulo 17
Ojén capitulo 29
Ortomala Lokni Capítulos 17 y 33
Paresh Maghodia capitulo 39
pablo sudor capitulo 41
Capítulo 1
PersijnPeter L. Capítulo 5
Programas capitulo 17
Pi pinjasaur Capitulo 2
platy11 Capítulo 7
Pranav Capítulo 6
Prateek Capítulos 6, 7, 8 y 17
Pratik Lochawala Capítulo 8
Praveen Kumar Capítulo 8
psaniko Capítulos 17 y 36

Seudónimo Patel Capítulos 3 y 7

Racil Hilán Capítulo 11
rajarshig Capítulo 11
RamenChef Capítulos 16 y 17
Ranjit Singh capitulo 17
Raystafari Capítulos 5 y 6
ricardo hamilton Capítulos 7, 10, 26 y 32
Roberto Colombia Capítulo 6
Roko C. Buljan Capítulos 13, 17, 22 y 32
Safoor Safdar capitulo 33
Sasha Capítulo 3
SeinopSys capitulo 17
Senjuti Mahapatra capitulo 33
shannon joven Capítulos 20 y 41
Sharavnan Kv capitulo 17
Shiva capitulo 25
Chaurasia Shivangi Capítulos 15 y 17
Sildoreth Capítulos 8 y 13
simone carletti Capítulo 10
pila capitulo 17
SJDS capitulo 40
Esteban Leppik Capítulos 17 y 33
stewartside Capítulos 7 y 17
Steyn van Esveld Capítulo 6
Sumner Evans Capitulo 2
Sunny R Gupta Capítulos 1 y 17
Super Stormer Capítulos 13, 19 y 34
sv3k capitulo 17
svarog Capítulo 8
ted goas Capítulos 8 y 33
el12 Capítulos 1 y 17
pensar123 capitulo 17
Tomas Gerot capitulo 24
Tomas Landauer Capítulo 8
milusten capitulo 14
Timón capitulo 17
Timothy Miller capitulo 31
Capítulos 2, 7 y 17
tom johnson Capítulo 7
capitulo 32
Tot Zam Capítulos 17 y 27
Travis capitulo 41
trevor clarke capitulo 32
trunk18 capitulo 17
Tyler Zika Capítulo 10
ulrich schwarz Capítulo 9
Deshacer capitulo 17
unor Capítulos 1, 5, 6, 7, 12, 30, 33, 34, 35 y 37
usuario3130333 Capítulo 1
usuario5389107 capitulo 17
V4karian Capítulo 12
valor naram Capítulos 1, 4 y 38
vkopio Capítulo 3

vladdobra Capítulos 12 y 17
w5m capitulo 31
wolfgang Capítulos 6, 9 y 15
xims capitulo 33
Yasir T. Capítulo 11
Yossi Aharon Capítulos 20 y 25
Zack Capítulo 7
Zange capitulo 37
Zaz Capítulo 1
zer00ne Capítulos 8 y 23
zigimanto Capítulo 1
Zze Capítulo 1
zzzzBov capitulo 17

También te puede interesar

HTML5 Notes Traducido

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML5 Notes Traducido

Cargado por

Copyright:

Formatos disponibles

Machine Translated by Google HTML5

Notas para profesionales HTML5

Notas para profesionales

más de 100 páginas

Capítulo 1: Primeros pasos con HTML .................................................... .................................................... ............ 2

Sección 1.1: Hola mundo .................................................... .................................................... ............................................. 2

Capítulo 2: Doctipos .............................................. .................................................... .................................................... .. 5

Sección 2.1: Agregando el Doctype .................................................. .................................................... .................................... 5

Sección 3.1: Uso de encabezados ............................................... .................................................... .......................................... 6

Sección 5.4: Insertado, Eliminado o Tachado Sección .................................................... .................................................... ............... 9

5.5: Superíndice y Subíndice .................................. .................................................... .................................... 9

Capítulo 7: Listas .................................................... .................................................... .................................................... ...... 15

Sección 7.3: Listas anidadas .................................................... .................................................... .......................................... 17

Sección 7.4: Lista de descripción .................................................... .................................................... ..................................... 17

simple Sección 8.2: Expansión de.................................................... .................................................... ........................................ 19

columnas o filas Sección 8.3: Grupos de .................................................... .................................................... ................ 19

columnas ........... .................................................... .................................................... .......... 20

Capítulo 10: Clases e ID .................................................... .................................................... ............................... 26

Sección 10.1: Asignación de una clase a un .................................................... .................................................... .................. 26

elemento Sección 10.2: Asignación de un ID a .................................................... .................................................... ................... 27

Sección 10.4: Problemas relacionados con ID duplicados .................................................... .................................................... . 29

Capítulo 11: Atributos de los datos .................................................... .................................................... ............................... 30

Capítulo 12: Enlace de recursos .................................................... .................................................... ......................... 31

Sección 12.1: JavaScript ............................................... .................................................... ............................................... 31

Sección 12.2: Hoja de estilo CSS externa ........................................... .................................................... .......................... 32

Sección 12.4: CSS alternativo .................................................... .................................................... .................................... 32

Sección 12.5: Sugerencia de recursos: dns-prefetch, prefetch, prerender .................................. .......................................... 33

Sección 12.7: Anterior y Siguiente .................................................... .................................................... ..................................... 33

Sección 12.8: Fuente web .................................................... .................................................... .......................................... 33

Capítulo 13: Incluir código JavaScript en HTML .................................................... .......................................... 35

Sección 13.1: Manejo de Javascript deshabilitado ........................................... .................................................... .......... 35

Sección 13.2: Vinculación a un archivo JavaScript externo Sección .................................................... ................................................ 35

13.3: Inclusión directa de código JavaScript Sección 13.4: Inclusión.................................................... .................................................... .. 35

de un archivo JavaScript que se ejecuta de forma asíncrona .............. ............................................. 35

de la hoja de estilo externa Sección 14.2: Hoja de .................................................... .................................................... ..................... 36

estilo interna .......................... .................................................... ............................................... 36

Sección 14.3: Estilo en línea ............................................. .................................................... ............................................... 37

Sección 14.4: Múltiples hojas de estilo ............................................... .................................................... .......................... 37

Sección 15.1: Creación de una imagen ........................................... .................................................... .................................... 38

Sección 15.2: Elegir texto alternativo .................................................... .................................................... ................................ 38

Imagen receptiva usando el elemento de imagen .................................................... ............................................. 40

Capítulo 16: Mapas de imágenes ............................................. .................................................... ..........................................41

Sección 17.1: Texto .................................................... .................................................... .................................................... .... 43

Sección 17.2: Casilla de verificación y botones de opción .................................................... .................................................... ........... 44

Sección 17.3: Validación de entrada .................................................... .................................................... .................................... 46

Sección 17.4: Color .................................................... .................................................... .................................................... .. 47

Sección 17.5: Contraseña .................................................... .................................................... ............................................ 48

Sección 17.6: Archivo .................................................... .................................................... .................................................... ..... 48

Sección 17.7: Botón .................................................... .................................................... .......................................................... 49

Sección 17.8: Enviar .................................................... .................................................... .......................................................... 50

Sección 17.9: Restablecer .................................................... .................................................... .................................................... . 50

Sección 17.10: Oculto .................................................... .................................................... .......................................................... 50

Sección 17.11: Teléfono .................................................... .................................................... .................................................... ..... 50

Sección 17.12: Correo electrónico .................................................... .................................................... .................................................... 51

Sección 17.13: Número .................................................... .................................................... ............................................................. 51

Sección 17.14: Alcance ............................................... .................................................... .................................................... .. 51

Sección 17.16: Imagen ............................................... .................................................... .................................................... ... 51

Sección 17.18: URL .................................................... .................................................... .................................................... .... 52

Sección 17.19: DateTime-Local .................................................... .................................................... ................................ 52

Sección 17.20: Mes .................................................... .................................................... ................................................ 52

Sección 17.21: Tiempo .................................................... .................................................... .................................................... . 52

Sección 17.22: Fecha y hora (Global) ........................................... .................................................... .................................... 53

Capítulo 18: Formularios .................................................... .................................................... .................................................... 54