Scribd
Cargar
28 vistas5 páginas

HTML5

Cargado por

guisao2346
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
28 vistas5 páginas

HTML5

Cargado por

guisao2346
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

Aplicaciones Web

¿Qué es HTML?

El documento que lee el navegador está escrito en un lenguaje de marcado llamado HTML.
Es un lenguaje de etiquetas que permite incluir o hacer referencia a todo tipo de
información.

¿Qué es una etiqueta HTML?

Son la base del lenguaje HTML. Las etiquetas en HTML se usan para organizar y dar
significado al contenido en una página web. Cada etiqueta tiene una función específica para
estructurar o presentar la información de una manera particular.

No se usa cualquier tipo de palabra, se usan unas palabras específicas para cada etiqueta
que sirve para definir y dar estructura al contenido, lo cual facilita tanto la visualización como
la interpretación por parte de los navegadores y buscadores.

¿Qué son los atributos HTML?

Son las palabras claves de texto que modifican ligeramente el comportamiento de la


etiqueta que lo contiene, los atributos más comunes tienen una relación con CSS y pueden
ser utilizados en cualquier etiqueta HTML.
Claro, aquí tienes los atributos comunes relacionados con CSS sin incluir el código:

● class: Permite aplicar estilos específicos a un elemento mediante una o varias


clases CSS.
● id: Asigna un identificador único a un elemento, ideal para aplicar estilos únicos o
para referenciar en JavaScript.
● style: Permite agregar estilos CSS directamente en el elemento, aunque es más
recomendable usar archivos CSS externos para mantener el código ordenado.

¿Qué es la semántica HTML?

La semántica en HTML es el uso de etiquetas con un significado claro sobre el contenido


que contienen. Estas etiquetas explican la función y estructura de cada parte de la página,
facilitando la comprensión para desarrolladores, navegadores y buscadores.
Estructura de un documento web HTML

Un documento HTML debe estar bien formado para que su lectura sea correcta, para ello
tiene que tener una estructura inicial bien definida, con diferentes etiquetas HTML
obligatorias y sus características importantes, la estructura cuenta de 3 partes.

"DOCTYPE": es una instrucción al inicio del documento que le indica al navegador la


versión de HTML usada. En HTML5 se escribe como `<!DOCTYPE html>`.
Etiqueta ”HEAD": La etiqueta `<head>` contiene información importante para el navegador,
como el título de la página, enlaces a estilos CSS, scripts y metadatos. Todo en `<head>` es
"invisible" para el usuario pero esencial para la estructura de la página.

Etiqueta ”BODY”: La etiqueta `<body>` contiene todo el contenido visible para el usuario:
texto, imágenes, videos y más. Aquí es donde se construye lo que los usuarios ven y con lo
que interactúan en la página.

Etiquetas más comunes

● <header>: Encabezado de una página o sección.


● <nav>: Menú de navegación.
● <main>: Contenido principal de la página.
● <section>: Agrupa contenido relacionado en una sección.
● <article>: Para contenido independiente como un artículo o publicación.
● <aside>: Contenido relacionado, como una barra lateral o información adicional.
● <footer>: Pie de página con información de cierre o contacto.
● <h1> a <h6>: Títulos y subtítulos en orden de importancia.
● <p>: Párrafo de texto.
● <a>: Enlace a otra página o recurso.
● <img>: Inserta una imagen.
● <ul>, <ol>, <li>: Listas desordenadas, ordenadas y elementos de lista.
● <div>: Contenedor genérico para agrupar elementos (sin significado semántico).
● <span>: Contenedor en línea para aplicar estilos a una parte específica del texto.
● <form>: Contenedor para formularios interactivos con campos como <input>,
<textarea>, y <button>.
● <figure>:
● <dl>
● <blockquote>
● <p>: Párrafo de texto.
● <hr>: Línea horizontal para separar contenido.
● <br>: Salto de línea.
● <address>: Información de contacto.

Estructura Básica del Documento


● <html>: Elemento raíz de una página HTML.
● <head>: Contiene metadatos.
● <title>: Título de la página.
● <meta>: Metadatos de la página.
● <link>: Enlace a recursos externos (CSS, íconos).
● <base>: Define la URL base para todos los enlaces relativos.
Estructura Semántica de la Página
● <header>: Encabezado de página o sección.
● <nav>: Barra de navegación.
● <section>: Sección temática.
● <article>: Artículo o contenido independiente.
● <header> o <footer>: Pie de página.
● <h1> o <h6>: Encabezado del 1 al 6
Listas
● 31. **`<ul>`**: Lista desordenada.
● 32. **`<ol>`**: Lista ordenada.
● 33. **`<li>`**: Elemento de lista.
● 34. **`<dl>`**: Lista de definición.
● 35. **`<dt>`**: Término en una lista de definición.
● 36. **`<dd>`**: Descripción en una lista de definición.

