El lenguaje de programacion Html
HTML (HyperText Markup Language) es el lenguaje fundamental para estructurar paginas web. Actua como el esqueleto de un sitio, definiendo la organizacion de los elementos y el contenido, como textos, imagenes, enlaces y formularios.
En esencia, HTML usa etiquetas para indicar como debe mostrarse la informacion. 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).
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).
<frame>
Define un marco en una página (obsoleta).
<frameset>
Agrupa varios <frame> (obsoleta).
<isindex>
Entrada de búsqueda en un documento (obsoleta).
<keygen>
Generación de claves públicas (obsoleta).
<listing>
Para listar contenido (obsoleta).
<marquee>
Texto en movimiento (obsoleta).
<menuitem>
Elemento dentro de <menu> (obsoleta).
<multicol>
Soporte para múltiples columnas (obsoleta).
<nobr>
Evita el salto de línea en el texto (obsoleta).
<plaintext>
Muestra texto sin formato (obsoleta).
<shadow>
Define contenido dentro de Shadow DOM (obsoleta).
<spacer>
Espaciador visual (obsoleta).
<strike>
Texto tachado (obsoleta).
<tt>
Texto en estilo teletipo (obsoleta).
<xmp>
Muestra código sin procesar (obsoleta).