Un elemento HTML es un tipo de componente de documento HTML (Lenguaje de marcado de hipertexto), uno de varios tipos de nodos HTML (también hay nodos de texto, nodos de comentarios y otros). [ vago ] La primera versión utilizada de HTML fue escrita por Tim Berners-Lee en 1993 y desde entonces ha habido muchas versiones de HTML. El estándar de facto actual está gobernado por el grupo industrial WHATWG y se conoce como HTML Living Standard.
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 (por ejemplo, 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.
Como se entiende generalmente, la posición de un elemento se indica abarcando desde una etiqueta inicial y termina en una etiqueta final. [1] Este es el caso de muchos, pero no de todos, los elementos de un documento HTML. La distinción se enfatiza explícitamente en la especificación HTML 4.01 :
Los elementos no son etiquetas. Algunas personas se refieren a los elementos como etiquetas (por ejemplo, "la etiqueta P"). Recuerde que el elemento es una cosa y la etiqueta (ya sea de inicio o de fin) es otra. Por ejemplo, el elemento HEAD siempre está presente, aunque es posible que falten las etiquetas HEAD inicial y final en el marcado. [1]
De manera similar, la Recomendación HTML 5.1 del W3C, segunda edición, dice explícitamente:
Las 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 colocarse justo después de la etiqueta de inicio (que podría estar implícita , en ciertos casos) y justo antes la etiqueta final (que nuevamente, podría estar implícita , en ciertos casos).— HTML 5.1 2.ª edición § 8.1.2. Elementos § Etiquetas
y:
Se pueden omitir ciertas etiquetas .
NOTA:
Omitir la etiqueta de inicio de un elemento (...) no significa que el elemento no esté presente; está implícito, pero todavía está ahí. Por ejemplo, un documento HTML siempre tiene un <html>elemento raíz, incluso si la cadena <html>no aparece en ninguna parte del marcado.— HTML 5.1 2.ª edición § 8.1.2.4. Etiquetas opcionales
Como HTML (antes de HTML5) se basa en SGML , [2] su análisis también depende de la Definición de tipo de documento (DTD) , específicamente una DTD HTML (por ejemplo, HTML 4.01 [3] [nota 1] ). 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, cuando solo es posible una estructura válida (según la DTD), generalmente no se requiere su declaración explícita en cualquier documento determinado. Como ejemplo sencillo, la etiqueta que indica el inicio de un elemento de párrafo debe complementarse con una etiqueta que indique su final. Pero como la DTD establece que los elementos de párrafo no se pueden anidar, se infiere que un fragmento de documento HTML es equivalente a . (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, normalmente no es posible inferir elementos a partir de etiquetas de documento únicamente, sino que sólo mediante el uso de un analizador compatible con SGML (o HTML) y con conocimiento de la DTD. HTML5 crea un resultado similar al definir qué etiquetas se pueden omitir. [4]<p></p><p>Para 1 <p>Para 2 <p>Para 3<p>Para 1 </p><p>Para 2 </p><p>Para 3
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 utilizar la DTD para especificar los elementos admitidos y sus combinaciones permitidas como estructura del documento, el análisis XML es más sencillo. La relación entre etiquetas y elementos es siempre la de analizar las etiquetas reales incluidas en el documento, sin los cierres implícitos que forman parte de SGML. [nota 2]
Es probable que el HTML tal como se utiliza en la web actual se trate como XML, XHTML o 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 niveles superiores de la interfaz (ejemplo: renderizado de pantalla) es idéntico o casi idéntico. [nota 3]
Parte de este comportamiento de presentación CSS es la noción de " modelo de caja ". Esto se aplica a aquellos elementos que CSS considera elementos de "bloque", establecidos a través de la declaración CSS.display: block;
HTML también tiene un concepto similar, aunque diferente, y es muy frecuente que se confundan ambos. %block;y %inline;son grupos dentro del DTD HTML que agrupan elementos como "a nivel de bloque" o "en línea". [6] Esto se utiliza para definir su comportamiento de anidamiento: los elementos a nivel de bloque no se pueden colocar en un contexto en línea. [nota 4] Este comportamiento no se puede cambiar; está fijado en la DTD. Los elementos de bloque y en línea tienen comportamientos CSS diferentes y apropiados adjuntos de forma predeterminada, [6] incluida la relevancia del modelo de caja para tipos de elementos particulares.
Sin embargo, tenga en cuenta que este comportamiento de CSS puede cambiarse, y con frecuencia se modifica, respecto al valor predeterminado. Las listas con elementos son 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. [7]<ul><li> ...%block;
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, rodeado por corchetes angulares . Una etiqueta de final también tiene una barra diagonal después del corchete en ángulo de apertura, para distinguirla de la etiqueta de inicio. Por ejemplo, un párrafo representado por el <p>elemento se escribiría como:
< p > En la sintaxis HTML, la mayoría de los elementos están escritos... </ p >Sin embargo, no todos estos elementos requieren que esté presente la etiqueta final, o incluso la etiqueta inicial. [4] Algunos elementos, los llamados elementos vacíos , no tienen una etiqueta final. Un ejemplo típico es el <br>elemento (salto de línea duro). El comportamiento de un elemento vacío está predefinido y no puede contener ningún contenido ni otros elementos. Por ejemplo, una dirección se escribiría como:
< p > P. Sherman < br /> 42 Wallaby Way < br /> Sídney </ p >Cuando se utiliza XHTML , es necesario abrir y cerrar todos los elementos, incluidos los elementos vacíos. Esto se puede hacer colocando una etiqueta de cierre inmediatamente después de la etiqueta de inicio, 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 colocar al /final de la etiqueta (no debe confundirse con al /principio de una etiqueta de cierre).
< p > P. Sherman < br /> 42 Wallaby Way < br /> Sídney </ p >Los atributos HTML se especifican dentro de la etiqueta de inicio. Por ejemplo, el <abbr>elemento que representa una abreviatura espera un titleatributo dentro de su etiqueta de apertura. Esto se escribiría como:
< título abbr = "abreviatura" > abbr. </abr> _ _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. [8] La forma canónica estaba en mayúsculas hasta HTML 4 y se usaba en las especificaciones HTML, pero en los últimos años, las minúsculas se han vuelto más comunes.
Hay tres tipos de elementos HTML : elementos normales, elementos de texto sin formato y elementos vacíos.
Los elementos normales suelen tener una etiqueta inicial y una etiqueta final, aunque para algunos elementos se puede omitir la etiqueta final, o ambas etiquetas. Está construido de manera similar:
<tag></tag>Los elementos de texto sin formato (también conocidos como elementos de texto o de solo texto) se construyen con:
<tag></tag>Un ejemplo es el <title>elemento, que no debe contener otros elementos (incluido el marcado de texto), sólo texto sin formato .
Los elementos vacíos (también llamados a veces elementos vacíos, elementos individuales o elementos independientes) solo tienen una etiqueta de inicio (en el formulario), que contiene todos los atributos HTML. No pueden contener elementos secundarios, como texto u otros elementos. Para compatibilidad conXHTML, la especificación HTML[ cuál? ]permite un espacio y una barra diagonal opcionales[ cita necesaria ](está permitido). La barra diagonal es necesaria enXHTMLy otrasaplicacionesXMLDos elementos vacíos comunes son(para unsalto de línea duro, como en un poema o un discurso) y(para un salto temático). Otros elementos similares suelen ser marcadores de posición que hacen referencia a archivos externos, como elelemento imagen (). Los atributos incluidos en el elemento apuntarán entonces al archivo externo en cuestión. Otro ejemplo de elemento vacío es, cuya sintaxis es:<tag><tag /><br /><hr /><img /><link />
< enlace rel = "hoja de estilo" href = "fancy.css" tipo = "texto/css" >Este <link />elemento dirige al navegador a una hoja de estilo para usar al presentar el documento HTML al usuario. En la sintaxis HTML los atributos no tienen que ir entre comillas si están compuestos únicamente por ciertos caracteres: letras, dígitos, guión menos y punto. Por otro lado, cuando se utiliza la sintaxis XML (XHTML), todos los atributos deben ir entre comillas y se requiere una barra diagonal espaciada antes del último corchete angular:
<enlace rel= "hoja de estilo" href= "fancy.css" tipo= "texto/css" /> Los 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 (), o se puede entrecomillar con comillas simples o dobles (o). En XML , esas comillas son obligatorias.attribute=valueattribute='value'attribute="value"
Los atributos booleanos , por otro lado, no requieren que se especifique un valor. Un ejemplo son las checkedcasillas de verificación para:
< tipo de entrada = casilla de verificación marcada > Sin embargo, en la sintaxis XML (y por lo tanto XHTML ), se requiere un valor y el nombre debe repetirse como valor:
< tipo de entrada= "casilla de verificación" marcada= "marcada" /> Los elementos HTML se definen en una serie de estándares abiertos disponibles gratuitamente publicados desde 1995, inicialmente por el IETF y posteriormente por el W3C .
Durante la guerra de los 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 serán ignorados, lo que posiblemente provocará que la página se muestre incorrectamente.
En 1998, XML (una forma simplificada de SGML) introdujo mecanismos que permitían a cualquiera desarrollar sus propios elementos e incorporarlos en documentos XHTML , para utilizarlos con agentes de usuario compatibles con XML. [9]
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. Consulte HTML para obtener una discusión sobre las diferencias menores entre los dos.
Desde la primera versión de HTML, varios elementos han quedado obsoletos y están obsoletos en estándares posteriores, o no aparecen en absoluto, en cuyo caso no son válidos (y los agentes de usuario validadores los considerarán no válidos y tal vez no los muestren ). . [10]
En HTML 4.01 / XHTML 1.0 , el estado de los elementos se complica por la existencia de tres tipos de DTD :
En cambio, HTML5 proporciona una lista de características obsoletas que acompañan al contenido normativo estandarizado . Se dividen en "obsoletos pero conformes" para los cuales existen instrucciones de implementación y "no conformes" que deben ser reemplazados. [11]
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 diez elementos más. Todos estos, más otros dos, no son válidos en HTML 4.01 Strict . Si bien los elementos del marco todavía 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 ha sido reemplazada 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 marcos en absoluto; es aproximadamente equivalente a XHTML 1.0 Strict , pero también incluye el módulo de marcado Ruby .) [12]
Una fuente común de confusión es el uso vago de obsoleto para referirse tanto al estado obsoleto como al no válido, y a elementos que se espera que queden formalmente obsoletos en el futuro.
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). [13] Esto a menudo se conoce como 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 proporciona una representación predeterminada para HTML. [14]
El comportamiento (interactividad) también se mantiene separado del contenido y se maneja mediante scripts . Las imágenes están contenidas en archivos 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 apropiada 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, se agregaron elementos de presentación (como <b>y ) al HTML, a costa de crear problemas de interoperabilidad y accesibilidad para el usuario. <i>Esto ahora se considera obsoleto y ha sido reemplazado por el diseño basado en hojas de estilo; la mayoría de los elementos de presentación ahora están en desuso. [15]
Los archivos de imágenes externos se incorporan con los elementos <img />o <object />. (Con XHTML , el lenguaje SVG también se puede utilizar para escribir gráficos dentro del documento, aunque vincular a archivos SVG externos generalmente es más sencillo). [16] Cuando una imagen no es puramente decorativa, HTML permite reemplazar contenido con valor semántico similar. proporcionado para agentes de usuario no 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.
Los elementos <style>y <script>, con atributos HTML relacionados , proporcionan hojas de estilo y scripts.
<style />y <script />puede vincularse a documentos externos compartidos o <style>...</style>puede <script>...</script>contener instrucciones integradas. (El <link>elemento también se puede utilizar para vincular hojas de estilo).<script />o <script>...</script>puede ocurrir en cualquier punto del documento (cabeza o cuerpo).styleatributo es válido en la mayoría de los elementos del cuerpo del documento (p. ej <div style="...">.) para la inclusión de instrucciones de estilo en línea .<noscript>...</noscript>elemento proporciona contenido alternativo integrado cuando corresponde; sin embargo, solo se puede utilizar en el encabezado del documento y en el cuerpo como elemento a nivel de bloque.<html>...</html><head>...</head>Contenedor para procesar información y metadatos de un documento HTML.
<body></body>Contenedor para el contenido visualizable de un documento HTML.
<base />hreflos enlaces relativos y de otro tipo en el documento. Debe aparecer antes de cualquier elemento que haga referencia a un recurso externo. HTML sólo permite un <base>elemento para cada documento. Este elemento tiene atributos HTML , pero no contiene contenido.BASE) se menciona en Etiquetas HTML ; estandarizado en HTML 2.0; sigue vigente.<basefont /> (deprecated)<font>elementos. En desuso en favor de las hojas de estilo .<isindex /> (deprecated)<isindex>podría aparecer en el encabezado del documento o en el cuerpo, pero solo una vez en un documento. Ver Formularios .<link /><link rel="stylesheet" type="text/css" href="url" title="description_of_style"><link rel="next" href="url"><head><link />LINKexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<meta />Se puede utilizar para especificar metadatos adicionales sobre un documento, como su autor, fecha de publicación, fecha de vencimiento, idioma, título de página, descripción de página, palabras clave u otra información no proporcionada a través de otros elementos de encabezado y atributos HTML . Debido a su naturaleza genérica, <meta />los elementos especifican pares clave-valor asociativos . En general, un metaelemento transmite información oculta sobre el documento. Se pueden utilizar varias metaetiquetas, todas las cuales deben estar anidadas en el elemento principal. El propósito específico de cada <meta />elemento está definido por sus atributos. Fuera de XHTML , a menudo se proporciona sin la barra diagonal ( <meta>), a pesar de ser un elemento vacío.
De una forma, <meta />los elementos pueden especificar encabezados HTTP que deben ser enviados por un servidor web antes del contenido real. Por ejemplo, especifica que la página debe entregarse con un encabezado HTTP llamado que tenga un valor .<meta http-equiv="foo" content="bar" />foobar
<meta />elemento especifica atributos HTML nameasociados contentque describen aspectos de la página HTML. schemePara evitar una posible ambigüedad, se puede proporcionar un tercer atributo opcional, para especificar un marco semántico que define el significado de la clave y su valor. Por ejemplo, en el elemento se identifica como que contiene el elemento, con un valor de , del marco de descripción de recursos DC o Dublin Core .<meta name="foo" content="bar" scheme="DC" /><meta />foobar <object>...</object><head>elemento, podría usarse potencialmente para extraer datos externos y asociarlos con el documento actual.<script>...</script>srcatributo opcional. [19] También se puede utilizar en el cuerpo del documento para generar dinámicamente contenido en bloque o en línea.<style>...</style><style type="text/css"> ... </style>@import <style> @import url; </style><title>...</title><title>elemento no debe contener otros elementos, sólo texto. Sólo <title>se permite un elemento en un documento.En los navegadores visuales, los elementos visualizables se pueden representar como bloques o en línea . Si bien todos los elementos son parte de la secuencia del documento, los elementos de bloque aparecen dentro de sus elementos principales:
Por el contrario, los elementos en línea se tratan como parte del flujo de texto del documento; no pueden tener márgenes, ancho o alto establecidos, y se dividen entre líneas.
Los elementos de bloque, o elementos a nivel de bloque, tienen una estructura rectangular. De forma predeterminada, estos elementos abarcarán todo el ancho de su elemento principal y, por lo tanto, no permitirán que ningún otro elemento ocupe el mismo espacio horizontal en el que están colocados.
La estructura rectangular de un elemento de bloque suele denominarse modelo de caja , y está formada por varias partes. Cada elemento contiene lo siguiente:
La sección anterior se refiere únicamente a la implementación detallada de la representación CSS y no tiene relevancia para los elementos HTML en sí.
<p>...</p>Pexistió en HTML Tags y fue estandarizado en HTML 2.0; sigue vigente.<h1>...</h1> <h2>...</h2><h3>...</h3><h4>...</h4><h5>...</h5><h6>...</h6>h1delimita el encabezado de nivel más alto, h2el siguiente nivel inferior (subsección), h3un nivel inferior a ese, y así sucesivamente hasta h6. A veces se les denomina colectivamente etiquetas, es decir, cualquiera de los niveles de encabezado disponibles. La mayoría de los navegadores visuales muestran los títulos como texto grande en negrita de forma predeterminada, aunque esto se puede anular con CSS . Los elementos de encabezado no están destinados simplemente a crear texto grande o en negrita; de hecho, no deben usarse para diseñar texto explícitamente. Más bien, describen la estructura y organización del documento. Algunos programas los utilizan para generar esquemas y tablas de contenidos.hn<dl>...</dl>DLexistió en HTML Tags y fue estandarizado en HTML 2.0; sigue vigente.<dt>...</dt>DTexistió en HTML Tags y fue estandarizado en HTML 2.0; sigue vigente.<dd>...</dd>DDexistió en HTML Tags y fue estandarizado en HTML 2.0; sigue vigente.<ol>...</ol>typeatributo se puede utilizar para especificar el tipo de marcador a utilizar en la lista, pero las hojas de estilo dan más control. La numeración predeterminada es arábiga. En un atributo HTML: ; o en una declaración CSS: – reemplazando con uno de los siguientes:<ol type="foo">ol { list-style-type: foo; }fooA; Valor CSS:upper-alphaa; Valor CSS:lower-alphaI; Valor CSS:upper-romani; Valor CSS:lower-roman1;decimalnoneopciones para escritura CJK , hebrea, georgiana y armenia. El atributo está obsoleto en HTML 3.2 y 4.01, pero no en HTML 5.OLexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<ul>...</ul><ul type="foo">ul { list-style-type: foo; }foodiscsquarecirclenoneULexistió en HTML Tags y fue estandarizado en HTML 2.0; sigue vigente.<li>...</li>ol) o desordenadas ( ul).LIexistió en HTML Tags y fue estandarizado en HTML 2.0; sigue vigente.<dir>...</dir> (deprecated)<ul>DIRexistió en HTML Tags y fue estandarizado en HTML 2.0; obsoleto en HTML 4.0 Transicional; no válido en HTML 4.0 estricto.<address>...</address>ADDRESSexistió en HTML Tags y fue estandarizado en HTML 2.0; sigue vigente.<article>...</article><aside>...</aside><blockquote>...</blockquote>Una cita a nivel de bloque , para cuando la cita incluye elementos a nivel de bloque, por ejemplo, párrafos. El citeatributo (que no debe confundirse con el elemento <cite>) puede proporcionar la fuente y debe ser un Identificador uniforme de recursos completamente calificado .
BLOCKQUOTEexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente. Consulte el elemento blockquote para obtener más información.<center>...</center> (deprecated)<del>...</del><div>...</div><figure>...</figure><figcaption>.<figcaption>...</figcaption><figure>elemento.<header>...</header><hr /><ins>...</ins><main>...</main><ul>lista.MENUexistió en HTML Tags y fue estandarizado en HTML 2.0; obsoleto en HTML 4.0 Transicional; no válido en HTML 4.0 estricto; luego redefinido en HTML5, eliminado en HTML 5.2, pero se incluye en HTML Living Standard en 2019.<noscript>...</noscript><pre>...</pre><pre>...</pre>, los espacios en blanco deben representarse tal como fueron creados. (Con las propiedades CSS: , se pueden presentar otros elementos de la misma manera). Este elemento puede contener cualquier elemento en línea excepto: <image>, <object>, <big>, <small>, <sup> y <sub. >...</sub>.{ white-space: pre; font-family: monospace; }PREexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<section>...</section><script>...</script><script />un srcatributo para proporcionar una URL desde la cual cargar el script, o usarse alrededor del <script>...</script>contenido del script incrustado.Nota: <script> no es en sí mismo ni un bloque ni un elemento en línea; por sí solo no debería mostrarse en absoluto, pero puede contener instrucciones para generar dinámicamente contenido en bloque o en línea.Los elementos en línea no se pueden colocar directamente dentro del elemento; deben estar completamente anidados dentro de elementos a nivel de bloque. [24]<body>
<a>...</a>Un elemento de anclaje se denomina ancla porque los diseñadores web pueden usarlo para "anclar" una URL a algún texto en una página web. Cuando los usuarios ven la página web en un navegador, pueden hacer clic en el texto para activar el enlace y visitar la página cuya URL está en el enlace. [25]
En HTML, un ancla puede ser el origen (el texto ancla ) o el destino (destino) de un hipervínculo .
Con el atributo href, [26] el ancla se convierte en un hipervínculo a otra parte del documento o a otro recurso (por ejemplo, una página web) utilizando una URL externa . Alternativamente (y a veces simultáneamente), con los atributos HTMLname o configurados, el elemento se convierte en un destino de enlace. Un localizador uniforme de recursos (URL) puede vincularse a este destino a través de un identificador de fragmento . En HTML5, cualquier elemento ahora se puede convertir en un objetivo mediante el uso del atributo, [27] por lo que no es necesario usarlo , aunque esta forma de agregar anclajes continúa funcionando.id id<a name="foo">...</a>
Para ilustrar: el encabezado de una sección de tabla de contenido sobreejemplo.comLa página de inicio de puede convertirse en un objetivo escribiendo: .<h2><a name="contents">Table of contents</a></h2>
Siguiendo con este ejemplo, ahora que la sección ha sido marcada como objetivo, se puede acceder a ella desde sitios externos con un enlace como: ;<a href="http://example.com#contents">see contents</a>
o con un enlace en la misma página como: .<a href="#contents">contents, above</a>
El atributo titlese puede configurar para brindar información breve sobre el enlace: .<a href="URL" title="additional information">link text</a>
En la mayoría de los navegadores gráficos, cuando el cursor pasa sobre un enlace, el cursor se transforma en una mano con un dedo índice extendido y el titlevalor se muestra en una información sobre herramientas o de alguna otra manera. Algunos navegadores muestran el texto alternativo de la misma manera, aunque esto no es lo que exige la especificación.
Aexistió en HTML Tags y fue estandarizado en HTML 2.0;Los elementos de frase se utilizan para marcar frases y agregar estructura o significado semántico a fragmentos de texto. Por ejemplo, las etiquetas <em>y <strong>se pueden utilizar para agregar énfasis al texto.
<abbr>...</abbr><abbr title="abbreviation">abbr.</abbr><acronym>...</acronym> (deprecated)<abbr><acronym title="Hyper-Text Mark-up Language">HTML</acronym>abbretiqueta. [28]<dfn>...</dfn>DFNexistía en HTML Internet Draft 1.2 y estaba completamente estandarizado en HTML 3.2; sigue vigente.<em>...</em>EMexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<strong>...</strong>STRONGexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; Todavía actual, redefinido en HTML5.Estos elementos son útiles principalmente para documentar el desarrollo de código de computadora y la interacción del usuario a través de la diferenciación del código fuente ( ), variables ( ), entrada del usuario ( ) y terminal u otra salida ( ).<code><var><kbd><samp>
<code>...</code>code example). Representado convencionalmente en una fuente monoespaciada.CODEexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<kbd>...</kbd>KBDexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<samp>...</samp>SAMPexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<var>...</var>VARexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.Como el marcado de presentación visual solo se aplica directamente a los navegadores visuales, se desaconseja su uso. En su lugar, se deben utilizar hojas de estilo. Varios de estos elementos están obsoletos o no son válidos en HTML 4/XHTML 1.0, y el resto no son válidos en el borrador actual de XHTML 2.0. Sin embargo, el borrador actual de HTML5 vuelve a incluir <s>, <u>y <small>, asignando un nuevo significado semántico a cada uno. En un documento HTML5 ya no se desaconseja el uso de estos elementos, siempre que sean semánticamente correctos.
<b>...</b>{ font-weight: bold; }<strong><b><strong>Bexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; Todavía actual, redefinido en HTML5.<i>...</i>{ font-style: italic; }<em>...</em><i><em>Iexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; Todavía actual, redefinido en HTML5.<u>...</u>{ text-decoration: underline; }<u><u>Uexistía en HTML Internet Draft 1.2 , estaba estandarizado en HTML 3.2 pero quedó obsoleto en HTML 4.0 Transitional y no era válido en HTML 4.0 Strict. Reintroducido en HTML5.<small>...</small>{ font-size: smaller; }<small><aside>...</aside><s>...</s><strike>. En HTML5 , el <s>elemento denota información que "ya no es precisa o ya no es relevante" y no debe confundirse con <del>, que indica eliminación/eliminación. [33]Squedó obsoleto en HTML 4.0 Transitional (no había aparecido en ningún estándar anterior) y no era válido en HTML 4.0 Strict. Reintroducido en HTML5, que en su lugar dejó de estar disponible <strike>.<big>...</big> (deprecated){ font-size: larger; }<strike>...</strike> (deprecated){ text-decoration: line-through; }STRIKEfue estandarizado en HTML 3.2; obsoleto en HTML 4.0 Transicional; no válido en HTML 4.0 estricto.<tt>...</tt> (deprecated){ font-family: monospace; }TTexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; no es compatible [34] en HTML5. Posibles reemplazos: <kbd> para marcar la entrada del usuario, <var> para variables (generalmente en cursiva y no con un cambio a monoespacio), <code> para el código fuente, <samp> para la salida. [34]<font>...</font> (deprecated)<font [color=<var>color</var>] [size=<var>size</var>] [face=<var>face</var>]>...</font>Puede especificar el color de fuente con el coloratributo (tenga en cuenta la ortografía estadounidense), el tipo de letra con el faceatributo y el tamaño absoluto o relativo con el sizeatributo. Ejemplos (todos los usos están obsoletos; utilice equivalentes de CSS si es posible):<font color="green">text</font>crea texto verde .<font color="#114499">text</font>crea texto con color hexadecimal #114499 .<font size="4">text</font>crea texto con tamaño 4. Los tamaños son del 1 al 7. El tamaño estándar es 3, a menos que se especifique lo contrario en <body> u otras etiquetas.<font size="+1">text</font>crea texto con tamaño 1 más grande que el estándar. es opuesto.<font size="-1">text</font><font face="Courier">text</font>crea texto con fuente Courier.<font size="N">corresponde a (la especificación HTML no define la relación entre el tamaño N y el tamaño de unidad Y , ni define una unidad).{font-size: Yunits}<font color="red">corresponde a{ color: red; }<font face="Times New Roman">corresponde a : CSS admite una pila de fuentes, de dos o más fuentes alternativas.{ font-family: 'Times New Roman', Times, serif; }<span>...</span><br /><bdi>...</bdi><bdo>...</bdo><cite>...</cite><cite>era para "una cita o referencia a otras fuentes" sin limitaciones ni requisitos particulares. [36] La especificación HTML 5 del W3C utiliza un refinamiento de esta idea, reflejando cómo se ha utilizado históricamente el elemento, pero ahora requiere que contenga (pero no se limite a) al menos uno de "el título de la obra o el nombre". del autor (persona, gente u organización) o una referencia URL, o una referencia en forma abreviada según las convenciones utilizadas para la adición de metadatos de citas." [37] Pero la especificación WHATWG solo permite que el elemento se utilice alrededor del título de una obra. [38] Las especificaciones del W3C comenzaron con la definición más amplia, luego cambiaron a una muy estrecha después de que WHATWG hizo este cambio. Sin embargo, el W3C revirtió su propio cambio en 2012, en respuesta a los comentarios negativos de la comunidad de desarrolladores; el elemento se implementó ampliamente con un alcance más amplio, por ejemplo, varias plataformas de blogs y foros envuelven las identificaciones y direcciones de correo electrónico de los comentaristas en <cite>...</cite>, y las personas que usan el elemento para citas bibliográficas envuelven (y todavía lo hacen) rutinariamente cada cita completa. en este elemento. Otro problema con el elemento es que WHATWG recomienda que esté en cursiva de forma predeterminada (por lo tanto, casi todos los navegadores lo hacen), porque (en su opinión) es solo para títulos de publicaciones. Sin embargo, por convención, sólo ciertos tipos de títulos usan cursiva, mientras que se espera que otros estén entre comillas, y los estándares pueden variar según el contexto de publicación y el idioma. En consecuencia, muchos autores y administradores de sitios web utilizan una hoja de estilo para todo el sitio para deshacer las cursivas automáticas de este elemento.<data>...</data><del>...</del><ins>...</ins><del>o <s>. Normalmente se presenta subrayado :Texto insertado.<ins>y <del>también se pueden utilizar como elementos de bloque: contienen otros elementos de bloque y en línea. Sin embargo, estos elementos aún deben permanecer completamente dentro de su elemento principal para mantener un documento HTML bien formado. Por ejemplo, para eliminar texto de la mitad de un párrafo a través de varios otros párrafos y terminar en un párrafo final, sería necesario utilizar tres <del>elementos separados. <del>Se necesitarían dos elementos como elementos en línea para indicar la eliminación de texto en el primer y último párrafo, y un tercero, utilizado como elemento de bloque, para indicar la eliminación en los párrafos intermedios.<mark>...</mark><q>...</q><blockquote>). Los elementos de cotización pueden estar anidados.<q> debería generar automáticamente comillas junto con las hojas de estilo. Las preocupaciones prácticas debidas al incumplimiento del navegador pueden obligar a los autores a buscar soluciones alternativas. El citeatributo proporciona la fuente y debe ser un URI completamente calificado .block-quote) usando hojas de estilo. Por ejemplo, con una regla CSS adecuada asociada con q.lengthy:<q class="lengthy">Lengthy quote here.</q><rb>...</rb><rp>...</rp><rt>...</rt><rtc>...</rtc><ruby>...</ruby><script>...</script><script> no es en sí mismo ni un bloque ni un elemento en línea; por sí solo no debería mostrarse en absoluto, pero puede contener instrucciones para generar dinámicamente contenido en bloque o en línea.<sub>...</sub><sup>...</sup>{ vertical-align: sub; }{ vertical-align: super; }<template>...</template><time>...</time><wbr /><applet>...</applet> (deprecated)<object>, ya que solo se podía usar con subprogramas de Java y tenía limitaciones de accesibilidad.<object>no son consistentes entre los diferentes navegadores.<area /><map>.<audio>...</audio>srcatributo. Los formatos de audio admitidos varían de un navegador a otro.<canvas>...</canvas><embed>...</embed><object>, pero luego se volvió a agregar a la especificación HTML5 [48] [49]<img />srcatributo especifica la URL de la imagen. El altatributo requerido proporciona texto alternativo en caso de que no se pueda mostrar la imagen. [50] (Aunque altestá pensado como texto alternativo, Microsoft Internet Explorer 7 y versiones anteriores lo presentan como información sobre herramientas si no titlese proporciona ningún atributo. [51] Safari y Google Chrome , por otro lado, no muestran el atributo alt en absoluto. ) [52] El <img />elemento fue propuesto por primera vez por Marc Andreessen e implementado en el navegador web NCSA Mosaic . [53]IMGexistía en HTML Internet Draft 1.2 y se estandarizó en HTML 2.0; sigue vigente.<map>...</map><object>...</object>typeatributo. Esto puede ser en cualquier tipo MIME que el agente de usuario comprenda, como una página HTML incrustada, un archivo que será manejado por un complemento como Flash , un subprograma de Java , un archivo de sonido, etc.<param /><applet>, este elemento ahora se usa con <object>, y solo debe aparecer como hijo de <object>. Utiliza atributos HTML para establecer un parámetro para el objeto, por ejemplo, ancho, alto, fuente, color de fondo, etc., dependiendo del tipo de objeto. Un objeto puede tener múltiples <param />elementos.<source>...</source>srcatributo de forma similar a los elementos <video>y <audio>.<track>...</track><video>...</video>srcatributo. Los formatos de vídeo admitidos varían de un navegador a otro.Estos elementos se pueden combinar en un formulario o, en algunos casos, usarse por separado como controles de interfaz de usuario; en el documento, pueden ser HTML simple o usarse junto con scripts. El marcado HTML especifica los elementos que componen un formulario y el método mediante el cual se enviará. Sin embargo, se debe utilizar algún tipo de script ( del lado del servidor , del lado del cliente o ambos) para procesar la entrada del usuario una vez enviada.
(Estos elementos son elementos en bloque o en línea, pero se recopilan aquí porque su uso es más restringido que otros elementos en línea o en bloque).
<form action="url">...</form><form>elemento especifica y opera la acción general de un área de formulario, utilizando el actionatributo requerido.<button>...</button><datalist>...</datalist>optioncorreos electrónicos para usar en elementos de formulario.<fieldset>...</fieldset><fieldset>, al que luego se le puede <legend>agregar un para identificar su función.<input /><input>Los elementos permiten implementar una variedad de controles de formulario estándar.<button>si es posible (es decir, si el cliente lo admite) ya que ofrece posibilidades más ricas.srcatributo.sizeatributo especifica el ancho predeterminado de la entrada en anchos de caracteres. max-lengthestablece el número máximo de caracteres que el usuario puede ingresar (que puede ser mayor que el tamaño).textcual produce una barra de búsqueda.text. La diferencia es que el texto escrito en este campo está enmascarado : los caracteres se muestran como un asterisco, un punto u otro sustituto. La contraseña aún se envía al servidor como texto sin formato , por lo que se necesita un protocolo de comunicación seguro subyacente como HTTPS si la confidencialidad es una preocupación.textpara números de teléfono .textpara direcciones de correo electrónico .textpara URL .textpara números.hiddenlas entradas no son visibles en la página representada, pero permiten al diseñador mantener una copia de los datos que deben enviarse al servidor como parte del formulario. Estos pueden ser, por ejemplo, datos que este usuario web ingresó o seleccionó en un formulario anterior y que deben procesarse junto con el formulario actual. No se muestra al usuario, pero los datos aún se pueden modificar en el lado del cliente editando la fuente HTML.<isindex /> (deprecated)<isindex />podría aparecer en el encabezado del documento o en el cuerpo, pero solo una vez en un documento.<isindex />operado como un formulario de búsqueda HTML primitivo; pero quedó obsoleto de facto debido a los formularios HTML más avanzados introducidos entre principios y mediados de la década de 1990. Representa un conjunto de hipervínculos compuestos por un URI base, un signo y palabras clave codificadas en porcentaje separadas por signos más .ISINDEXexistía en etiquetas HTML ; estandarizado en HTML 2.0; obsoleto en HTML 4.0 Transicional; no válido en HTML 4.0 estricto.<keygen>...</keygen> (deprecated)<label for="id">...</label>radio. Al hacer clic en la etiqueta, se activa un clic en la entrada correspondiente.<legend>...</legend><fieldset>.<meter>...</meter>valueatributo. También puede tener: min, low, high, y max.<option value="x">...</option><select>lista.<optgroup>...</optgroup><option>elementos en una <select>lista.<output>...</output><progress>...</progress><select name="xyz">...</select><textarea rows="8">...</textarea>cols(donde una columna tiene un ancho de texto de un carácter) y rows atributos HTML . El contenido de este elemento está restringido a texto sin formato, que aparece en el área de texto como texto predeterminado cuando se carga la página.El formato de las Tablas HTML se propuso en los Borradores HTML 3.0 y en las Tablas HTML RFC 1942 posteriores . Se inspiraron en el modelo de mesa CALS . Algunos elementos de estas propuestas se incluyeron en HTML 3.2; La forma actual de las tablas HTML se estandarizó en HTML 4. (Muchos de los elementos utilizados dentro de las tablas no son elementos en bloque ni en línea ).
<table>...</table>summaryatributo se requiere informalmente con fines de accesibilidad, aunque su uso no es sencillo.<tr>...</tr><table>.<th>...</th><table>celda de encabezado; Los contenidos se muestran convencionalmente en negrita y centrados. Un agente de usuario auditivo puede utilizar una voz más alta para estos elementos.<td>...</td><table>celda de datos.<colgroup>...</colgroup><table>.<col>...</col><table>.<caption>...</caption><table>.<thead>...</thead><table>. El agente de usuario puede repetir esta sección si la tabla está dividida en páginas (en impresión u otros medios paginados).<tbody>...</tbody><table>.<tfoot>...</tfoot><table>. Al igual que <thead>, el agente de usuario puede repetir esta sección si la tabla está dividida en páginas (en impresión u otros medios paginados).Los marcos permiten dividir una ventana visual del navegador HTML en segmentos, cada uno de los cuales puede mostrar un documento diferente. Esto puede reducir el uso del ancho de banda, ya que se pueden usar partes repetidas de un diseño en un cuadro, mientras que el contenido variable se muestra en otro. Esto puede tener un cierto costo de usabilidad, especialmente en agentes de usuario no visuales, [54] debido a que documentos (o sitios web) separados e independientes se muestran uno al lado del otro y se les permite interactuar con la misma ventana principal. Debido a este costo, los marcos (excluyendo el <iframe>elemento) solo se permiten en HTML 4.01 Frame-set. Los iframes también pueden contener documentos en diferentes servidores. En este caso, el navegador bloquea la interacción entre ventanas. Sitios como Facebook y Twitter utilizan iframes para mostrar contenido ( complementos ) en sitios web de terceros. Google AdSense utiliza iframes para mostrar banners en sitios web de terceros.
En HTML 4.01, un documento puede contener a <head>y a <body> o a <head>y a <frameset>, pero no tanto a <body>como a <frameset>. Sin embargo, <iframe>se puede utilizar en el cuerpo de un documento normal.
<frameset>...</frameset> (deprecated)<frame />elementos de un documento. El diseño de los marcos viene dado por listas separadas por comas en los atributos HTMLrows y .cols <frame /> (deprecated)<frameset>. Un documento independiente está vinculado a un marco mediante el srcatributo dentro del <frame />elemento.<noframes>...</noframes> (deprecated)<frame />elementos.<iframe>...</iframe><object />elemento, un <iframe>puede ser el marco "destino" para enlaces definidos por otros elementos, y el agente de usuario puede seleccionarlo como foco para imprimir, ver su fuente, etc. El contenido del elemento se utiliza como texto alternativo que se mostrará si el navegador no admite marcos en línea. Un documento separado se vincula a un marco usando el srcatributo dentro del elemento <iframe />, un código HTML en línea se incrusta en un marco usando el srcdocatributo dentro del <iframe />elemento.En HTML , longdesces un atributo utilizado dentro de los elementos <img />, <frame />o <iframe>. Se supone que es una URL [nota 5] a un documento que proporciona una descripción larga de la imagen, marco o iframe en cuestión. [55] Este atributo debe contener una URL, no – como comúnmente se equivoca – el texto de la descripción en sí.
longdescfue diseñado para ser utilizado por lectores de pantalla para mostrar información de imágenes a usuarios de computadoras con problemas de accesibilidad , como personas ciegas o con discapacidad visual, y se implementa ampliamente tanto en navegadores web como en lectores de pantalla. [56] Algunos desarrolladores objetan que [57] en realidad rara vez se usa para este propósito porque hay relativamente pocos autores que usan el atributo y la mayoría de esos autores lo usan incorrectamente; por lo tanto, recomiendan dejarlo en desuso longdesc. [58] La industria editorial ha respondido, abogando por la retención de longdesc. [59]
< img src = "Hola.jpg" longdesc = "descripción.html" >
Contenido de description.html:
< br /> < p > Esta es una imagen de un pastel de cumpleaños de dos capas. </p> _ _...Dado que muy pocos navegadores gráficos admiten que el enlace esté disponible de forma nativa (Opera e iCab son las excepciones), es útil incluir un enlace a la página de descripción cerca del <img />elemento siempre que sea posible, ya que esto también puede ayudar a los usuarios videntes.
< img src = "Hello.jpg" longdesc = "description.html" /> [ < a href = "description.html" title = "descripción larga de la imagen" > D </ a > ]Los siguientes elementos formaron parte del HTML inicial desarrollado por Tim Berners-Lee de 1989 a 1991; se mencionan en Etiquetas HTML , pero quedaron obsoletas en HTML 2.0 y nunca formaron parte de los estándares HTML.
<listing>...</listing> (deprecated)<plaintext> (deprecated)<plaintext>no tiene una etiqueta final ya que finaliza el marcado y hace que el resto del documento se analice como si fuera texto sin formato .<plaintext>existía en etiquetas HTML ; en desuso en HTML 2.0; no válido en HTML 4.0.<xmp>...</xmp> (deprecated)<nextid> (deprecated)<nextid>existía en etiquetas HTML (descritas como obsoletas); en desuso en HTML 2.0; no válido en HTML 3.2 y posteriores.Esta sección enumera algunos elementos obsoletos ampliamente utilizados, lo que significa que no se utilizan en código válido . Es posible que no sean compatibles con todos los agentes de usuario.
<blink>...</blink> (deprecated){text-decoration: blink}<blink>se originó en Netscape Navigator y es reconocido principalmente por sus descendientes, incluido Firefox ; obsoleto o no válido en HTML 2.0 y versiones posteriores. No es necesario admitir la etiqueta CSS de reemplazo, aunque es estándar.<layer>...</layer> (deprecated)<layer>se originó en Netscape 4 ; obsoleto o no válido en HTML 4.01 y posteriores.<marquee>...</marquee> (deprecated)<marquee>se originó en Microsoft Internet Explorer ; obsoleto o no válido en HTML 4.01 y posteriores.<nobr>...</nobr> (deprecated){white-space: nowrap;}<nobr>es un elemento propietario reconocido por la mayoría de los navegadores por motivos de compatibilidad; obsoleto o no válido en HTML 2.0 y versiones posteriores.<noembed>...</noembed> (deprecated)<embed><object><!-- A Comment -->Un comentario en HTML (y XML, SGML y SHTML relacionados) utiliza la misma sintaxis que el comentario SGML o el comentario XML , según el tipo de documento.
A diferencia de la mayoría de las etiquetas HTML, los comentarios no se anidan. De manera más general, hay algunas cadenas que no pueden aparecer en el texto del comentario. Esos son <!--(el comienzo de un comentario), -->(esto finaliza el comentario por lo que sigue trivialmente y no puede aparecer dentro de él) y --!>. Además, las cadenas >y ->no pueden aparecer al principio de un comentario ni <!-al final. [63]
Como resultado, el marcado <!--Xbegin<!--Y-->Xend-->está mal formado y generará el comentario.Xbegin<!--Yy el textoXend-->después de eso, o a veces simplementeXend-->, dependiendo del navegador.
Los comentarios pueden aparecer en cualquier parte de un documento, ya que se supone que el analizador HTML los ignora sin importar dónde aparezcan, siempre y cuando no estén dentro de otras estructuras de etiquetas HTML (es decir, no se pueden usar junto a atributos y valores; esto es un marcado no válido). : ).<span id="x1"<!--for "extension one"--> style="...">
Los comentarios pueden incluso aparecer antes de la declaración del tipo de documento; no se permiten otras etiquetas para hacer esto.
Sin embargo, no todos los navegadores y editores HTML son totalmente compatibles con el marco de sintaxis HTML y pueden hacer cosas impredecibles bajo algunas condiciones de sintaxis. El manejo defectuoso de los comentarios sólo afecta aproximadamente al 5% de todos los navegadores y editores HTML en uso, e incluso entonces sólo ciertas versiones se ven afectadas por problemas de manejo incorrecto de los comentarios (Internet Explorer 6 representa la mayor parte de este alto porcentaje).
Hay algunas peculiaridades de compatibilidad relacionadas con los comentarios:
doctypeque Internet Explorer 6 utilice el modo peculiar para la página HTML. Ninguna doctypeinformación será procesada.<style>y <script>los elementos a veces todavía están rodeados por delimitadores de comentarios, y los navegadores compatibles con CSS y scripts están escritos para ignorar específicamente ese marcado de comentario como si no fuera un comentario. Esto significa que los intentos de comentar CSS y el marcado de script cambiando los elementos dentro del comentario para que no sean reconocidos, por ejemplo .<-- [script]...[/script] --><style> ... {comment tags} ...</style><object><embed><embed>...los marcos presentan desafíos de usabilidad adicionales que son exclusivos de los usuarios con discapacidades, particularmente aquellos que usan lectores de pantalla.
