Elemento HTML

Un elemento HTML es un tipo de componente de documento HTML (HyperText Markup Language), uno de varios tipos de nodos HTML (también hay nodos de texto, nodos de comentarios y otros). La primera versión utilizada de HTML fue escrita por Tim Berners-Lee en 1993 y desde entonces ha habido muchas versiones de HTML. La versión más utilizada es HTML 4.01, que se convirtió en estándar oficial en diciembre de 1999. Un documento HTML se compone de un árbol de nodos HTML simples, como nodos de texto, y elementos HTML, que agregan semántica y formato a partes del documento (p., poner el texto en negrita, organizarlo en párrafos, listas y tablas, o incrustar hipervínculos e imágenes). Cada elemento puede tener atributos HTML especificados. Los elementos también pueden tener contenido, incluidos otros elementos y texto.

Conceptos

Elementos frente a etiquetas

Como se entiende generalmente, la posición de un elemento se indica como que se extiende desde una etiqueta de inicio y termina con una etiqueta de fin. Este es el caso de muchos, pero no todos, los elementos dentro de un documento HTML. La distinción se enfatiza explícitamente en Especificación HTML 4.01:

Los elementos no son etiquetas. Algunas personas se refieren a elementos como etiquetas (por ejemplo, "la etiqueta P"). Recuerde que el elemento es una cosa, y la etiqueta (ya sea la etiqueta de inicio o final) es otra. Por ejemplo, el elemento HEAD siempre está presente, a pesar de que tanto las etiquetas de inicio y final HEAD pueden faltar en el marcador.

Del mismo modo, la Recomendación W3C HTML 5.1 2.ª edición dice explícitamente:

Etiquetas se utilizan para delimitar el inicio y el final de los elementos en el marcado. (...) Las etiquetas de inicio y fin de ciertos elementos normales se pueden omitir, (...)
El contenido del elemento debe ser colocado entre justo después de la etiqueta de inicio (que podría ser implícito, en ciertos casos) y justo antes de la etiqueta final (que de nuevo, podría ser implícito, en ciertos casos).

—HTML 5.1 2a edición § 8.1.2. Elementos § Tags

y:

Ciertas etiquetas pueden ser omitido.
NOTA:
Omitir la etiqueta de inicio de un elemento (...) no significa que el elemento no esté presente; es implícito, pero todavía está allí. Por ejemplo, un documento HTML siempre tiene una raíz ■html elemento, incluso si la cadena ■html no aparece en ninguna parte de la marca.

—HTML 5.1 2nd Edition § 8.1.2.4. Etiquetas opcionales

Como HTML (antes de HTML5) se basa en SGML, su análisis también depende de la definición de tipo de documento (DTD), específicamente una DTD de HTML (por ejemplo, HTML 4.01). La DTD especifica qué tipos de elementos son posibles (es decir, define el conjunto de tipos de elementos) y también las combinaciones válidas en las que pueden aparecer en un documento. Es parte del comportamiento general de SGML que, donde solo es posible una estructura válida (según la DTD), generalmente no se requiere su declaración explícita en cualquier documento dado. Como ejemplo simple, <p> que indica el inicio de un elemento de párrafo debe complementarse con un </p> etiqueta que indica su final. Pero dado que la DTD establece que los elementos de párrafo no se pueden anidar, un fragmento de documento HTML <p>Para 1 <p>Para 2 <p>Para 3 se infiere que es equivalente a <p>Para 1 </p><p>Para 2 </p><p>Párrafo 3. (Si un elemento de párrafo no puede contener otro, cualquier párrafo actualmente abierto debe cerrarse antes de comenzar otro). Debido a que esta implicación se basa en la combinación de la DTD y el documento individual, generalmente no es posible inferir elementos de las etiquetas del documento solo pero solo mediante el uso de un analizador compatible con SGML (o HTML) con conocimiento de la DTD. HTML5 crea un resultado similar al definir qué etiquetas se pueden omitir.

SGML frente a XML

