Introducción al Lenguaje de Programación HTML

El HTML es el lenguaje de marcado para crear páginas web y aplicaciones web. Este simboliza el lenguaje de marcado de hipertexto (cualquier idioma de texto superior). Se utiliza con CSS y JavaScript para crear páginas web interactivas. Los navegadores web reciben y muestran documentos HTML desde un servidor web o sistema de archivos, y la función de HTML es describir estructuralmente la estructura de las páginas web.

Los elementos en HTML son los bloques de construcción básicos de los documentos de lenguaje HTML , con los que podemos agregar imágenes y objetos interactivos como formularios o archivos de video y audio. También puede crear documentos estructurados mediante el uso de etiquetas para marcar párrafos, encabezados, enlaces, citas, tablas y mucho más. HTML puede incluir programas escritos en lenguajes como JavaScript para modificar el comportamiento y el contenido de las páginas web.

Estructura del Documento HTML

Las páginas en lenguaje HTML se componen de elementos, generalmente una etiqueta de inicio y una etiqueta de finalización, generalmente con contenido de texto en el medio. Podemos poner en la etiqueta de inicio algunas propiedades que cambian el comportamiento del elemento o conducen a su ajuste. Tenga en cuenta que algunos elementos pueden ramificarse entre sí. Las divisiones básicas de elementos son:

Etiqueta de inicio: contiene el nombre del elemento, encerrado entre corchetes angulares, y el nombre puede ir seguido de las propiedades que lo afectan. Igual que <p>.
Etiqueta de finalización: también contiene el nombre del elemento precedido por una barra inclinada para indicar el final del elemento. Tenga en cuenta que olvidar la etiqueta de cierre a veces puede provocar errores, así que tenga cuidado y recuérdese. Por ejemplo: <‎/p>.
Contenido: se encuentra entre las etiquetas de inicio y final, y la mayoría de las veces representa el contenido del elemento.
Elemento: es la etiqueta de inicio y finalización además del contenido.

____ la etiqueta inicial _____ la etiqueta final 
 <p> contenido del párrafo </p>

Los elementos pueden contener propiedades, y estas propiedades son algunas opcionales y otras obligatorias, y hay propiedades llamadas propiedades globales que se pueden usar en todos los elementos. En la mayoría de los casos, una propiedad consta del nombre de la propiedad y un valor que le sigue.

_____ la etiqueta inicial _____ la etiqueta final 
<p class = "light"> contenido del párrafo </p>
| Contenido del elemento | Propiedades |

El siguiente ejemplo comienza declarando el DOCTYPE de la versión HTML5 y luego define el elemento raíz <html> que indica el inicio del documento en lenguaje HTML. El elemento <html> tiene dos elementos que son elemento <head> y <body>. El elemento <head>contiene los metadatos que describen el documento, como el elemento <title> que establece el título de la página.

El elemento <meta> es el que establece el conjunto de caracteres del documento aquí, el elemento <link> hace referencia al documento CSS y el elemento <script> hace referencia al código JavaScript. En cuanto al elemento, <body> representa el contenido de la página en sí, como imágenes (el elemento <img>), párrafos (el elemento <p>), etc. Observe cómo cada sección del documento termina con las etiquetas de cierre adecuadas.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <link href="style.css" rel="stylesheet">
    <script src="javascript.js"></script>
  </head>
  <body>
    <img src="images/hello.png" alt="Hello">
    <p>Hello World!</p>
  </body>
</html>

Esta guía está organizada asignando una página a cada elemento del lenguaje HTML. Es decir, puede visitar la página HTML/nombre de etiqueta para obtener información sobre el elemento <tagname>. Para obtener información sobre el elemento <img> visitamos la página HTML/img, y para conocer los detalles del elemento <table> visitamos la página HTML/tabla.

En cuanto a los campos del formulario, se encuentran dentro de las subpáginas de la página HTML/entrada (por ejemplo, la página HTML/entrada/correo electrónico del campo <input type="email"‎>). Esta página contiene una lista de elementos en lenguaje HTML, organizados por función para que le resulte más fácil obtener lo que desea.