---

### **Enlaces e Imágenes**


● 37. **`<a>`**: Enlace a otra página o recurso.
● 38. **`<img>`**: Imagen.
● 39. **`<map>`**: Mapa de imagen.
● 40. **`<area>`**: Área dentro de un mapa de imagen.
● 41. **`<picture>`**: Contenedor para imágenes responsivas.
● 42. **`<source>`**: Especifica recursos multimedia.

---

### **Tablas**
● 43. **`<table>`**: Tabla de datos.
● 44. **`<tr>`**: Fila en una tabla.
● 45. **`<td>`**: Celda de una tabla.
● 46. **`<th>`**: Encabezado de columna en una tabla.
● 47. **`<caption>`**: Título de una tabla.

---

### **Formularios**
● 48. **`<form>`**: Contenedor para formularios.
● 49. **`<input>`**: Campo de entrada de datos.
● 50. **`<textarea>`**: Área de texto de varias líneas.
● 51. **`<button>`**: Botón interactivo.
● 52. **`<select>`**: Lista desplegable.
● 53. **`<option>`**: Opción dentro de `<select>`.
● 54. **`<label>`**: Etiqueta para campos de formulario.
● 55. **`<fieldset>`**: Agrupa elementos de formulario.
● 56. **`<legend>`**: Título para `<fieldset>`.
● 57. **`<datalist>`**: Lista de opciones predefinidas para `<input>`.

---

### **Multimedia**
● 58. **`<audio>`**: Reproductor de audio.
● 59. **`<video>`**: Reproductor de video.
● 60. **`<track>`**: Pistas de texto en multimedia (subtítulos).
● 61. **`<embed>`**: Inserta recursos externos (ej., Flash).
● 62. **`<object>`**: Contenedor de contenido externo.
● 63. **`<param>`**: Parámetro para `<object>`.

---

### **Elementos Gráficos**


● 64. **`<canvas>`**: Dibujo gráfico interactivo.
● 65. **`<svg>`**: Gráficos vectoriales escalables.
● 66. **`<path>`**: Define un camino en SVG.
● 67. **`<circle>`**: Dibuja un círculo en SVG.
● 68. **`<rect>`**: Dibuja un rectángulo en SVG.
● 69. **`<line>`**: Dibuja una línea en SVG.

---

### **Elementos de Interacción**


● 70. **`<dialog>`**: Cuadro de diálogo o ventana emergente.
● 71. **`<details>`**: Información desplegable.
● 72. **`<summary>`**: Título visible para `<details>`.
● 73. **`<progress>`**: Barra de progreso.
● 74. **`<meter>`**: Indicador de valor dentro de un rango.

---

### **Elementos de Estilo y Formato**


● 75. **`<div>`**: Contenedor genérico en bloque.
● 76. **`<span>`**: Contenedor en línea.
● 77. **`<strong>`**: Texto en negrita (importante).
● 78. **`<em>`**: Texto en cursiva (énfasis).
● 79. **`<b>`**: Texto en negrita.
● 80. **`<i>`**: Texto en cursiva.
● 81. **`<u>`**: Texto subrayado.
● 82. **`<s>`**: Texto tachado.
● 83. **`<small>`**: Texto de menor importancia.
● 84. **`<sub>`**: Texto en subíndice.
● 85. **`<sup>`**: Texto en superíndice.
● 86. **`<mark>`**: Resalta texto.
● 87. **`<code>`**: Fragmento de código.
● 88. **`<pre>`**: Texto con formato predefinido.
● 89. **`<kbd>`**: Entrada del teclado.
● 90. **`<samp>`**: Salida de código.

---

### **Elementos Adicionales


● 91. **`<abbr>`**: Abreviatura.
● 92. **`<acronym>`**: Acrónimo (poco usado en HTML5).
● 93. **`<data>`**: Contenedor de valor legible por máquinas.
● 94. **`<dfn>`**: Define un término.
● 95. **`<noscript>`**: Contenido alternativo si JavaScript está desactivado.
● 96. **`<template>`**: Plantilla de contenido reutilizable.
● 97. **`<slot>`**: Marcador de contenido para `<template>`.
● 98. **`<ins>`**: Texto insertado (subrayado).
● 99. **`<del>`**: Texto eliminado (tachado).
● 100. **`<base>`**: Define la URL base para todos los enlaces relativos.

También podría gustarte