SGML es complejo, lo que ha limitado su comprensión y adopción generalizadas. XML fue desarrollado como una alternativa más simple. Aunque ambos pueden usar la DTD para especificar los elementos admitidos y sus combinaciones permitidas como estructura del documento, el análisis de XML es más simple. La relación entre las etiquetas y los elementos es siempre la de analizar las etiquetas reales incluidas en el documento, sin los cierres implícitos que forman parte de SGML.

Es probable que HTML, como se usa en la web actual, se trate como XML, siendo XHTML, o como HTML5; en cualquier caso, el análisis de etiquetas de documentos en elementos del Modelo de objetos de documento (DOM) se simplifica en comparación con los sistemas HTML heredados. Una vez que se obtiene el DOM de los elementos, el comportamiento en los niveles superiores de la interfaz (ejemplo: representación de pantalla) es idéntico o casi idéntico.

% bloque; contra caja

Parte de este comportamiento de presentación CSS es la noción del "modelo de caja". Esto se aplica a aquellos elementos que CSS considera como "bloque" elementos, establecidos a través de CSS display : bloque; declaración.

HTML también tiene un concepto similar, aunque diferente, y los dos se confunden con mucha frecuencia. %block; y %inline; son grupos dentro de la DTD de HTML que agrupan elementos como "nivel de bloque" o "en línea". Esto se usa para definir su comportamiento de anidamiento: los elementos a nivel de bloque no se pueden colocar en un contexto en línea. Este comportamiento no se puede cambiar; se fija en la DTD. Los elementos de bloque y en línea tienen los comportamientos CSS apropiados y diferentes adjuntos de forma predeterminada, incluida la relevancia del modelo de caja para tipos de elementos particulares.

Sin embargo, tenga en cuenta que este comportamiento de CSS puede cambiar, y con frecuencia lo hace, desde el valor predeterminado. Listas con <ul><li>... son elementos %block; y se presentan como elementos de bloque de forma predeterminada. Sin embargo, es bastante común configurarlos con CSS para que se muestren como una lista en línea.

Resumen

Sintaxis

En la sintaxis HTML, la mayoría de los elementos se escriben con una etiqueta de inicio y una etiqueta de finalización, con el contenido en el medio. Una etiqueta HTML se compone del nombre del elemento, entre corchetes angulares. Una etiqueta final también tiene una barra oblicua después del paréntesis angular de apertura, para distinguirla de la etiqueta inicial. Por ejemplo, un párrafo, que está representado por el elemento <p>, se escribiría como:

.p■En la sintaxis HTML, la mayoría de los elementos están escritos...c)p■

Sin embargo, no todos estos elementos requieren que esté presente la etiqueta final, o incluso la etiqueta inicial. Algunos elementos, los llamados elementos vacíos, no tienen una etiqueta final. Un ejemplo típico es el elemento <br> (salto de línea fuerte). El comportamiento de un elemento vacío está predefinido y no puede contener ningún contenido u otros elementos. Por ejemplo, una dirección se escribiría como:

.p■P. Sherman.br■42 Wallaby Way.br■Sydneyc)p■

Al usar XHTML, se requiere abrir y cerrar todos los elementos, incluidos los elementos vacíos. Esto se puede hacer colocando una etiqueta final inmediatamente después de la etiqueta inicial, pero esto no es legal en HTML 5 y dará lugar a la creación de dos elementos. Una forma alternativa de especificar que es un elemento vacío, que es compatible tanto con XHTML como con HTML 5, es poner un // al final de la etiqueta (no confundirse con el / al comienzo de una etiqueta de cierre).

.p■P. Sherman.br /42 Wallaby Way.br /Sydneyc)p■

Los atributos HTML se especifican dentro de la etiqueta de inicio. Por ejemplo, el elemento <abbr>, que representa una abreviatura, espera un atributo title dentro de su etiqueta de apertura. Esto se escribiría como:

.abbr Título="abbreviación"■Abr.c)abbr■