Elemento Raíz

Elemento	Descripción
`<html>`	Representación del elemento principal en documentos HTML, a veces denominado «elemento raíz». Todos los demás elementos del documento deben ser descendientes (descendientes, es decir, hijos directos e indirectos) del mismo.

Metadatos

Los metadatos contienen información sobre la página, que incluye información sobre estilos, scripts y datos de ayuda para el software (como motores de búsqueda, navegadores, etc.) que usan o ven la página.

Elementos	Descripción
`<base>`	Defina una base de URL para todas las URL relativas del documento. No se puede utilizar más de un elemento `<base>` en el documento.
`<head>`	Proporcione información general sobre el documento (es decir, metadatos), incluido el título del documento y enlaces a sus scripts y hojas de estilo.
`<link>`	Definir las relaciones entre el documento actual y un recurso externo. Uno de los usos de esta etiqueta incluye definir una relación entre las páginas para navegar entre ellas, pero el uso más común de este elemento es incluir hojas de estilo.
`<meta>`	Representación de metadatos que no puede ser representado usando relacionados con metadatos elementos HTML tales como `<base>`, `<link>`, `<script>`, `<style>` o `<title>`.
`<style>`	El elemento contiene `<style>` información sobre el formato del documento o parte de él. Dentro de este elemento contiene la información de formato que se esperaría en CSS.
`<title>`	Defina el título del documento, que aparece en la barra de direcciones del navegador o en la pestaña de la página, y este elemento solo puede contener texto, y se ignorarán las etiquetas que contenga.

Elementos Seccionales

Los elementos seccionales nos permiten organizar y dividir el contenido del documento en secciones lógicas. Estos elementos se utilizan para crear un diseño de página jerárquico, incluidos los elementos de encabezado, pie de página y encabezado de página.

Elementos	Descripción
`<body>`	Representa el contenido de un documento en lenguaje HTML y no puede haber más de `<body>` un elemento en el documento.
`<address>`	Proporcione información de comunicación al contenido del elemento más antiguo `<article>` o un `<body>` padre, y si proporcionará información para el elemento `<body>` AB Vst Bak información en todo el documento.
`<article>`	Representa una parte de un documento, página, aplicación o sitio web que está destinado a ser redistribuido y utilizado de forma independiente, como un tema de foro, artículo de periódico o publicación de blog.
`<aside>`	Representa una parte de un documento cuyo contenido está relacionado de alguna manera con el contenido principal del documento (generalmente un elemento representado como una barra lateral).
`<footer>`	Una representación de pie de página del elemento de sección más cercano o del documento completo. El pie de página generalmente contiene información sobre el autor del contenido, información de derechos de autor o enlaces a documentos útiles.
`<h1-h6>`	Los elementos representan `<h1>‏-<h6>` seis niveles de encabezados de sección, siendo el elemento el `<h1>` nivel más alto y el elemento el `<h6>` más bajo.
`<header>`	Un elemento incluye un `<header>` conjunto de elementos introductorios o de navegación, un tiempo que contiene algunos elementos de encabezado u otros elementos como el logotipo de un sitio o un formulario de búsqueda, etc.
`<nav>`	Representa una sección de una página cuyo propósito es proporcionar enlaces para la navegación, ya sea dentro del propio documento o hacia otros documentos.Los ejemplos más comunes son listas, tablas de contenido e índices.
`<section>`	Representa una sección separada que tiene su propia función dentro de un documento HTML, generalmente con un encabezado, y esta sección no tiene una etiqueta especial que pueda representar.

Contenido de Texto

Los elementos de contenido de texto se utilizan para organizar partes del contenido en un elemento <body>y son útiles para definir el propósito del contenido dentro de ellos, lo cual es útil para indexar la página o aumentar su accesibilidad.

