Un elemento HTML es un tipo de componente de documento HTML (lenguaje de marcado de hipertexto), uno de los diversos tipos de nodos HTML (también existen 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á regido 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 de un documento (por ejemplo, ponen el texto en negrita, lo organizan en párrafos, listas y tablas, o incorporan 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 como abarcando desde una etiqueta de inicio y terminando con una etiqueta de fin. [1] Este es el caso de muchos, pero no todos, los elementos dentro 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 la etiqueta de inicio o de fin) es otra. Por ejemplo, el elemento HEAD siempre está presente, aunque las etiquetas HEAD de inicio y de fin puedan faltar en el marcado. [1]
De manera similar, la Recomendación HTML 5.1 2.ª Edición del W3C 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 entre justo después de la etiqueta de inicio (que podría estar implícita , en ciertos casos) y justo antes de la etiqueta de fin (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 sigue estando allí. 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 dado. Como ejemplo simple, la etiqueta que indica el comienzo 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 a otro, cualquier párrafo abierto actualmente 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 solo a partir de las etiquetas del documento , sino 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. [4]<p></p><p>Para 1 <p>Para 2 <p>Para 3<p>Para 1 </p><p>Para 2 </p><p>Para 3
El SGML es complejo, lo que ha limitado su comprensión y adopción generalizadas. XML se desarrolló 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 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 son parte del SGML. [nota 2]
Es probable que el HTML que se utiliza en la web actual se trate como XML, al ser XHTML , o como HTML5 ; en cualquier caso, el análisis de las 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 (por ejemplo, la representación de la 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 como elementos de "bloque", establecidos a través de la declaración CSS.display: block;
HTML también tiene un concepto similar, aunque diferente, y los dos se confunden muy frecuentemente. %block;y %inline;son grupos dentro del DTD HTML que agrupan elementos como "de nivel de bloque" o "en línea". [6] Esto se utiliza para definir su comportamiento de anidación: los elementos de nivel de bloque no se pueden colocar en un contexto en línea. [nota 4] Este comportamiento no se puede cambiar; está fijado en el DTD. Los elementos de bloque y en línea tienen los comportamientos CSS apropiados y diferentes asociados a ellos de forma predeterminada, [6] incluida la relevancia del modelo de caja para tipos de elementos particulares.
Sin embargo, tenga en cuenta que este comportamiento CSS puede cambiarse (y se cambia con frecuencia) con respecto al valor predeterminado. Las listas con elementos are y se presentan como elementos de bloque de forma predeterminada. Sin embargo, es bastante común configurarlas 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 fin, con el contenido entre ellas. Una etiqueta HTML se compone del nombre del elemento, rodeado de corchetes angulares . Una etiqueta de fin también tiene una barra después del corchete angular de apertura, para distinguirla de la etiqueta de inicio. Por ejemplo, un párrafo, que está representado por el <p>elemento, se escribiría así:
< p > En la sintaxis HTML, la mayoría de los elementos se escriben... </ p >Sin embargo, no todos estos elementos requieren que esté presente la etiqueta de cierre, o incluso la etiqueta de inicio. [4] Algunos elementos, los llamados elementos void , no tienen etiqueta de cierre. Un ejemplo típico es el <br>elemento (salto de línea duro). El comportamiento de un elemento void 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 >Al utilizar XHTML , es necesario abrir y cerrar todos los elementos, incluidos los elementos void. Esto se puede hacer colocando una etiqueta de fin 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 void, que es compatible tanto con XHTML como con HTML 5, es colocar un /al final de la etiqueta (que no debe confundirse con el /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 así:
< abbr title = "abreviatura" > abbr. </ abbr >De manera informal, a veces se hace referencia a los elementos HTML como "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) se pueden escribir 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 era mayúscula 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 de inicio y una etiqueta de fin, aunque en algunos elementos se puede omitir la etiqueta de fin o ambas. Se construye de forma 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), solo texto simple .
Los elementos void (también llamados a veces elementos vacíos, elementos individuales o elementos independientes) solo tienen una etiqueta de inicio (en el formato), que contiene los atributos HTML. No pueden contener elementos secundarios, como texto u otros elementos. Para compatibilidad conXHTML, la especificación HTML[ which? ]permite un espacio y una barra opcionales[ cita requerida ](está permitido). La barra es obligatoria enXHTMLy otrasaplicacionesXML( para unsalto de línea duro, como en un poema o una dirección) y( para un salto temático). Otros elementos similares suelen ser marcadores de posición que hacen referencia a archivos externos, como elelemento image ( ). Los atributos incluidos en el elemento apuntarán entonces al archivo externo en cuestión. Otro ejemplo de un elemento void es, para el cual la sintaxis es:<tag><tag /><br /><hr /><img /><link />
< link rel = "hoja de estilo" href = "fancy.css" type = "text/css" >Este <link />elemento indica al navegador una hoja de estilos que se utilizará 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, el guión-menos y el punto. Por otro lado, cuando se utiliza la sintaxis XML (XHTML), todos los atributos deben ir entre comillas y se requiere una barra espaciada al final antes del último corchete angular:
<link rel= "hoja de estilo" href= "fancy.css" type= "text/css" /> Los atributos HTML definen el comportamiento deseado o indican propiedades adicionales del elemento. 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 poner entre comillas simples o dobles (o). En XML , esas comillas son obligatorias.attribute=valueattribute='value'attribute="value"
Por otro lado, los atributos booleanos no requieren que se especifique un valor. Un ejemplo es el checkedde las casillas de verificación:
< 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:
<input type= "casilla de verificación" marcada= "marcada" /> Los elementos HTML se definen en una serie de estándares abiertos de libre acceso publicados desde 1995, inicialmente por la 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 ) desarrollaron a menudo 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 los ignoren, lo que posiblemente haga que la página se muestre de forma incorrecta.
En 1998, XML (una forma simplificada de SGML) introdujo mecanismos para permitir a cualquiera desarrollar sus propios elementos e incorporarlos en documentos XHTML , para su uso con agentes de usuario compatibles con XML. [9]
Posteriormente, HTML 4.01 se reescribió en un formato compatible con XML , XHTML 1.0 ( eXtensible HTML ). 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 el HTML real, a menos que se indique lo contrario; sin embargo, sigue siendo aplicable a XHTML. Consulte HTML para obtener una discusión de las pequeñas diferencias entre los dos.
Desde la primera versión de HTML, varios elementos han quedado obsoletos y se consideran obsoletos en estándares posteriores, o no aparecen en absoluto, en cuyo caso no son válidos (y los agentes de usuario que los validen los considerarán invá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 ofrece una lista de características obsoletas que acompaña al contenido normativo estandarizado . Se dividen en "obsoletas pero conformes" para las que existen instrucciones de implementación y "no conformes" que deberían reemplazarse. [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 desaprobó otros diez elementos. Todos ellos, más otros dos, no son válidos en HTML 4.01 Strict . Si bien los elementos frame siguen vigentes en el sentido de estar presentes en los DTD Transitional y Frameset, no hay planes para preservarlos en estándares futuros, ya que su función ha sido reemplazada en gran medida y son altamente 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 impreciso de "deprecated" para referirse tanto al estado obsoleto como al invá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 visible y las imágenes) de la presentación (como el color, el tamaño de fuente y el diseño). [13] Esto se suele denominar 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 gestiona mediante scripts . Las imágenes se encuentran en archivos gráficos separados del texto, aunque también pueden considerarse parte del contenido de una página.
La separación de intereses 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 mediante visualización en un monitor, impresión 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 permanecen idénticas en cada caso.
Históricamente, los agentes de usuario no siempre admitían estas características. En la década de 1990, como medida provisoria, se añadieron elementos de presentación (como <b>y <i>) al HTML, a costa de crear problemas de interoperabilidad y accesibilidad del usuario. Hoy en día, esto 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 están ahora en desuso. [15]
Los archivos de imágenes externas se incorporan con los elementos <img />o . (Con XHTML , el lenguaje SVG también se puede utilizar para escribir gráficos dentro del documento, aunque la vinculación a archivos SVG externos generalmente es más simple). [16] Cuando una imagen no es puramente decorativa, HTML permite proporcionar contenido de reemplazo con un valor semántico similar para agentes de usuario no visuales.<object />
Un documento HTML también se puede ampliar mediante el uso de scripts para proporcionar comportamientos adicionales más allá de las capacidades de los hipervínculos y formularios HTML.
Los elementos <style>y , con los atributos HTML<script> relacionados , proporcionan hojas de estilo y scripts.
<style />y <script />puede vincular a documentos externos compartidos o <style>...</style>y <script>...</script>puede 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 (encabezado o cuerpo).styleatributo es válido en la mayoría de los elementos del cuerpo del documento (por ejemplo <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 usar en el encabezado del documento y en el cuerpo como un 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 del documento. Debe aparecer antes de cualquier elemento que haga referencia a un recurso externo. HTML solo permite un <base>elemento por cada documento. Este elemento tiene atributos HTML , pero no tiene contenido.BASE) se menciona en Etiquetas HTML ; estandarizado en HTML 2.0; aún actual.<basefont /> (deprecated)<font>elementos. Se ha dejado de usar en favor de las hojas de estilo .<isindex /> (deprecated)<isindex>Puede aparecer en el encabezado o en el cuerpo del documento, pero solo una vez en el documento. Consulte Formularios .<link /><link rel="stylesheet" type="text/css" href="url" title="description_of_style"><link rel="next" href="url"><head><link />LINKExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún 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 la 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 . Debido a su naturaleza genérica, los elementos especifican pares clave-valor<meta /> asociativos . En general, un elemento meta transmite información oculta sobre el documento. Se pueden utilizar varias etiquetas meta, todas las cuales deben estar anidadas en el elemento de encabezado. El propósito específico de cada elemento está definido por sus atributos. Fuera de XHTML , a menudo se proporciona sin la barra ( ), a pesar de ser un elemento void.<meta /><meta>
En una forma, <meta />los elementos pueden especificar encabezados HTTP que debe enviar un servidor web antes del contenido real. Por ejemplo, especifica que la página debe enviarse con un encabezado HTTP llamado que tiene un valor .<meta http-equiv="foo" content="bar" />foobar
<meta />elemento especifica atributos HTML nameasociados contentque describen aspectos de la página HTML. Para evitar posibles ambigüedades, schemese 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 a sí mismo como que contiene el elemento, con un valor de , del marco de descripción de recursos de DC o Dublin Core .<meta name="foo" content="bar" scheme="DC" /><meta />foobar <object>...</object><head>elemento, podría utilizarse para extraer datos externos y asociarlos con el documento actual.<script>...</script>src. [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, solo texto. Solo <title>se permite un elemento por documento.En los navegadores visuales, los elementos que se pueden visualizar se pueden representar como elementos en bloque o en línea . Si bien todos los elementos son parte de la secuencia del documento, los elementos en 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 se pueden establecer márgenes, ancho o altura para ellos y se dividen en líneas.
Los elementos de bloque, o elementos a nivel de bloque, tienen una estructura rectangular. De manera predeterminada, estos elementos abarcarán todo el ancho de su elemento padre y, por lo tanto, no permitirán que ningún otro elemento ocupe el mismo espacio horizontal en el que se ubican.
La estructura rectangular de un elemento de bloque se suele denominar 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>PExistía en las etiquetas HTML y se estandarizó en HTML 2.0; aún vigente.<h1>...</h1> <h2>...</h2><h3>...</h3><h4>...</h4><h5>...</h5><h6>...</h6>h1delimitan el encabezado de nivel más alto, h2el nivel inferior (subsección), h3el nivel inferior, etc. h6A veces se los denomina colectivamente etiquetas, donde n significa cualquiera de los niveles de encabezado disponibles. La mayoría de los navegadores visuales muestran los encabezados como texto grande y 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 se deben usar para estilizar texto explícitamente. Más bien, describen la estructura y la organización del documento. Algunos programas los usan para generar esquemas y tablas de contenido.hn<dl>...</dl>DLExistía en las etiquetas HTML y se estandarizó en HTML 2.0; aún vigente.<dt>...</dt>DTExistía en las etiquetas HTML y se estandarizó en HTML 2.0; aún vigente.<dd>...</dd>DDExistía en las etiquetas HTML y se estandarizó en HTML 2.0; aún vigente.<ol>...</ol>typeatributo se puede utilizar para especificar el tipo de marcador que se utilizará en la lista, pero las hojas de estilo ofrecen más control. El valor predeterminado es la numeración arábiga. En un atributo HTML: ; o en una declaración CSS: – reemplazando por 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;decimalnonelas opciones y para los alfabetos CJK , hebreo, georgiano y armenio. El atributo está obsoleto en HTML 3.2 y 4.01, pero no en HTML 5.OLExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente.<ul>...</ul><ul type="foo">ul { list-style-type: foo; }foodiscsquarecirclenoneULExistía en las etiquetas HTML y se estandarizó en HTML 2.0; aún vigente.<li>...</li>ol) o desordenadas ( ul).LIExistía en las etiquetas HTML y se estandarizó en HTML 2.0; aún vigente.<dir>...</dir> (deprecated)<ul>DIRexistía en etiquetas HTML y se estandarizó en HTML 2.0; obsoleto en HTML 4.0 Transitional; no válido en HTML 4.0 Strict.<address>...</address>ADDRESSExistía en las etiquetas HTML y se estandarizó en HTML 2.0; aún 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 indicar la fuente y debe ser un Identificador uniforme de recursos (URL ) completamente calificado .
BLOCKQUOTEExistía en el borrador de Internet HTML 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.MENUexistía en HTML Tags y se estandarizó en HTML 2.0; obsoleto en HTML 4.0 Transitional; inválido en HTML 4.0 Strict; luego redefinido en HTML5, eliminado en HTML 5.2, pero incluido en HTML Living Standard en 2019.<noscript>...</noscript><pre>...</pre><pre>...</pre>, los espacios en blanco deben representarse como creados. (Con las propiedades CSS: , otros elementos se pueden presentar 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; }PREExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente.<section>...</section><script>...</script><script />atributo srcpara proporcionar una URL desde la que cargar el script, o como <script>...</script>contenido de script incrustado. Nota: <script> no es en sí mismo un elemento de bloque o en línea; por sí mismo no debería mostrarse en absoluto, pero puede contener instrucciones para generar dinámicamente tanto contenido de bloque como en línea.Los elementos en línea no se pueden colocar directamente dentro del elemento; deben estar completamente anidados dentro de elementos de 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 de anclaje ) o el destino (el final) de un hipervínculo . Como origen, al establecer el atributo href, [26] se crea un hipervínculo; puede apuntar a otra parte del documento o a otro recurso (por ejemplo, una página web) mediante una URL externa . Como destino, al establecer los atributos HTMLname o , se permite vincular el elemento desde un localizador uniforme de recursos (URL) a través de un identificador de fragmento . Las dos formas, origen y ancla, se pueden utilizar simultáneamente.id
idatributo [27] , por lo que no es necesario usarlo , aunque esta forma de agregar anclas sigue funcionando.<a name="foo">...</a>Para ilustrar: el encabezado de una sección de tabla de contenidos enejemplo.comLa página de inicio de podría convertirse en un objetivo escribiendo: .<h2><a name="contents">Table of contents</a></h2>
Continuando con este ejemplo, ahora que la sección ha sido marcada como objetivo, se puede hacer referencia 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 proporcionar 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 se desplaza sobre un enlace, se transforma en una mano con el dedo índice extendido y el titlevalor se muestra en una información sobre herramientas o de alguna otra manera. Algunos navegadores representan el texto alternativo de la misma manera, aunque esto no es lo que exige la especificación.
AExistía en las etiquetas HTML y se estandarizó en HTML 2.0;Los elementos de frase se utilizan para marcar frases y añadir estructura o significado semántico a fragmentos de texto. Por ejemplo, las etiquetas <em>y <strong>se pueden utilizar para añadir é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>DFNExistió en HTML Internet Draft 1.2 y fue completamente estandarizado en HTML 3.2; aún está vigente.<em>...</em>EMExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente.<strong>...</strong>STRONGExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente, 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 de código fuente ( ), variables ( ), entrada del usuario ( ) y salida de terminal u otra salida ( ).<code><var><kbd><samp>
<code>...</code>code example). Representado convencionalmente en una fuente monoespaciada.CODEExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente.<kbd>...</kbd>KBDExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente.<samp>...</samp>SAMPExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente.<var>...</var>VARExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún 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 sea semánticamente correcto.
<b>...</b>{ font-weight: bold; }<strong><b><strong>BExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente, redefinido en HTML5.<i>...</i>{ font-style: italic; }<em>...</em><i><em>IExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente, redefinido en HTML5.<u>...</u>{ text-decoration: underline; }<u><u>UExistía en el borrador de Internet HTML 1.2 , se estandarizó en HTML 3.2 pero quedó obsoleto en HTML 4.0 Transitional y no era válido en HTML 4.0 Strict. Se reintrodujo 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/borrado. [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. Se reintrodujo en HTML5, que en su lugar dejó obsoleto <strike>.<big>...</big> (deprecated){ font-size: larger; }<strike>...</strike> (deprecated){ text-decoration: line-through; }STRIKEse estandarizó en HTML 3.2; obsoleto en HTML 4.0 Transitional; no válido en HTML 4.0 Strict.<tt>...</tt> (deprecated){ font-family: monospace; }TTExistía en el borrador de Internet HTML 1.2 y se estandarizó en HTML 2.0; no se admitía [34] en HTML5. Posibles reemplazos: <kbd> para marcar la entrada del usuario, <var> para variables (normalmente se muestra en cursiva y no con un cambio a monoespaciado), <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>Se puede especificar el color de la 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 en desuso, utilice equivalentes 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 van 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 un 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 la 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 la unidad Y , ni tampoco 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 una referencia a otras fuentes" sin ninguna limitación o requisito particular. [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, personas 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 cita". [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 la muy limitada después de que WHATWG hiciera 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 utilizó 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 envolvían (y aún envuelven) rutinariamente cada cita completa en este elemento. Otro problema con el elemento es que WHATWG recomienda que se escriba en cursiva de manera predeterminada (por lo que casi todos los navegadores lo hacen), porque (en su opinión) es solo para títulos de publicaciones. Sin embargo, por convención, solo ciertos tipos de títulos realmente llevan cursiva, mientras que se espera que otros se pongan 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 usan una hoja de estilo para todo el sitio para deshacer la cursiva automática de este elemento.<data>...</data><del>...</del><ins>...</ins><del>o <s>. Normalmente se representa subrayado :Texto insertado.<ins>elementos <del>también pueden utilizarse como elementos de bloque: contienen otros elementos de bloque y elementos en línea. Sin embargo, estos elementos deben permanecer completamente dentro de su elemento padre para mantener un documento HTML bien formado. Por ejemplo, para eliminar texto de la mitad de un párrafo a lo largo de varios párrafos y terminar en un párrafo final, se necesitarían utilizar tres <del>elementos separados. <del>Se requerirí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 cita pueden estar anidados. <q> debe generar automáticamente comillas junto con las hojas de estilo. Las preocupaciones prácticas debido a la falta de compatibilidad del navegador pueden obligar a los autores a encontrar soluciones alternativas. El atributo proporciona la fuente y debe ser un URIcite completo .block-quote) mediante 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 un elemento de bloque o en línea; por sí mismo no debería mostrarse en absoluto, pero puede contener instrucciones para generar dinámicamente tanto contenido de bloque como de contenido 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 Java y tenía limitaciones de accesibilidad.<object>no son consistentes entre los distintos 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 agregó nuevamente 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 muestran como una 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]IMGExistió en HTML Internet Draft 1.2 y fue estandarizado en HTML 2.0; aún vigente.<map>...</map><object>...</object>typeatributo. Puede ser de cualquier tipo MIME que entienda el agente de usuario, como una página HTML incrustada, un archivo que se va a manejar mediante un complemento como Flash , un subprograma Java , un archivo de sonido, etc.<param /><applet>, este elemento ahora se usa con <object>, y solo debe aparecer como elemento secundario de <object>. Utiliza atributos HTML para establecer un parámetro para el objeto, por ejemplo, ancho, alto, fuente, color de fondo, etc., según el tipo de objeto. Un objeto puede tener varios <param />elementos.<source>...</source>srcatributo de forma similar a los elementos <video>and <audio>.<track>...</track><video>...</video>srcatributo. Los formatos de video admitidos varían de un navegador a otro.Estos elementos se pueden combinar en un formulario o, en algunos casos, se pueden utilizar por separado como controles de interfaz de usuario; en el documento, pueden ser HTML simple o utilizarse junto con scripts. El marcado HTML especifica los elementos que componen un formulario y el método por el que 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 que se envía.
(Estos elementos son elementos de bloque o en línea, pero se recopilan aquí porque su uso está más restringido que el de otros elementos de bloque o en línea).
<form action="url">...</form><form>elemento especifica y ejecuta la acción general de un área de formulario, utilizando el atributo requerido action.<datalist>...</datalist>options 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>Se prefiere este elemento si es posible (es decir, si el cliente lo admite), ya que ofrece más posibilidades.srcatributo.sizeatributo especifica el ancho predeterminado de la entrada en caracteres. max-lengthEstablece la cantidad máxima 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 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 renderizada, pero permiten que un diseñador mantenga una copia de los datos que se deben enviar al servidor como parte del formulario. Por ejemplo, pueden ser datos que este usuario web ingresó o seleccionó en un formulario anterior y que se deben procesar junto con el formulario actual. No se muestran al usuario, pero los datos se pueden modificar del lado del cliente editando la fuente HTML.<isindex /> (deprecated)<isindex />podría aparecer en el encabezado o en el cuerpo del documento, pero solo una vez en el documento. <isindex />funcionó como un formulario de búsqueda HTML primitivo; pero de facto quedó obsoleto por los formularios HTML más avanzados introducidos a principios y mediados de la década de 1990. Representa un conjunto de hipervínculos compuestos por un URI base, un ampersand y palabras clave codificadas con porcentajes separados por signos más .ISINDEXexistía en etiquetas HTML ; estandarizado en HTML 2.0; obsoleto en HTML 4.0 Transitional; no válido en HTML 4.0 Strict.<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 es un texto de un carácter de ancho) 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 de HTML 3.0 y en las tablas HTML de RFC 1942 posteriores . Se inspiraron en el modelo de tabla 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 en las tablas no son elementos en bloque ni en línea ).
<table>...</table>summaryatributo se requiere informalmente por motivos de accesibilidad, aunque su uso no es sencillo.<tr>...</tr><table>.<th>...</th><table>de encabezado; el contenido se muestra en negrita y centrado. 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 se divide en varias páginas (en formato impreso o en 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 se divide en varias páginas (en formato impreso o en otros medios paginados).Los marcos permiten que una ventana de navegador HTML visual se divida en segmentos, cada uno de los cuales puede mostrar un documento diferente. Esto puede reducir el uso del ancho de banda, ya que las partes repetidas de un diseño se pueden usar en un marco, 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 los documentos (o sitios web) separados e independientes se muestran adyacentes entre sí y se les permite interactuar con la misma ventana principal. Debido a este costo, los marcos (excluyendo el <iframe>elemento) solo se permiten en el conjunto de marcos HTML 4.01. Los iframes también pueden contener documentos en diferentes servidores. En este caso, la interacción entre ventanas está bloqueada por el navegador. Sitios como Facebook y Twitter usan iframes para mostrar contenido ( complementos ) en sitios web de terceros. Google AdSense usa 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 a <body>y a <frameset>. Sin embargo, <iframe>se pueden utilizar en el cuerpo de un documento normal.
<frameset>...</frameset> (deprecated)<frame />elementos de un documento. La disposición de los marcos se proporciona mediante listas separadas por comas en los atributos HTMLrows y .cols <frame /> (deprecated)<frameset>. Un documento independiente se vincula a un marco mediante el srcatributo dentro del <frame />elemento.<noframes>...</noframes> (deprecated)<frame />elementos.<iframe>...</iframe><object />elemento, un marco <iframe>puede ser el marco "destino" para los vínculos definidos por otros elementos, y puede ser seleccionado por el agente de usuario como el foco para imprimir, ver su código 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 independiente se vincula a un marco utilizando el srcatributo dentro de <iframe />, un código HTML en línea se incrusta en un marco utilizando el srcdocatributo dentro del <iframe />elemento.En HTML , longdesces un atributo utilizado dentro de los <img />elementos <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 se suele confundir– 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 para usuarios de computadoras con problemas de accesibilidad , como ciegos o discapacitados visuales , y es ampliamente implementado tanto por navegadores web como por 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 desaprobar 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 permiten 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 = "Hola.jpg" longdesc = "descripción.html" /> [ < a href = "descripción.html" title = "descripción larga de la imagen" > D </ a > ]Los siguientes elementos fueron parte del HTML inicial desarrollado por Tim Berners-Lee entre 1989 y 1991; se mencionan en Etiquetas HTML , pero quedaron obsoletos en HTML 2.0 y nunca fueron 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 ; obsoleto 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); obsoletas en HTML 2.0; no válidas en HTML 3.2 y versiones posteriores.En esta sección se enumeran algunos elementos obsoletos de uso generalizado, 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 ; está obsoleto o no es válido en HTML 2.0 y versiones posteriores. La etiqueta CSS de reemplazo, aunque estándar, no es obligatoria para su compatibilidad.<layer>...</layer> (deprecated)<layer>originado en Netscape 4 ; obsoleto o inválido en HTML 4.01 y versiones posteriores.<marquee>...</marquee> (deprecated)<marquee>originado en Microsoft Internet Explorer ; obsoleto o inválido en HTML 4.01 y versiones posteriores.<nobr>...</nobr> (deprecated){white-space: nowrap;}<nobr>es un elemento propietario que la mayoría de los navegadores reconocen por razones 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 relacionado, SGML y SHTML) utiliza la misma sintaxis que el comentario SGML o el comentario XML , dependiendo del tipo de documento.
A diferencia de la mayoría de las etiquetas HTML, los comentarios no se anidan. En términos más generales, hay algunas cadenas que no pueden aparecer en el texto del comentario. Estas son <!--(el comienzo de un comentario), -->(esto finaliza el comentario, por lo que sigue trivialmente, no puede aparecer dentro de él) y --!>. Además, las cadenas >y ->no pueden aparecer al comienzo de un comentario y <!-no pueden aparecer al final. [63]
Como resultado, el marcado <!--Xbegin<!--Y-->Xend-->está mal formado y generará el comentarioXbegin<!--Yy el textoFin-->después de ello, o a veces simplementeFin-->, dependiendo del navegador.
Los comentarios pueden aparecer en cualquier parte de un documento, ya que el analizador HTML debe ignorarlos 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; este 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 permite que otras etiquetas hagan esto.
Sin embargo, no todos los navegadores y editores HTML son totalmente compatibles con el marco de sintaxis HTML y pueden hacer cosas impredecibles en determinadas condiciones de sintaxis. El manejo defectuoso de los comentarios solo afecta a alrededor del 5 % de todos los navegadores y editores HTML en uso, e incluso en ese caso, solo 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:
doctypelínea, Internet Explorer 6 utilizará el modo especialdoctype para la página HTML. No se procesará ninguna información.<style>y <script>todavía están rodeados a veces 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 realmente un comentario. Esto significa que los intentos de comentar realmente el marcado CSS y script modificando los elementos dentro del comentario para que no se reconozcan, 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.
