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 sencilla. 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 sencillo. 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 la etiqueta de cierre, o incluso la etiqueta de inicio, estén presentes. [4] Algunos elementos, los llamados elementos void , no tienen una 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 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 dar estilo explícito al texto. 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 del ancla ) o el destino (el final) 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 establecidos, el elemento se convierte en un destino de enlace. Un localizador uniforme de recursos (URL) puede vincular a este destino a través de un identificador de fragmento . En HTML5, cualquier elemento ahora se puede convertir en un destino utilizando el atributo, [27] por lo que no es necesario utilizar , aunque esta forma de agregar anclas continúa funcionando.id id<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 volvió a introducir 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>type attribute. This may be in any MIME-type the user agent understands, such as an embedded HTML page, a file to be handled by a plug-in such as Flash, a Java applet, a sound file, etc.<param /><applet>, this element is now used with <object>, and should only occur as a child of <object>. It uses HTML attributes to set a parameter for the object, e.g. width, height, font, background color, etc., depending on the type of object. An object can have multiple <param /> elements.<source>...</source>src attribute in a way similar to the <video> and <audio> elements.<track>...</track><video>...</video>src attribute. Supported video formats vary from browser to browser.These elements can be combined into a form or in some instances used separately as user-interface controls; in the document, they can be simple HTML or used in conjunction with Scripts. HTML markup specifies the elements that make up a form, and the method by which it will be submitted. However, some form of scripts (server-side, client-side, or both) must be used to process the user's input once it is submitted.
(These elements are either block or inline elements, but are collected here as their use is more restricted than other inline or block elements.)
<form action="url">...</form><form> element specifies and operates the overall action of a form area, using the required action attribute.<datalist>...</datalist>options for use in form elements.<fieldset>...</fieldset><fieldset>, which can then have a <legend> added in order to identify their function.<input /><input> elements allow a variety of standard form controls to be implemented.<button> is preferred if possible (i.e., if the client supports it) as it provides richer possibilities.src attribute.size attribute specifies the default width of the input in character-widths. max-length sets the maximum number of characters the user can enter (which may be greater than size).text which produces a search bar.text. The difference is that text typed in this field is masked – characters are displayed as an asterisk, a dot, or another replacement. The password is still submitted to the server as plaintext, so an underlying secure communication protocol like HTTPS is needed if confidentiality is a concern.text for telephone numbers.text for email addresses.text for URLs.text for numbers.hidden inputs are not visible in the rendered page, but allow a designer to maintain a copy of data that needs to be submitted to the server as part of the form. This may, for example, be data that this web user entered or selected on a previous form that needs to be processed in conjunction with the current form. Not displayed to the user but data can still be altered client-side by editing the HTML source.<isindex /> (deprecated)<isindex /> could either appear in the document head or in the body, but only once in a document.<isindex /> operated as a primitive HTML search form; but was de facto obsoleted by more advanced HTML forms introduced in the early to mid-1990s. Represents a set of hyperlinks composed of a base URI, an ampersand and percent-encoded keywords separated by plus signs.ISINDEX existed in HTML Tags; standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict.<keygen>...</keygen> (deprecated)<label for="id">...</label>radio. Clicking on the label fires a click on the matching input.<legend>...</legend><fieldset>.<meter>...</meter>value attribute. Can also have: min, low, high, and max.<option value="x">...</option><select> list.<optgroup>...</optgroup><option> elements in a <select> list.<output>...</output><progress>...</progress><select name="xyz">...</select><textarea rows="8">...</textarea>cols (where a column is a one-character width of text) and rows HTML attributes. The content of this element is restricted to plain text, which appears in the text area as default text when the page is loaded.The format of HTML Tables was proposed in the HTML 3.0 Drafts and the later RFC 1942 HTML Tables. They were inspired by the CALS Table Model. Some elements in these proposals were included in HTML 3.2; the present form of HTML Tables was standardized in HTML 4. (Many of the elements used within tables are neither block nor inline elements.)
<table>...</table>summary attribute is informally required for accessibility purposes, though its usage is not simple.<tr>...</tr><table>.<th>...</th><table> header cell; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items.<td>...</td><table> data cell.<colgroup>...</colgroup><table>.<col>...</col><table>.<caption>...</caption><table>.<thead>...</thead><table>. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media).<tbody>...</tbody><table>.<tfoot>...</tfoot><table>. Like <thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media).Frames allow a visual HTML browser window to be split into segments, each of which can show a different document. This can lower bandwidth use, as repeating parts of a layout can be used in one frame, while variable content is displayed in another. This may come at a certain usability cost, especially in non-visual user agents,[54] due to separate and independent documents (or websites) being displayed adjacent to each other and being allowed to interact with the same parent window. Because of this cost, frames (excluding the <iframe> element) are only allowed in HTML 4.01 Frame-set. Iframes can also hold documents on different servers. In this case the interaction between windows is blocked by the browser. Sites like Facebook and Twitter use iframes to display content (plugins) on third party websites. Google AdSense uses iframes to display banners on third party websites.
In HTML 4.01, a document may contain a <head> and a <body> or a <head> and a <frameset>, but not both a <body> and a <frameset>. However, <iframe> can be used in a normal document body.
<frameset>...</frameset> (deprecated)<frame /> elements for a document. The layout of frames is given by comma separated lists in the rows and cols HTML attributes.<frame /> (deprecated)<frameset>. A separate document is linked to a frame using the src attribute inside the <frame /> element.<noframes>...</noframes> (deprecated)<frame /> elements.<iframe>...</iframe><object /> element, an <iframe> can be the "target" frame for links defined by other elements, and it can be selected by the user agent as the focus for printing, viewing its source, and so on.
The content of the element is used as alternative text to be displayed if the browser does not support inline frames.
A separate document is linked to a frame using the src attribute inside the <iframe />, an inline HTML code is embedded to a frame using the srcdoc attribute inside the <iframe /> element.In HTML, longdesc is an attribute used within the <img />, <frame />, or <iframe> elements. It is supposed to be a URL[note 5] to a document that provides a long description for the image, frame, or iframe in question.[55] This attribute should contain a URL, not – as is commonly mistaken – the text of the description itself.
longdesc was designed to be used by screen readers to display image information for computer users with accessibility issues, such as the blind or visually impaired, and is widely implemented by both web browsers and screen readers.[56] Some developers object that[57] it is actually seldom used for this purpose because there are relatively few authors who use the attribute and most of those authors use it incorrectly; thus, they recommend deprecating longdesc.[58] The publishing industry has responded, advocating the retention of longdesc.[59]
<img src="Hello.jpg" longdesc="description.html">
Content of description.html:
<br /><p>This is an image of a two-layered birthday cake.</p>...Since very few graphical browsers support making the link available natively (Opera and iCab being the exceptions), it is useful to include a link to the description page near the <img /> element whenever possible, as this can also aid sighted users.
<img src="Hello.jpg" longdesc="description.html" /> [<a href="description.html" title="long description of the image">D</a>]The following elements were part of the early HTML developed by Tim Berners-Lee from 1989 to 1991; they are mentioned in HTML Tags, but deprecated in HTML 2.0 and were never part of HTML standards.
<listing>...</listing> (deprecated)<plaintext> (deprecated)<plaintext> does not have an end tag as it terminates the markup and causes the rest of the document to be parsed as if it were plaintext.<plaintext> existed in HTML Tags; deprecated in HTML 2.0; invalid in HTML 4.0.<xmp>...</xmp> (deprecated)<nextid> (deprecated)<nextid> existed in HTML Tags (described as obsolete); deprecated in HTML 2.0; invalid in HTML 3.2 and later.This section lists some widely used obsolete elements, which means they are not used in valid code. They may not be supported in all user agents.
<blink>...</blink> (deprecated){text-decoration: blink} (This effect may have negative consequences for people with photosensitive epilepsy;[62] its use on the public Internet should follow the appropriate guidelines.)<blink> originated in Netscape Navigator and is mostly recognized by its descendants, including Firefox; deprecated or invalid in HTML 2.0 and later. The replacement CSS tag, while standard, is not required to be supported.<layer>...</layer> (deprecated)<layer> originated in Netscape 4; deprecated or invalid in HTML 4.01 and later.<marquee>...</marquee> (deprecated)<marquee> originated in Microsoft Internet Explorer; deprecated or invalid in HTML 4.01 and later.<nobr>...</nobr> (deprecated){white-space: nowrap;}<nobr> is a proprietary element which is recognized by most browsers for compatibility reasons; deprecated or invalid in HTML 2.0 and later.<noembed>...</noembed> (deprecated)<embed> or <object> element.<!-- A Comment -->A comment in HTML (and related XML, SGML and SHTML) uses the same syntax as the SGML comment or XML comment, depending on the doctype.
Unlike most HTML tags, comments do not nest. More generally, there are some strings that are not allowed to appear in the comment text. Those are <!--(the beginning of a comment),-->(this ends the comment so it trivially follows it can not appear inside it) and --!>. Additionally, the strings > and -> cannot appear at the beginning of a comment and <!- cannot appear at the end.[63]
As a result, the markup <!--Xbegin<!--Y-->Xend--> is ill-formed and will yield the comment Xbegin<!--Y and the text Xend--> after it, or sometimes just Xend-->, depending on browser.
Comments can appear anywhere in a document, as the HTML parser is supposed to ignore them no matter where they appear so long as they are not inside other HTML tag structures (i.e., they cannot be used next to attributes and values; this is invalid markup: <span id="x1"<!--for "extension one"--> style="...">).
Comments can even appear before the doctype declaration; no other tags are permitted to do this.
However, not all browsers and HTML editors are fully compliant with the HTML syntax framework and may do unpredictable things under some syntax conditions. Defective handling of comments only affects about 5% of all browsers and HTML editors in use, and even then only certain versions are affected by comment mishandling issues (Internet Explorer 6 accounts for most of this high percentage).
There are a few compatibility quirks involving comments:
doctype will cause Internet Explorer 6 to use quirks mode for the HTML page. None of the doctype information will be processed.<style> and <script> elements are still sometimes surrounded by comment delimiters, and CSS- and script-capable browsers are written to specifically ignore that comment markup as not actually a comment. This means that attempts to actually comment out CSS and script markup by change the elements inside the comment to not be recognized, e.g. <-- [script]...[/script] -->.<style> ... {comment tags} ...</style> will show up on-screen. Other HTML editors may have this same defect.<object> for the inevitable exception.<embed><embed>...frames do present additional usability challenges that are unique to users with disabilities, particularly those who use screen readers.
