Un elemento HTML , en informática , a menudo también llamado etiqueta HTML , indica una estructura en un documento HTML y un método para ordenar jerárquicamente los contenidos. Más específicamente, es un elemento SGML que satisface los requisitos de una o más DTD HTML [1] .
Los elementos pueden representar encabezados , párrafos , hipervínculos , listas , formularios , objetos multimedia incrustados y varias otras estructuras.
Los elementos vacíos se cierran agregando un "/", como en las etiquetas de cierre. Para compatibilidad con versiones anteriores , se recomienda dejar un espacio antes de la barra. [2]
Algunos elementos, aunque no están contenidos en ningún DTD oficial, son compatibles con algunos navegadores web y los utilizan las páginas web . Dichos elementos pueden ser ignorados o mostrados incorrectamente por navegadores que no los soportan.
Los elementos HTML generalmente constan de cuatro partes:
Muchos elementos HTML se pueden " anidar ". El anidamiento se entiende más fácilmente a través de ejemplos [3] :
<p>You<em>rock</em></p>tiene un elemento <em>dentro de un elemento <p>. La situación puede complicarse, por ejemplo
<h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1>Puede anidar elementos todo el tiempo que desee, pero las etiquetas deben cerrarse en el orden inverso al que se abrieron.
Equivocado <p>Lucy kissed <em>Jimmy</p></em> Correcto <p>Lucy kissed <em>Jimmy</em></p>La capacidad de anidar se rige por algunas reglas que definen si un elemento está a nivel de bloque o en línea .
Un elemento a nivel de bloque generalmente comienza en una nueva línea, mientras que un elemento en línea generalmente no lo hace. Un elemento de nivel de bloque puede contener otros elementos tanto de tipo de nivel de bloque como de tipo en línea , mientras que un elemento en línea solo puede contener otros elementos de tipo en línea . Ejemplos de elementos a nivel de bloque son párrafos, listas, tablas, encabezados y el contenedor general <div>. Los elementos de bloque son elementos con un contenedor rectangular que consta del contenido, el relleno, el borde y el relleno exterior (margen). Puede especificar su tamaño con CSS . Los elementos en línea (por ejemplo, STRONG, ITALIC y UNDERLINE ") no crean bloques, se muestran en la misma línea con el contenido de la etiqueta adyacente. El ancho y la altura del elemento" en línea "depende solo de su contenido, no puede especificar su tamaño con CSS [5] .
Todas las etiquetas de cuerpo no son elementos a nivel de bloque y no pueden estar contenidas dentro de un elemento en línea [1] [6] .
Muchos elementos HTML están diseñados para cambiar la estructura o el significado del texto. Algunos están a nivel de bloque, pero la mayoría están en línea y se pueden incluir en el flujo de texto normal.
Nivel de bloque <p>...</p> Crea un párrafo. En HTML, la etiqueta de cierre no es opcional. <blockquote>...</blockquote> Crea una cita, que normalmente se muestra con sangría pero no está diseñada para sangrar el texto. Puede agregar citas automáticamente. El atributo citepuede proporcionar la fuente y debe ser una URL completa . <pre>...</pre> Crear texto preformateado. El texto se muestra con una fuente no proporcionada exactamente como se escribió en el archivo (ver arte ASCII ). Con CSS:{white-space: pre} <address>...</address> Se utiliza para delimitar la información de la dirección. En línea <em>...</em> <strong>...</strong> Énfasis (convencionalmente se muestra en cursiva) y fuerte énfasis (convencionalmente se muestra en negrita). <q>...</q> Una breve cita. Se puede mostrar con comillas. Las cotizaciones se pueden anidar. El citeatributo Puede proporcionar origen debe ser una URL completa . <code>...</code> Una pieza de código. Mostrado convencionalmente en una fuente monoespaciadaEsempio di codice. <del>...</del> Texto eliminado. Tachado mostrado:Texto eliminado. <ins>...</ins> Texto ingresado. A menudo se utiliza para identificar texto que reemplaza texto <del>. Se muestra subrayado:Texto ingresado. <cite>...</cite> Citación. Referencia a una cita de una fuente o elemento dentro del texto. CINE ha sido aceptado dentro de HTML 2.0 [7] . <dfn>...</dfn> <samp>...</samp> <kbd>...</kbd> <var>...</var> Definición, texto de muestra, entrada de teclado, variable. Son similares a <code>, pero pueden tener un significado más específico. <sub>...</sub> <sup>...</sup> Cree un texto de subíndice o superíndice . equivalente CSS: o{vertical-align: sub}{vertical-align: super}Para ul, el atributo typese puede usar para especificar el tipo de numeración , pero CSS brinda más control: {list-style-type: foo} , que por defecto es el árabe . Para ul, se puede usar CSS para definir el marcador de lista {list-style-type: foo}:. El marcador predeterminado es un punto ennegrecido
<li>...</li> Crear un elemento de lista en listas ordenadas o desordenadas <dir>...</dir>(obsoleto) Delimite la lista por una carpeta. En desuso a favor de <ul>. <menu>...</menu>(obsoleto) Crear una lista de menú. Debería ser más sucinto que una lista <ul>, pero no está bien respaldado. En desuso a favor de <ul>. Ejemplos de listas Listas ordenadasPara crear una lista ordenada en HTML, utiliza un elemento olque contiene un elemento lipara cada uno de los elementos de la lista. Por ejemplo:
| Código HTML | |
|---|---|
| <ol> <li> Juan </li> <li> Lucas </li> <li>Marco</li> <li> Giacomo </li> </ol> |
|
La numeración por defecto utiliza el sistema árabe, pero también puedes elegir las letras del alfabeto latino moderno o la numeración romana , tanto en mayúsculas como en minúsculas. Para establecer el tipo de numeración, simplemente asigne el primer término de la numeración al atributo typede . olPor ejemplo:
| Código con typedefecto (1) | Letras minúsculas (a) | Mayúsculas (A) | Números romanos en minúsculas (i) | Números romanos en mayúsculas (I) |
|---|---|---|---|---|
| <tipo de ol = "1"> <li> Lucas </li> <li>Marco</li> <li> Carlos </li> </ol> |
|
|
|
|
El atributo start, por otro lado, le permite especificar el punto de inicio de la numeración, útil, por ejemplo, cuando desea interrumpir temporalmente la lista. Por cierto:
| Código HTML, por startdefecto (1) | Empieza a las 8 | Empezar a las 26 |
|---|---|---|
| <tipo de ol = "a" inicio = "1"> <li> Lucas </li> <li>Marco</li> <li> Carlos </li> </ol> |
|
|
Las listas desordenadas (también llamadas listas con viñetas) se deben crear con un elemento ulque contendrá, como en las listas ordenadas, un elemento li. La lista desordenada tiene por defecto el estilo de una lista con viñetas con círculos rellenos. Por ejemplo:
| Código HTML | |
|---|---|
| <ul> <li> Juan </li> <li> Lucas </li> <li>Marco</li> <li> Giacomo </li> </ul> |
|
El atributo typede ulpuede hacer que los punteros de los elementos individuales tomen tres estilos diferentes: con el valor discse creará una lista con viñetas con círculos rellenos como la predeterminada, con el valor circlelos círculos serán del mismo tamaño pero vacíos, y finalmente con squareuna lista con viñetas se creará en pequeños cuadrados rellenos. Al no tener ningún tipo de orden de interpretación, no se proporciona el atributo start.
| Código con typedefecto (disco) | |
|---|---|
| <ul tipo = "disco"> <li> Lucas </li> <li>Marco</li> <li> Carlos </li> </ul> |
|
HTML solo puede definir el formato del formulario , las entradas del usuario son procesadas por un lenguaje de secuencias de comandos del lado del cliente o del lado del servidor [8] .
<form>...</form> Crea un formulario. <select name="foo">...</select> Cree un menú de lista en el que el usuario pueda elegir solo un elemento. Se puede mostrar como un menú desplegable. <option>...</option> Crear un elemento de menú. <input type="checkbox"> Cree una casilla de verificación. <input type="radio"> Crear un botón de opción; si varios botones de radio tienen el mismo nombre, el usuario puede seleccionar solo uno. <input type="submit" value="NAME"> Crear un botón de envío. <input type="image" border=0 name="NAME" src="name.gif"> Cree un botón de envío usando una imagen. <input type="reset"> Cree un botón de reinicio que restablezca los valores del módulo a los iniciales. <input type="text"> Cree un cuadro de texto de una sola línea. El tamaño establece la longitud de la caja. Maxlength establece el número máximo de caracteres que se pueden ingresar (puede ser mayor que el Tamaño). <textarea>...</textarea> Crea un área de texto de varias líneas establecida por los atributos cols(columnas) y rows(líneas). El texto entre las etiquetas aparecerá en el área de texto cuando se cargue la página.Ejemplos:
CSS equivalente para atributos de texto:
Los colores web son colores que se utilizan para mostrar páginas web en la World Wide Web y en los métodos para describir y especificar esos colores. Los colores se pueden especificar como un triplete RGB o en formato hexadecimal (un triplete hexadecimal ) o, en algunos casos, por sus nombres comunes en inglés. A menudo se utiliza una herramienta de selección de color u otro software de gráficos para generar valores de color. Un ejemplo: #0099CC(un tipo de azul que también se puede escribir Pacific Blue) [10] .
Los marcos, en italiano "marcos", le permiten estructurar el documento HTML en subdocumentos que el navegador maneja como ventanas separadas. Por ejemplo, un menú de navegación siempre se puede mantener fijo y visible en un primer marco ubicado en el borde izquierdo de la página, flanqueado por un segundo marco que encierra el contenido principal deslizante. Los elementos framedeben incluirse dentro de un elemento framesetque reemplace el bodyy el documento HTML en sí debe declararse como un conjunto de marcos. En otras palabras, un elemento htmlpuede contener a heady a body(en el caso de documentos estrictos o transitorios) o, alternativamente, a heady a frameset. [13] Los marcos son parte del estándar HTML 4.0 Frameset, mientras que en HTML5 han quedado obsoletos [14] [15] .
<frameset>...</frameset> Delimitar el conjunto de marcos. La disposición de los marcos viene dada por una lista separada por comas en los atributos rowsy cols. <frame>...</frame> Encierra un único fotograma o región dentro del conjunto de fotogramas. srcDentro aparece un documento diferente enlazado a través del atributo . <noframes>...</noframes> Contiene un elemento normal bodycon niños que aparecerá en el navegador web que no admite marcos <iframe>...</iframe> Un marco en línea especial , que se puede insertar dentro de un elemento normal body. Tiene muchos atributos comunes al elemento img, pero incrusta otro documento HTML en lugar de una imagen.RDFa (Resource Description Framework in Attributes) es una recomendación del W3C que agrega una serie de extensiones de nivel de atributo a HTML, XHTML y varios tipos de documentos basados en XML para incrustar metadatos enriquecidos en documentos web. El mapeo del modelo de datos RDF permite su uso para incrustar el tema -Expresiones RDF predicado-objeto dentro de documentos XHTML. También permite la extracción de tripletas de modelos RDF por parte de agentes de usuario compatibles.
La comunidad RDFa ejecuta un sitio web wiki para alojar herramientas, ejemplos y tutoriales [16] .
La esencia de RDFa es proporcionar un conjunto de atributos que se pueden usar para transportar metadatos en un lenguaje XML (de ahí la "a" en RDFa).
Estos atributos son:
sobre una URI o CURIE que especifica el recurso cuyos metadatos tratan rel y rev especificando una relación y una relación inversa a otro recurso, respectivamente src, href y recurso especificando el recurso del socio propiedad especificar una propiedad para el contenido de un elemento o recurso asociado contenido atributo opcional que anula el contenido del elemento cuando se usa el atributo de propiedad tipo de datos atributo opcional que especifica el tipo de datos del texto especificado para usar con el atributo de propiedad tipo de atributo opcional que especifica el(los) tipo(s) RDF del sujeto o recurso asociado (el recurso al que se refieren los metadatos).Hay cinco "principios de metadatos interoperables" cumplidos por RDFa [17] .
Además, RDFa puede beneficiarse de la accesibilidad web ya que hay más información disponible para la tecnología de asistencia [18] .
| ETIQUETA [19] | ALCANCE |
| Nuevos elementos estructurales y semánticos | |
| Encabezamiento | |
| Pie de página | |
| Sección | |
| Navegación | |
| Artículo (en el caso de artículos en la página de inicio) | |
| Aparte (contenido relacionado con el principal) | |
| Grupo H | Agrupar las etiquetas de encabezado |
| <figura> y <figcaption> | Subtítulos para el contenido |
| Empotrar | Insertar contenido interactivo o multimedia |
| Rubí | Especificar anotaciones de Ruby |
| Wbr | El navegador puede insertar una nueva línea |
| <comando> y <menú> | Definen barras de herramientas o menús contextuales |
| <detalles> y <resumen> | Widget de información para usuarios |
| Marcos | Parte del texto marcada o resaltada para el usuario |
| Atributos <time> y pubdate y datetime | Hora de 24 horas o una fecha en el calendario gregoriano |
| Metro | Medida escalar de un rango conocido o valor fraccionario |
| Progreso | Estado de finalización de una tarea |
| Imagen | Contenedor de imágenes |
| Microdatos | Se pueden especificar atributos semánticos para cada etiqueta HTML |
| Nuevos atributos y tipos de entrada para formularios | |
| enfoque automático, marcador de posición y formulario | |
| Tipo de entrada: teléfono | |
| Tipo de entrada: buscar | |
| Tipo de entrada: URL | |
| Tipo de entrada: correo electrónico | |
| Tipo de entrada: número | |
| Tipo de entrada: rango | |
| Tipo de entrada: color | |
| Lista de datos | Autocompletar en un elemento de formulario |
| Autocompletar | Permite o no permite que el navegador rellene los campos
del formulario automáticamente |
| Mínimo máximo | Definen el valor mínimo y máximo permitido |
| Múltiple | Permite al usuario ingresar múltiples valores para la misma entrada |
| Patrón | Verificar que el valor ingresado cumpla con ciertas reglas |
| Requerido | Hace obligatorio llenar un espacio del formulario |
| Paso | Define la distancia entre un valor y el siguiente |
| generador de claves | Generador de claves numéricas dentro de un formulario |
| producción | Devuelve el resultado de un cálculo. |
| API para aplicaciones web | |
| Aplicaciones web sin conexión (archivo ".manifest") | Después de la primera sesión de navegación en línea,
algunos objetos también permanecerán accesibles en ausencia de una conexión de red. |
| API de base de datos indexada | Crear y manipular una base de datos dentro del navegador. |
| API de almacenamiento web | Por ejemplo, puede mantenerlos abiertos al mismo tiempo
dos cuentas sociales o de correo electrónico en el mismo navegador y cada navegación en el primero resultará en el cierre de sesión del segundo y viceversa |
| API de trabajadores web | Permiten la ejecución de piezas de código JavaScript
sin afectar el rendimiento de la página web |
| API de WebSocket | Establecen y mantienen una conexión de datos entre navegadores
y servidor remoto en el que enviar mensajes en ambas direcciones |
| Arrastrar y soltar | Arrastrar y soltar objetos |
| API de geolocalización | Geolocalización |
| Multimedia | |
| SVG y MathML | Imágenes vectoriales y fórmulas matemáticas |
| Lienzo / WebGL | API adecuada para dibujar líneas, círculos, rectángulos, imágenes y objetos 3D |
| Video | Insertar archivos de video (anteriormente solo factible con Adobe Flash ) |
| Audio | Insertar archivos de audio |
| Elementos HTML4 en desuso | |
Haml (HTML Abstraction Markup Language) es un sistema de plantillas diseñado para evitar escribir código en línea en un documento web y hacer que HTML sea más limpio. Haml ofrece la flexibilidad de tener algo de contenido HTML dinámico. Al igual que otros lenguajes web como PHP, ASP, JSP y sistemas de plantillas como eRuby, Haml también incorpora código que se ejecuta durante el tiempo de ejecución y genera código HTML para proporcionar contenido dinámico. Para ejecutar el código Haml, los archivos deben tener una extensión .haml. Estos archivos son similares a los archivos .erb o eRuby que también ayudan a incrustar código Ruby al desarrollar una aplicación web [20] .
Haml usa sangría de espacio (dos espacios) para el anidamiento y el alcance de la etiqueta. Esto actúa como un sustituto de los pares de etiquetas de extremo abierto, haciéndolo más seco y limpio. El siguiente ejemplo compara la sintaxis de Haml y eRuby (Embedded Ruby), junto con la salida HTML.
| Haml | ERB | HTML |
|---|---|---|
| % div .categoría % div .recetas % h1 = receta. primer nombre % h3 = receta. categoría % división % h4 = receta. Descripción | <div clase = "categoría"> <div clase = "recetas"> <h1> <% = receta. nombre%> </ h1> <h3> <% = receta. categoría%> </ h3> </div> <div> <h4> <% = receta. descripción%> </ h4> < </div> | <div clase = "categoría"> <div clase = "recetas"> <h1> Galleta </ h1> <h3> Postre </ h3> </div> <div> <h4> A base de pasta y azúcar. Suele tener forma circular y tiene alrededor de 400 calorías. </h4> </div> </div> |