Elementos	Descripción
`<blockquote>`	El elemento `<blockquote>` (el nombre de este elemento es una abreviatura del Elemento de cotización en bloque HTML ) indica que el texto que contiene es una cita larga. Este elemento generalmente se muestra con una alineación agregada antes (consulte la sección Notas de este artículo para saber cómo cambiar la vista). La URL de la fuente de la cita se puede proporcionar a través de la propiedad `cite` y la representación textual de la fuente se puede colocar dentro del elemento `<cite>`.
`<dd>`	Consulte una explicación de un término en la lista de descripción, es decir, el artículo `<dl>`.
`<div>`	Un elemento `<div>` es un contenedor genérico de contenido que no es específico, que se puede usar para agrupar elementos con fines tales como formatear (usando las propiedades `class` o `id`), crear una nueva sección en el documento en otro idioma (usando la propiedad `lang`), y así sobre.
`<dl>`	Representación de una lista de descripción Este elemento contiene y explica un conjunto de términos. Este elemento se usa generalmente en diccionarios o glosarios, o para mostrar metadatos (una lista de pares clave-valor).
`<dt>`	Al definir un término en una lista de descripción, este elemento debe ser un elemento secundario del elemento `<dl>`, generalmente seguido de un elemento `<dd>`. Sin embargo, si se dan varios elementos `<dt>` seguidos, se definen varios términos que se explicarán en el `<dd>` siguiente elemento.
`<figcaption>`	Representación de un signo o explicación relacionada con una imagen, dibujo u otro que se pueda describir a través del elemento `<figure>` que debe ser el padre directo de este elemento.
`<figure>`	Una representación autónoma de contenido, generalmente utilizada con un banner (a través del elemento `<figcaption>`), y generalmente denota una unidad indivisible de información.
`<hr>`	Representar una ruptura temática entre párrafos (por ejemplo, un cambio de escena en una historia o un cambio de tema mediante la creación de una nueva sección). En versiones anteriores de HTML, este elemento se mostraba como una línea horizontal y todavía se muestra en los navegadores, pero tiene un significado estructural, en lugar de solo un elemento formal.
`<li>`	Para representar un elemento en una lista, ese elemento debe estar contenido en un elemento AB que sea una `<ol>` lista ordenada, una `<ul>` lista desordenada o una lista `<menu>`. Los elementos de las `<menu>` listas regulares y las listas desordenadas se muestran precedidos por una viñeta, mientras que en las listas ordenadas sus elementos se muestran en orden ascendente y precedidos por un número o letra que indica su orden.
`<main>`	Representación del contenido principal del cuerpo de un documento (objeto `<body>`) o parte de un documento o aplicación. El área de contenido principal incluye todo el contenido que está directamente relacionado con el tema del documento, se agrega al tema del documento o representa la funcionalidad principal de la aplicación.
`<ol>`	Representación de una lista ordenada de elementos, mostrada como una lista numerada.
`<p>`	El elemento representa un `<p>` párrafo de texto y los párrafos generalmente se representan como secciones de texto separadas por un espacio vertical o por alineación de primera línea.
`<pre>`	El elemento representa `<pre>`texto preformateado, el texto dentro de este elemento se representa en una fuente monoespaciada exactamente como está escrito en el archivo de origen, y los espacios se muestran como están.
`<ul>`	Representación de una lista desordenada de elementos, normalmente mostrada como una lista con viñetas.

Elementos de Texto

Los elementos de texto se utilizan para dar significado, estructura o formato a una palabra, línea u otro texto.

