HTML (HyperText Markup Language) es el lenguaje fundamental para estructurar páginas web. Actúa como el esqueleto de un sitio, definiendo la organización de los elementos y el contenido, como textos, imágenes, enlaces y formularios.
En esencia, HTML usa etiquetas para indicar como debe mostrarse la información. HTML (HyperText Markup Language) es el lenguaje estándar utilizado para crear y estructurar páginas web.
No es un lenguaje de programación en el sentido estricto (como Python o JavaScript), sino un lenguaje de marcado. Esto significa que se utiliza para etiquetar y organizar el contenido de una página.
Algunas etiquetas basicas incluyen:
<p> : Para parrafos de texto.
<h1> a <h6> : Para encabezados de distintos Tamaños.
<a> : Para enlaces.
<img> : Para imagenes.
<table> : Para tablas.
Por sí solo, HTML no define estilos visuales o comportamientos interactivos. Para eso, se combina con CSS (para diseño y apariencia) y JavaScript (para dinamismo y funcionalidad).
Características principales:
Estructura: HTML define la estructura básica de una web (encabezados, párrafos, listas, enlaces, imágenes, etc.).
Etiquetas: Usa etiquetas (tags), como <p> para párrafos o <a> para enlaces, que encierran el contenido.
Jerarquía: Los elementos se anidan unos dentro de otros para crear una estructura lógica y visual.
Colaboración con otros lenguajes: Se combina comúnmente con CSS para estilos y con JavaScript para funcionalidad.
Estructura General
<html> - Define el documento Html
<head> - Contiene metadatos y enlaces
<title> - Título de la página
<body> - Contenido visible
Texto y Formato
<h1> a <h6> - Encabezados
<p> - Párrafo
<br> - Salto de línea
<hr> - Línea horizontal
<b> - Negrita
<i> - Cursiva
<u> - Subrayado
<strong> - Texto importante
<em> - Texto enfatizado
<small> - Texto más pequeño
<mark> - Texto resaltado
<del> - Texto tachado
<ins> - Texto insertado
<blockquote> - Bloque de cita
<cite> - Fuente de una cita
<code> - Código fuente
<pre> - Texto preformateado
<sup> - Superíndice
<sub> - Subíndice
<abbr> - Abreviatura
<dfn> - Definición de término
<kbd> - Entrada de teclado
<samp> - Salida de programa
Listas
<ul> - Lista desordenada
<ol> - Lista ordenada
<li> - Elemento de lista
<dl> - Lista de definiciones
<dt> - Término de la lista
<dd> - Descripción del término
Enlaces e Imágenes
<a> - Enlace
<img> - Imagen
<map> - Mapa de imágenes
<area> - Área dentro del mapa
<figure> - Contenedor de imagen
<figcaption> - Pie de imagen
Tablas
<table> - Tabla
<tr> - Fila de tabla
<td> - Celda de tabla
<th> - Celda de encabezado
<thead> - Encabezado de tabla
<tbody> - Cuerpo de tabla
<tfoot> - Pie de tabla
<col> - Columna
<colgroup> - Grupo de columnas
Formularios e Interacción
<form> - Formulario
<input> - Campo de entrada
<textarea> - Área de texto
<button> - Botón
<select> - Menú desplegable
<option> - Opción dentro de un <select>
<optgroup> - Grupo de opciones
<label> - Etiqueta de formulario
<fieldset> - Grupo de campos
<legend> - Título de <fieldset>
<output> - Salida de datos
Etiquetas Semánticas
<header> - Encabezado
<nav> - Sección de navegación
<main> - Contenido principal
<section> - Sección
<article> - Artículo
<aside> - Contenido complementario
<footer> - Pie de página
<address> - Información de contacto
<a>
Enlace
<abbr>
Representa una abreviatura o acrónimo
<abbr title>
Atributo en <abbr> para definir una descripción del acrónimo al pasar el cursor
<acronym>
Usada para acrónimos (obsoleta, reemplazada por <abbr>)
<address>
Contiene información de contacto
<alt>
Atributo en <img> para texto alternativo de imágenes
<anchor>
No existe como etiqueta en HTML, pero <a> funciona como un ancla en páginas web
<area>
Define una región dentro de un mapa de imagen
<article>
Contenedor de contenido independiente
<aside>
Sección lateral o complementaria
<async>
Atributo en <script> que controla la carga asíncrona de scripts
<audio>
Elemento para reproducir audio
<audio controls>
Atributo en <audio> que agrega controles de reproducción
<autocomplete>
Atributo que configura el autocompletado en formularios
<aria-label>
Atributo en accesibilidad que describe elementos
<b>
Texto en negrita
<base>
Define la URL base para todas las URL relativas
<bdi>
Aisla texto para soportar diferentes direcciones de escritura
<bdo>
Cambia la dirección de texto
<blockquote>
Cita en bloque
<body>
Cuerpo del documento HTML
<br>
Salto de línea
<button>
Botón interactivo
<button type>
Define el tipo de botón (submit, reset, button)
<canvas>
Área para gráficos mediante JavaScript
<canvas height>
Atributo para definir la altura del área gráfica
<canvas width>
Atributo para definir el ancho del área gráfica
<caption>
Título de tabla
<cite>
Referencia a una fuente de información
<code>
Bloque de código
<col>
Define una columna en una tabla
<colgroup>
Agrupa columnas en una tabla
<data>
Asociar datos con su contenido
<datalist>
Lista de opciones predefinidas para un campo de entrada
<data value>
Atributo para representar datos asociados
<dd>
Define una descripción en una lista de definiciones
<del>
Texto tachado
<details>
Sección de detalles expandible
<dfn>
Define un término
<dialog>
Define un cuadro de diálogo o ventana emergente
<dialog open>
Atributo para definir si el diálogo está visible
<div>
División de contenido
<dl>
Lista de definiciones
<dt>
Término de una lista de definiciones
<em>
Texto enfatizado (generalmente en cursiva)
<embed>
Para incrustar contenido multimedia
<fieldset>
Agrupa elementos de un formulario
<fieldset disabled>
Desactiva todos los campos dentro del conjunto
<figcaption>
Pie de imagen dentro de <figure>
<figure>
Contenedor para imágenes, gráficos o ilustraciones
<footer>
Pie de página
<form>
Formulario interactivo
<h1>
Encabezado de nivel 1
<header>
Encabezado de una sección o documento
<hgroup>
Agrupación de encabezados
<hr>
Línea horizontal
<iframe>
Marco en línea para incrustar contenido externo
<img>
Imagen
<image>
Similar a , pero para elementos de imagen más avanzados.
<input>
Campo de entrada de datos
<ins>
Texto insertado
<kbd>
Representa entrada de teclado
<label>
Etiqueta para campos de formulario
<legend>
Título de un <fieldset>
<main>
Contenido principal del documento
<map>
Define un mapa de imagen
<mark>
Texto resaltado
<meta>
Define metadatos del documento
<nav>
Sección de navegación
<noscript>
Define contenido alternativo cuando JavaScript está deshabilitado
<optgroup>
Agrupa opciones dentro de un <select>
<option>
Define una opción en un menú desplegable
<output>
Muestra resultados de cálculos
<progress>
Barra de progreso
<rb>
Componente de anotaciones en Ruby.
<rtc>
Texto de anotación en Ruby.
<s>
Texto tachado
<samp>
Representa salida de un programa o sistema
<section>
Sección genérica de contenido
<slot>
Elemento de distribución de contenido en Web Components.
<small>
Texto más pequeño
<span>
Contenedor en línea
<table>
Tabla
<ul>
Lista desordenada
<video>
Elemento para reproducir videos
<i>
Texto en cursiva
<image>
Similar a <img>, pero para elementos de imagen más avanzados
<link rel="stylesheet">
Vincula una hoja de estilos externa
<menu>
Define un menú de comandos
<meter>
Representa una medición escalar
<object>
Para incrustar objetos externos
<param>
Parámetro dentro de <object>
<picture>
Contenedor de imágenes con diferentes fuentes
<q>
Cita corta dentro del texto
<rb>
Componente de anotaciones en Ruby
<rtc>
Texto de anotación en Ruby
<slot>
Elemento de distribución de contenido en Web Components
<source>
Define fuentes alternativas para <video> o <audio>
<summary>
Texto visible dentro de <details>
<template>
Define contenido reutilizable en HTML
<track>
Define subtítulos en <video>
<var>
Representa una variable matemática
Obsoletas o sustituidas
<align>
Se utilizaba para alinear contenido (obsoleta, sustituida por CSS)
<applet>
Solía incrustar mini aplicaciones Java (obsoleta)
<big>
Texto m´s grande (obsoleta).
<bgsound>
Reproduce sonido de fondo automáticamente (obsoleta).
<blink>
Hace parpadear el texto (obsoleta).
<center>
Centra el contenido (obsoleta, sustituida por CSS).
<command>
Representa un comando interactivo (obsoleta)
<content>
Define contenido en Web Components (obsoleta).
<dir>
Lista de directorio (obsoleta).
<font>
Define fuentes en HTML (obsoleta, sustituida por CSS).