De manera informal, los elementos HTML a veces se denominan "etiquetas" (un ejemplo de sinécdoque), aunque muchos prefieren el término etiqueta estrictamente en referencia al marcado que delimita el inicio y el final de un elemento.

Los nombres de elementos (y atributos) pueden escribirse en cualquier combinación de mayúsculas o minúsculas en HTML, pero deben estar en minúsculas en XHTML. La forma canónica estaba en mayúsculas hasta HTML 4 y se usaba en las especificaciones de HTML, pero en los últimos años, las minúsculas se han vuelto más comunes.

Tipos de elemento

Hay tres tipos de elementos HTML: elementos normales, elementos de texto sin formato y elementos vacíos.

Elementos normales normalmente tienen una etiqueta de inicio y una etiqueta de fin, aunque para algunos elementos se puede omitir la etiqueta de fin, o ambas etiquetas. Se construye de manera similar:

• a start tag ()<tag>) marcando el comienzo de un elemento, que puede incorporar cualquier número de atributos HTML;
• cierta cantidad contenido, incluidos textos y otros elementos;
• an etiqueta final, en el que el nombre del elemento está prefijado con un slash: </tag>.

Elementos de texto sin formato (también conocidos como elementos de texto o de solo texto) se construyen con:

• a start tag (en la forma <tag>) marcando el comienzo de un elemento, que puede incorporar cualquier número de atributos HTML;
• cierta cantidad de texto contenido, pero ningún elemento (todas las etiquetas, aparte de la etiqueta final aplicable, se interpretarán como contenido);
• an etiqueta final, en el que el nombre del elemento está prefijado con un slash: </tag>. En algunas versiones de HTML, la etiqueta final es opcional para algunos elementos. La etiqueta final es necesaria en XHTML.

An example is the <title > element, which must not contain other elements (including markup of text), only plain text.

Los elementos vacíos (a veces también llamados elementos vacíos, elementos individuales o elementos independientes) solo tienen una etiqueta de inicio (en la forma <tag>), que contiene cualquier atributo HTML. No pueden contener niños, como texto u otros elementos. Para compatibilidad con XHTML, la especificación HTML permite un espacio opcional y una barra inclinada (<etiqueta /> está permitido). La barra inclinada es necesaria en XHTML y otras aplicaciones XML. Dos elementos vacíos comunes son <br /> (para un salto de línea fuerte, como en un poema o una dirección) y <hr /> (para una pausa temática). Otros elementos similares suelen ser marcadores de posición que hacen referencia a archivos externos, como el elemento de imagen (<img />). Los atributos incluidos en el elemento apuntarán al archivo externo en cuestión. Otro ejemplo de un elemento vacío es <link />, cuya sintaxis es:

.enlace rel="Sábana de estilo" href="fancy.css" Tipo="texto/css"■

Este elemento <link /> apunta al navegador a una hoja de estilo para usar al presentar el documento HTML al usuario. Tenga en cuenta que en la sintaxis HTML los atributos no tienen que estar entrecomillados si están compuestos solo por ciertos caracteres: letras, dígitos, el guión-menos y el punto. Cuando se usa la sintaxis XML (XHTML), por otro lado, todos los atributos deben estar entrecomillados y se requiere una barra inclinada final antes del último paréntesis angular:

. rel="Sábana de estilo" href="fancy.css" Tipo="texto/css" /

Atributos