Elementos	Descripción
`<a>`	El elemento `<a>` (una abreviatura de ancla) crea un hipervínculo a otras páginas web, archivos, la sección de la página actual o direcciones de correo electrónico.
`<abbr>`	Representa una abreviatura y proporciona una explicación. Al agregar la explicación, la propiedad debe contener `title` la explicación completa de esa abreviatura solamente y no se permite ningún otro valor.
`<b>`	Representación de texto cuyo formato es diferente al del texto plano, sin importancia ni prioridad sobre el resto del texto, y generalmente se muestra en negrita.
`<bdi>`	El elemento `<bdi>` (abreviatura de aislamiento bidireccional ) aísla una parte del texto que puede formatearse en una dirección de texto (es decir, una dirección de texto de derecha a izquierda como árabe, o de izquierda a derecha como latín) del texto alrededor eso. Este elemento es útil cuando se incrusta texto cuya dirección no se conoce, como incrustar texto de una base de datos, en texto que tiene una dirección de texto específica.
`<bdo>`	El elemento `<bdo>` (acrónimo de anulación bidireccional ) anula la orientación del texto actual y utiliza una orientación predefinida.
`<br>`	Se mueve a una nueva línea, útil al escribir un poema o un título, donde los saltos de línea son importantes.
`<cite>`	Una representación de referencia de una obra creativa, que debe incluir el título o URL de la obra, y su contenido puede ser breve, dependiendo del tipo de referencia a la que se refiera.
`<code>`	Una representación de un fragmento de código, renderizado de forma predeterminada utilizando la fuente de ancho fijo utilizada por el navegador.
`<data>`	El elemento asocia el `<data>` contenido del elemento con un valor fácil de leer mediante programación.Si el contenido está relacionado con la hora o la fecha, entonces `<time>`.
`<dfn>`	Representa una definición de un término la primera vez que se usa.
`<em>`	El elemento le da un `<em>` énfasis al texto que contiene, y el elemento se puede ramificar `<em>` (usando más de un elemento `<em>` entre sí) y cada nivel de ramificación le da más énfasis al texto.
`<i>`	La representación de una parte del texto debe distinguirse del resto del texto por algún motivo, como términos técnicos, frases escritas en un idioma extranjero, expresiones faciales de un personaje en una obra de teatro, etc. Este elemento generalmente se muestra en cursiva.
`<kbd>`	Representa la entrada del usuario y muestra el texto en la fuente predeterminada de ancho fijo que utiliza el navegador.
`<mark>`	El elemento se utiliza `<mark>` para resaltar (resaltar) una parte del texto con el fin de hacer referencia a él porque tiene importancia en un contexto particular. Por ejemplo, se puede utilizar para marcar cada vez que aparece una palabra clave en el término de búsqueda en la página de resultados.
`<q>`	Indique que el texto que contiene representa una cita corta. Este elemento se utiliza para citas que no necesitan un párrafo completo. Para citas largas, utilice el elemento `<blockquote>`.
`<s>`	El elemento `<s>` muestra texto y tachado. Utilice el elemento `<s>` para representar texto que ya no es relevante o que ya no es exacto. Pero el elemento `<s>` no es apropiado para indicar modificaciones hechas al documento, para esas modificaciones use `<del>` y `<ins>`.
`<samp>`	El propósito de un elemento `<samp>` es mostrar una parte de la salida de un programa de computadora, y el contenido de ese elemento generalmente se muestra en una fuente de ancho fijo (monoespacio).
`<small>`	Element lleva `<small>` a reducir el tamaño de fuente en un grado (por ejemplo , de `large` a `medium` o `small` a `x-small`) hasta el tamaño de fuente más bajo disponible en su navegador. Este elemento se ha vuelto de importancia normativa en HTML5, ya que representa notas al margen o texto que normalmente se imprime en letra pequeña, como derechos de autor o texto legal, y este uso normativo es independiente de la forma en que se muestra el elemento.
`<span>`	Un elemento `<span>` es un contenedor inline genérico, que no representa un tipo específico de contenido, y se puede utilizar para agrupar elementos para formatear (ya sea usando el `id` o atributo `class`) o porque los elementos comparten una propiedad tal como una `lang`.
`<strong>`	El elemento le da peso al `<strong>` texto que contiene, y el texto generalmente se muestra en negrita.
`<sub>`	Representa una parte del texto que debe mostrarse en un nivel inferior (y a menudo más pequeño) que el nivel principal del texto.
`<sup>`	Representa una parte del texto que debe mostrarse en un nivel más alto (y a menudo más pequeño) que el nivel principal del texto.
`<time>`	Representa la hora de 24 horas o la fecha exacta usando el calendario gregoriano (opcionalmente se puede agregar información de hora o zona horaria).
`<u>`	El elemento se utiliza `<u>` para mostrar texto con una línea horizontal debajo de la línea de base de su contenido. En HTML5, este elemento es una parte de texto a la que se hace referencia aplicando un efecto explícito, pero ese efecto no es texto y está desmarcado, o para indicar que el texto está mal escrito.
`<var>`	Representar una variable en una expresión matemática o en un código de programación.
`<wbr>`	El elemento define un `<wbr>` punto de ruptura para la sección de línea cuando es necesario, donde el nombre de este elemento significa Word Break Opportunity. Es decir, el navegador puede romper la línea en esa posición aunque las reglas de la sección de línea no permitan que se abra una nueva línea. Ser creado en esa posición.

