Estructura y Evolución Fundamental del Lenguaje HTML
Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones
Escrito el en 
español con un tamaño de 7,98 KB
Evolución del Lenguaje HTML
La trayectoria de **HTML** (HyperText Markup Language) es fundamental para comprender la web moderna. A continuación, se detalla su desarrollo cronológico:
- 1991: **Tim Berners-Lee** diseña el primer concepto de HTML con el objetivo de compartir documentos científicos.
- 1992: Surge **HTML 1.1**, considerada la primera versión funcional.
- 1995: Llega **HTML 2.0**, introduciendo mejoras significativas como los **formularios** y una estructura más definida.
- 1997: Aparece **HTML 3.2**, que añade soporte para **tablas** y **scripts**. Ese mismo año, se publica **HTML 4.0**, introduciendo las **hojas de estilo (CSS)**.
- 1999: Se publica **HTML 4.1**, enfocada en mejorar la compatibilidad entre navegadores.
- 2000: Surge **XHTML**, una versión basada en **XML** que impone reglas de sintaxis mucho más estrictas.
- 2014: Se lanza **HTML 5.0**, una revisión mayor que incluye **soporte nativo para video, audio y gráficos** (mediante Canvas y SVG).
- 2016 y 2017: Llegan **HTML 5.1** y **HTML 5.2**, enfocadas en refinar las **etiquetas semánticas** y mejorar la **accesibilidad**.
Atributos Globales de HTML
Los **atributos globales** son aquellos que pueden aplicarse a casi cualquier etiqueta HTML, definiendo estilo, idioma o comportamiento general de un elemento.
- Diseño y Programación:
class,id,style. - Idioma y Revisión:
lang,translate,spellcheck. - Navegación y Edición:
tabindex,title,contenteditable.
Metadatos en el Encabezado (<head>)
Los metadatos proveen información esencial al navegador y a los motores de búsqueda sobre la página, sin ser visibles directamente en el contenido principal.
- Codificación:
charset(define la codificación, siendo **UTF-8** el estándar). - Directivas HTTP:
http-equiv(establece directivas de caché o refresco). - Descripción: La combinación de
nameycontentse usa para describir metadatos como el autor o la descripción de la página.
Tipos de Elementos en el Cuerpo (<body>)
Los elementos en el cuerpo del documento se clasifican principalmente por cómo afectan el flujo del texto:
Elementos de Bloque
Ocupan todo el ancho disponible y generan un salto de línea antes y después de sí mismos. Se utilizan para **estructurar el contenido**.
Ejemplos de Estructura Semántica:
<article>,<section>,<aside>,<header>,<footer>.
Otros Contenedores y Divisiones:
<div>,<figure>,<blockquote>,<dialog>.
Listas y Texto Estructurado:
- Listas:
<ol>(ordenada),<ul>(desordenada),<li>(elemento de lista). - Texto:
<p>(párrafo),<pre>(texto preformateado),<hr>(línea horizontal).
Elementos de Línea (En Línea)
Solo ocupan el espacio necesario para su contenido y **no generan saltos de línea**, permitiendo que otros elementos se ubiquen a su lado.
Formato de Texto:
<b>(negrita),<i>(cursiva),<em>(énfasis),<strong>(importancia fuerte),<mark>(resaltado).
Enlaces y Citas:
<a>(hipervínculo),<abbr>(abreviatura),<q>(cita corta),<cite>(referencia de obra).
Código y Fórmulas:
<code>,<kbd>(entrada de teclado),<var>(variable),<sub>(subíndice),<sup>(superíndice).
Contenido Incrustado (Multimedia y Objetos)
Estos elementos permiten la inclusión de recursos externos dentro del documento HTML.
- Multimedia:
<img>(imagen),<audio>,<video>,<track>(para subtítulos). - Integración Externa:
<embed>,<iframe>(para incrustar otra página),<object>,<source>.
Tablas para Organización de Datos
Las tablas estructuran información en filas y columnas. La estructura básica incluye:
- Contenedor principal:
<table>. - Estructura lógica:
<thead>(encabezado),<tbody>(cuerpo),<tfoot>(pie). - Filas y Celdas:
<tr>(fila),<th>(celda de encabezado),<td>(celda de datos). - Adicionales:
<caption>(título de la tabla) y<col>/<colgroup>(definición de estilos de columna).
Formularios para Interacción del Usuario
Los formularios permiten la **captura y envío de datos** al servidor.
Elementos Principales:
Se construyen con <form>, <label>, <input>, <textarea> y <select>.
Tipos Comunes de <input>:
- Texto:
text,password,email,file,date. - Selección:
radio,checkbox. - Acción:
submit.
Validación de Formularios:
Se utilizan atributos como required, min, max, pattern y maxlength para asegurar la **calidad de los datos** ingresados.
Gráficos y Mapas Interactivos
- Gráficos Vectoriales:
<svg>permite crear gráficos escalables basados en vectores. - Dibujo Dinámico:
<canvas>habilita la creación de dibujos dinámicos mediante JavaScript. - Imágenes Interactivas:
<map>y<area>definen **zonas clicables** específicas dentro de una imagen.
Diferencias Clave: HTML vs. XHTML
Mientras que **HTML permite más flexibilidad** en su sintaxis, **XHTML exige reglas estrictas** heredadas de XML, lo que lo hace más riguroso pero potencialmente más compatible con otros parsers.
Reglas Estrictas de XHTML:
- Todos los elementos deben cerrarse, incluidos los vacíos (ej.
<br />). - Los atributos deben ir entre comillas y siempre deben tener un valor definido.
- Los elementos deben estar correctamente anidados.
- Se distingue entre **mayúsculas y minúsculas** (sensibilidad a mayúsculas/minúsculas).
Herramientas del Ecosistema Web
Navegadores Web Populares:
Chrome, Opera, Safari, Firefox, Edge, Explorer.
Editores de Texto y Código:
Notepad, TextEdit, **VS Code**, Atom, Brackets, Sublime, UltraEdit, Notepad++.
Aceleradores de Escritura:
Emmet acelera la escritura HTML mediante abreviaciones (ejemplo: ol>li.reserva*3 genera una lista ordenada con tres ítems).
Editores Visuales (WYSIWYG):
No requieren conocimiento profundo de HTML. Ejemplos: Dreamweaver, BlueGriffon, HTML-Notepad.