Atributos HTML definen el comportamiento deseado o indican propiedades de elementos adicionales. La mayoría de los atributos requieren un valor. En HTML, el valor se puede dejar sin comillas si no incluye espacios (attribute=value), o se puede citar con comillas simples o dobles (atributo='valor' o atributo=&# 34;valor"). En XML, esas comillas son obligatorias.

Los atributos booleanos, por otro lado, no requieren que se especifique un valor. Un ejemplo es el marcado para casillas de verificación:

.entrada Tipo=casilla Revisado■

Sin embargo, en la sintaxis XML (y, por lo tanto, XHTML), se requiere un valor, y el nombre debe repetirse como el valor:

Identificación Tipo="checkbox" comprobado"Revisado" /

Estándares de elementos

Los elementos HTML se definen en una serie de estándares abiertos de libre acceso emitidos desde 1995, inicialmente por el IETF y posteriormente por el W3C.

Durante las guerras de navegadores de la década de 1990, los desarrolladores de agentes de usuario (por ejemplo, navegadores web) a menudo desarrollaron sus propios elementos, algunos de los cuales se adoptaron en estándares posteriores. Es posible que otros agentes de usuario no reconozcan elementos no estándar y se ignorarán, lo que posiblemente provoque que la página se muestre incorrectamente.

En 1998, XML (una forma simplificada de SGML) introdujo mecanismos que permitían a cualquier persona desarrollar sus propios elementos e incorporarlos en documentos XHTML, para su uso con agentes de usuario compatibles con XML.

Posteriormente, HTML 4.01 se reescribió en un formato compatible con XML, XHTML 1.0 (HTML extensible). Los elementos de cada uno son idénticos y, en la mayoría de los casos, los documentos XHTML 1.0 válidos serán documentos HTML 4.01 válidos o casi válidos. Este artículo se centra principalmente en HTML real, a menos que se indique lo contrario; sin embargo, sigue siendo aplicable a XHTML. Ver HTML para una discusión de las diferencias menores entre los dos.

Estado del elemento

Desde la primera versión de HTML, varios elementos han quedado obsoletos y están en desuso en estándares posteriores, o no aparecen en absoluto, en cuyo caso son inválidos (y se considerará no válido, y quizás no se muestre, al validar los agentes de usuario).

En HTML 4.01 / XHTML 1.0, el estado de los elementos se complica por la existencia de tres tipos de DTD:

• Transición, que contienen elementos deprecatados, pero que tienen por objeto proporcionar un período de transición durante el cual los autores pueden actualizar sus prácticas;
• Frameset, que son versiones de las DTD de Transición que también permiten a los autores escribir frameset documentos;
• Strict, que es la forma actualizada (como en 1999) de HTML.

HTML5 en su lugar proporciona una lista de funciones obsoletas para acompañar el contenido normativo estandarizado. Se dividen en "obsoletos pero conformes" para los cuales existen instrucciones de implementación y "no conformes" los que deben ser reemplazados.

El primer estándar (HTML 2.0) contenía cuatro elementos obsoletos, uno de los cuales no era válido en HTML 3.2. Los cuatro no son válidos en HTML 4.01 Transitional, que también dejó en desuso otros diez elementos. Todos estos, más otros dos, no son válidos en HTML 4.01 estricto. Si bien los elementos del marco aún están vigentes en el sentido de estar presentes en las DTD de transición y de conjunto de marcos, no hay planes para preservarlos en estándares futuros, ya que su función se ha reemplazado en gran medida y son muy problemáticos para la accesibilidad del usuario.

(Estrictamente hablando, el estándar XHTML más reciente, XHTML 1.1 (2001), no incluye ningún marco; es aproximadamente equivalente a XHTML 1.0 Strict, pero también incluye el Ruby marcado módulo.)

Una fuente común de confusión es el uso impreciso de obsoleto para referirse tanto al estado obsoleto como al no válido, y a los elementos que se espera que queden formalmente obsoletos en el futuro.

Contenido frente a presentación y comportamiento

Desde HTML 4, HTML se ha centrado cada vez más en la separación del contenido (el texto y las imágenes visibles) de la presentación (como el color, el tamaño de fuente y el diseño). Esto a menudo se conoce como una separación de preocupaciones. HTML se utiliza para representar la estructura o el contenido de un documento, su presentación sigue siendo responsabilidad exclusiva de las hojas de estilo CSS. Se sugiere una hoja de estilo predeterminada como parte del estándar CSS, que brinda una representación predeterminada para HTML.

El comportamiento (interactividad) también se mantiene separado del contenido y se maneja mediante secuencias de comandos. Las imágenes están contenidas en archivos de gráficos separados, separados del texto, aunque también pueden considerarse parte del contenido de una página.

La separación de preocupaciones permite que el documento sea presentado por diferentes agentes de usuario según sus propósitos y capacidades. Por ejemplo, un agente de usuario puede seleccionar una hoja de estilo adecuada para presentar un documento mostrándolo en un monitor, imprimiéndolo en papel o para determinar las características del habla en un agente de usuario de solo audio. Las funciones estructurales y semánticas del marcado siguen siendo idénticas en cada caso.

Históricamente, los agentes de usuario no siempre admitían estas funciones. En la década de 1990, como medida provisional, los elementos de presentación (como <b> y <i>) se agregaron a HTML, a costa de crear problemas de interoperabilidad y accesibilidad para el usuario. Esto ahora se considera obsoleto y ha sido reemplazado por un diseño basado en hojas de estilo; la mayoría de los elementos de presentación ahora están en desuso.

Los archivos de imágenes externas se incorporan con el <img /> o <object /> elementos. (Con XHTML, el lenguaje SVG también se puede usar para escribir gráficos dentro del documento, aunque la vinculación a archivos SVG externos generalmente es más simple). Cuando una imagen no es puramente decorativa, HTML permite que se proporcione contenido de reemplazo con valor semántico similar para no -agentes de usuario visuales.

Un documento HTML también se puede ampliar mediante el uso de secuencias de comandos para proporcionar comportamientos adicionales más allá de las capacidades de los hipervínculos y formularios HTML.

The elements <style > and <script>, with related HTML attributes, provide style sheets and scripts.

• En el jefe del documento, y puede vincularse a documentos externos compartidos, o ... y ... puede contener instrucciones incrustadas. (El elemento también se puede utilizar para unir hojas de estilo.)
• o ... puede ocurrir en cualquier punto del documento (cabeza o cuerpo).
• El style atributo es válido en la mayoría de los elementos del cuerpo de documento (por ejemplo.
  ) para la inclusión de estilo inline instrucciones.
• Atributos de gestión de eventos, que proporcionan enlaces a scripts, son opcionales en la mayoría de los elementos.
• Para los agentes de usuario que no operan scripts, los ... El elemento proporciona contenido alternativo integrado cuando sea apropiado; sin embargo, sólo puede utilizarse en el jefe de documento y en el cuerpo como elemento de nivel de bloque.

Elementos de la estructura del documento

<html>...

El elemento raíz de un documento HTML; todos los demás elementos están contenidos en esto. El elemento HTML delimita el comienzo y el final de un documento HTML.

Tanto las etiquetas de inicio y final pueden omitirse (HTML5).

Normalización en HTML 2.0; todavía actual.

<head>...

(Véanse los elementos principales del documento para los elementos del niño.)

Container for processing information and metadata for an HTML document.

Tanto las etiquetas de inicio y final pueden ser omitidas e inferidas de elementos infantiles (HTML5).

Normalización en HTML 5.0; todavía actual.

<body>

(Véanse los elementos del cuerpo de documentos para los elementos del niño.)

Contenedor para el contenido visible de un documento HTML.

Tanto las etiquetas de inicio y final pueden ser omitidas e inferidas de elementos infantiles (HTML5).

Normalización en HTML 2.0; todavía actual.

Elementos del encabezado del documento

<base />

Especifica un URL para todos los relativos href y otros enlaces en el documento. Debe aparecer ante cualquier elemento que se refiere a un recurso externo. HTML permite sólo uno elemento para cada documento. Este elemento tiene atributos HTML, pero ningún contenido.

Una versión de desarrollo de este elemento (como BASE) se menciona en HTML; estandarizadas en HTML 2.0; todavía actual.

<basefont /> (deprecated)

Especifica un tamaño de fuente base, tipografía y color para el documento. Usado junto con elementos. Deprecated en favor de hojas de estilo.

Normalización en HTML 3.2; deprecated en HTML 4.0 Transición; inválido en HTML 4.0 Strict.

<isindex /> (deprecated)

<isindex> puede aparecer en la cabeza del documento o en el cuerpo, pero sólo una vez en un documento. Ver formularios.

<link />

Especifica enlaces a otros documentos, como anterior y siguiente enlaces, o versiones alternativas. Un uso común es vincular a hojas de estilo externo, utilizando el formulario, <link rel="stylesheet" type="text/css" href="url" title="description_of_style">. Un uso menos común, pero importante, es suministrar pistas de navegación consistentemente mediante el uso de microformatos. Se definen varias relaciones comunes, que pueden estar expuestas a los usuarios a través de la interfaz del navegador en lugar de directamente en la página web, tales como: <link rel="next" href="url">. Un documento elemento puede contener cualquier número de elementos. Este elemento tiene atributos HTML, pero ningún contenido.

LINK existió en HTML Internet Draft 1.2, y era estandarizadas en HTML 2.0; todavía actual.

<meta />

Puede utilizarse para especificar metadatos adicionales sobre un documento, como su autor, fecha de publicación, fecha de expiración, idioma, título de página, descripción de la página, palabras clave u otra información no proporcionada a través de los otros elementos de encabezado y atributos HTML. Por su naturaleza genérica, elementos especifican pares asociativos de valor clave. En general, un elemento meta transmite información oculta sobre el documento. Se pueden utilizar varias etiquetas meta, todas las cuales deben anidarse en el elemento cabezal. El propósito específico de cada uno elemento se define por sus atributos. Fuera de XHTML, a menudo se da sin el corte (), a pesar de ser un elemento vacío.

En una forma, elementos pueden especificar encabezados HTTP que deben ser enviados por un servidor web antes del contenido real. Por ejemplo, <meta http-equiv="foo" content="bar" /> especifica que la página debe ser servido con un encabezado HTTP llamado foo que tiene un valor bar.

En la forma general, a elemento especifica name y asociados content Atributos HTML que describen aspectos de la página HTML. Para evitar posibles ambigüedad, un tercer atributo opcional, scheme, puede ser suministrado para especificar un marco semántico que define el significado de la clave y su valor. Por ejemplo, en <meta name="foo" content="bar" scheme="DC" /> el elemento se identifica como el que contiene foo elemento, con un valor bar, desde el marco de descripción de los recursos básicos de DC o Dublín.

Normalización en HTML 2.0; todavía actual.

<object>...

Se utiliza para incluir objetos genéricos dentro del encabezado del documento. Aunque raramente se utiliza dentro de un elemento, podría utilizarse para extraer datos extranjeros y asociarlos con el documento actual.

Normalización en HTML 4.0; todavía actual.

<script>...

Puede actuar como contenedor para instrucciones de script o enlace a un script externo con el opcional src atributo. También se puede utilizar en el cuerpo de documento para generar dinámicamente contenido de bloque o inline.

Normalización en HTML 3.2; todavía actual.

<style>...

Especifica un estilo CSS para el documento, generalmente en la forma, <style type="text/css"> ... </style>. Puede actuar como contenedor para instrucciones de estilo o enlace a hojas de estilo externo – por ejemplo, en CSS, con @import directivas de la forma, <style> @import url; </style>

Normalización en HTML 3.2; todavía actual.

<title>...

Esta etiqueta define un título de documento. Se requiere en cada documento HTML y XHTML. Los agentes del usuario pueden utilizar el título de diferentes maneras. Por ejemplo:

• Los navegadores web generalmente lo muestran en la barra de título de una ventana cuando la ventana está abierta, y (cuando sea aplicable) en la barra de tareas cuando se minimiza la ventana.
• Puede convertirse en el nombre de archivo predeterminado al guardar la página.
• Podemos utilizar un elemento de título sólo una vez en una página web, y cuando hacemos otra página entonces utilizaremos de nuevo otro elemento de título con nuevo título (no tome el mismo nombre para toda etiqueta de título en el sitio web, Puede ser problema para los motores de búsqueda).
• Los rastreadores web de los motores de búsqueda web pueden prestar especial atención a las palabras utilizadas en el título.

El