Multimedia

HTML admite la incrustación de multimedia como imágenes, audio y video.

Elementos	Descripción
`<area>`	Define una región en un mapa de imagen, y esa región puede (opcionalmente) asociarse con un supervínculo. Este elemento solo se puede utilizar dentro de un elemento `<map>`.
`<audio>`	Incruste contenido de audio en documentos, y puede contener uno o más archivos de origen que se representan mediante la propiedad `src` o mediante el elemento `<source>`, y el navegador elegirá los archivos de audio más apropiados para reproducir.
`<img>`	Representa una imagen en el documento.
`<map>`	El elemento se utiliza `<map>` con un elemento `<area>` para definir un mapa de la imagen (es decir, un área de la imagen en la que se puede hacer clic).
`<track>`	El elemento se usa `<track>` dentro del elemento `<audio>` o y le `<video>` permite usar rutas de texto temporales, como subtítulos para videos. Estos clips están en formato WebVTT (y sus archivos tienen la extensión de .`vtt` cualquier pista de texto de vídeo web).
`<video>`	Incruste contenido de audio en documentos, y puede contener uno o más archivos de origen que se representan mediante la propiedad `src` o mediante el elemento `<source>`, y el navegador elegirá el formato más apropiado para reproducirlo.

Incluir Contenido

Además de multimedia, se pueden incluir varios tipos de contenido en documentos HTML, incluso si no siempre es fácil trabajar con ese contenido.

Elementos	Descripción
`<embed>`	El elemento es `<embed>` un punto de inserción para una aplicación externa o contenido interactivo (es decir, un complemento).
`<object>`	El elemento representa `<object>` un recurso externo, que puede tratarse como una imagen o como un recurso que será procesado por una extensión externa.
`<param>`	El elemento define los `<param>` parámetros del elemento `<object>`.
`<source>`	El elemento especifica `<source>` múltiples fuentes de archivos multimedia dentro del elemento `<picture>`, <audio> o `<video>`. Este elemento está vacío, y su uso más común es proporcionar el mismo contenido multimedia en diferentes formatos para que el navegador pueda reproducir el más adecuado.
`<picture>`	Un elemento es un `<picture>` contenedor que se utiliza para seleccionar múltiples fuentes a través de un elemento `<source>` para una imagen `<img>` contenida en él. El navegador elegirá la fuente de imagen más adecuada según el diseño de la página (es decir, el cuadro en el que se encuentra este elemento) y el dispositivo en el que se mostrará la imagen (normal o alta resolución).

Contenido

Para crear contenido interactivo en aplicaciones web, HTML admite el uso de lenguajes de secuencias de comandos, especialmente JavaScript, y hay varios elementos disponibles para admitir esta capacidad.

Elementos	Descripción
`<canvas>`	Utilice el elemento `<canvas>` con su API para dibujar y animar gráficos.
`<noscript>`	El elemento define `<noscript>` una sección de HTML que se agregará a la página si el elemento no es `<script>` compatible con el navegador o si el usuario deshabilita el uso de JavaScript.
`<script>`	Incluya o consulte un script ejecutable.

Ajustes

Estos elementos nos permiten indicar que se ha modificado una parte del texto.

Elementos	Descripción
`<del>`	Representa texto que se ha eliminado del documento. Este texto generalmente se muestra tachado, pero no es obligatorio.
`<ins>`	Representación del texto agregado al documento Este texto generalmente se muestra y está subrayado, pero no es obligatorio.

Tablas

Estos elementos se utilizan para crear y trabajar con datos tabulares.

Elementos	Descripción
`<caption>`	Representa el título de la tabla, aunque debe ser el primer hijo del elemento `<table>` pero con CSS se puede colocar en cualquier lugar relativo a la tabla.
`<col>`	Define una columna dentro de una tabla, que se utiliza para dar una estructura organizativa a celdas similares y está contenida dentro de un elemento `<colgroup>`.
`<colgroup>`	Defina un conjunto de columnas dentro de una tabla.
`<table>`	Una representación de datos tabulares, es decir, información que se expresa a través de una tabla bidimensional.
`<tbody>`	`<tbody>` Un elemento agrupa uno `<tr>` o más elementos como el cuerpo del elemento `<table>`.
`<td>`	Defina una celda en la tabla que lo contiene.
`<tfoot>`	Defina un conjunto de líneas que resuman las columnas del elemento `<table>`.
`<th>`	Defina una celda que representa un encabezado en la tabla que lo contiene. La naturaleza de este encabezado está definida por las dos propiedades `scope` y `headers`.
`<thead>`	Defina un conjunto de líneas que representen el encabezado de las columnas del elemento `<table>`.
`<tr>`	Defina una línea que contenga celdas en una tabla, y esas celdas están representadas por los elementos `<td>` y `<th>`.

Modelos

HTML proporciona una serie de elementos que se pueden integrar para crear formularios que los usuarios pueden completar y enviar a un servidor web para su procesamiento.

Elementos	Descripción
`<button>`	El artículo representa un `<button>` botón que se puede presionar.
`<datalist>`	El elemento contiene `<datalist>` elementos `<option>` que representan los valores disponibles para otros elementos del formulario.
`<fieldset>`	Agrupar varios elementos y pancartas ( `<label>`) dentro de un formulario en un documento HTML. Esto hace que sus formularios sean más fáciles de usar y más claros.
`<form>`	Representación de una sección en el documento que contiene elementos con los que el usuario puede interactuar para enviar datos al servidor web.
`<input>`	El elemento se utiliza `<input>` para crear elementos interactivos para formularios en páginas web que aceptan datos del usuario y luego los envían al servidor.
`<label>`	Una representación de título de un elemento de un formulario.
`<legend>`	Una representación del título de `<fieldset>` su elemento padre.
`<meter>`	El elemento representa `<meter>` un valor numérico dentro de un rango determinado o un valor fraccionario.
`<optgroup>`	Crea un grupo de opciones dentro del elemento `<select>`.
`<option>`	Defina un elemento de contenido dentro del elemento `<select>` o `<optgroup>` o `<datalist>`. Por lo tanto, el elemento se puede utilizar `<option>` para representar elementos de lista en varios tipos de listas en un documento HTML.
`<output>`	Representa el resultado de una operación aritmética o una de las acciones del usuario.
`<progress>`	Representa el progreso de completar una tarea, generalmente se muestra como una barra de progreso.
`<select>`	Representación de un elemento de formulario que proporciona una lista de opciones.
`<textarea>`	Representación de un elemento de formulario que proporciona un cuadro de texto de varias líneas editable.

Elementos Interactivos

HTML proporciona un conjunto de elementos que ayudan a crear elementos interactivos con los que el usuario puede interactuar.

Elementos	Descripción
`<details>`	El elemento se utiliza `<details>` para mostrar información adicional al usuario que puede mostrar y ocultar cuando lo desee. Se puede colocar cualquier tipo de contenido dentro del elemento `<details>`, y su contenido está oculto de forma predeterminada (a menos que se establezca la propiedad `open`).
`<summary>`	Un elemento se utiliza `<summary>` para mostrar una fuente, banner o título del contenido del elemento `<details>`.